Bagi anda yang sering mengutak-atik tampilan blog dengan menambahkan desain ikon kecil menarik mungkin sudah tidak asing lagi dengan namanya font awesome. Penggunaan font awesome memang sudah menjadi hal lumrah di kalangan blogger. Tanpa harus membuat gambar ikon sendiri, semua sudah disediakan oleh font awesome cukup dengan sisipkan satu javascript pemanggil dan beberapa kode pendek untuk font awesomenya.
Namun ada kelebihan ternyata juga ada kekurangannya. Font awesome memang memudahkan kita saat membutuhkan ikon tertentu untuk kelengkapan fitur dalam elemen blog. Tapi di sisi lain ternyata penggunaan font awesome ini cukup berpengaruh dalam kecepatan loading blog. Pemanggilan ikon dari font awesome harus meload script js eksternal sehingga loading blog menjadi sedikit lebih lambat karena membutuhkan waktu delay saat melakukan panggilan.
Nah, jika ingin kecepatan loading blog tidak terganggu, alternatifnya kita bisa mengganti font awesome tersebut menggunakan ikon SVG. Sebelumnya saya sendiri kurang begitu mengenal tentang ikon SVG ini. Memang sering mendengar tapi belum sempat mempelajarinya. Namun karena beberapa orang bertanya bahkan ada yang menyinggung hal tersebut (icon svg) dalam salah satu komentar di postingan blog saya ini, saya pun penasaran untuk mempelajarinya.
Ikon SVG (Scalable Vector Graphics) adalah bahasa markup yang berfungsi untuk menampilkan ikon atau gambar-gambar tertentu. Pilihan iconnya juga cukup lengkap untuk menunjang kebutuhan blogging anda. Selain itu, icon ini juga sudah support di semua browser sehingga dapat tampil dengan baik saat blog diakses lewat desktop maupun mobile.
Berbeda dengan font awesome, penggunaan ikon SVG ini tidak perlu memanggil script eksternal sehingga loading blog juga akan menjadi lebih ringan. Tampilan Ikon SVG ini layaknya teks postingan sehingga akan langsung muncul saat halaman dibuka.
Meski belum semuanya, beberapa ikon di blog saya ini juga sebagian besar sudah saya ganti menggunakan icon dari SVG ini sehingga loading semakin ringan. Jika anda tertarik menggunakannya, silahkan simak langkah penerapannya di bawah ini.
Cara Mendapatkan Kode Ikon SVG
Sebelum langkah pemasangannya, terlebih dulu kita mesti mengambil kode untuk ikon svg yang kita butuhkan.
1. Kunjungi websitenya di alamat berikut ini:
2. Silahkan pilih ikon yang anda butuhkan atau bisa juga mencarinya lewat tombol Search.
Untuk mendapatkan kodenya, klik pada </> dan pilih "View SVG". Silahkan salin kode yang muncul dalam kotak di bawahnya.
Cara Memasang Atau Mengganti Font Awesome dengan Ikon SVG
Untuk memasangnya di html template blog anda, ada 3 cara yang bisa diterapkan. Silahkan pilih dari ketiga cara berikut ini yang cocok untuk diterapkan di blog anda.
1. Memasangnya Langsung dalam Html
Cara ini merupakan pemasangan paling mudah. Setelah kode svg tadi kita dapatkan, kita tinggal memasangnya langsung ke dalam template. Misal kodenya seperti berikut ini:
<svg style="width:24px;height:24px" viewbox="0 0 24 24"> <path fill="currentColor" d="M21,6V8H3V6H21M3,18H12V16H3V18M3,13H21V11H3V13Z" /> </path></svg>
Keterangan:
- "width:24px;height:24px" adalah ukuran lebar dan tinggi icon. Anda bisa ubah dan sesuaikan.
- "currentColor" untuk warna icon, anda bisa mengubahnya dengan warna lain misal menjadi "#000000".
2. Memasang Pada Html dan Script Internal CSS
Jika ada beberapa icon SVG yang hendak anda tambahkan, lebih baik anda gunakan cara kedua ini, yaitu dengan memisahkan stylenya di bagian internal CSS. Tentunya ini lebih simpel dan untuk menghindari penggunaan style yang berulang. Caranya yaitu:
Sebagai contoh, lihat kode pada cara pertama di atas. Hapus kode style="width:24px;height:24px" dan fill="currentColor". Maka hasilnya menjadi seperti berikut ini:
<svg viewbox="0 0 24 24"> <path d="M21,6V8H3V6H21M3,18H12V16H3V18M3,13H21V11H3V13Z" /> </path></svg>
Selanjutnya atur internal CSSnya menjadi seperti berikut ini:
.svg {width:24px; height:24px} .svg path {fill:#000000}
Keterangan:
- ukuran dan warna bisa anda sesuaikan seperti langkah pertama di atas.
- jika icon masih berada dalam turunan fitur lain, maka pengaturan CSSnya mesti disesuaikan dengan fitur tersebut. Misalnya fitur sosial media, maka penulisan CSSnya menjadi seperti berikut ini:
.social media a svg { width:24px; height:24px} .social media a svg path {fill:#000000}
3. Memasangnya Sebagai Internal CSS
Jika anda ingin memasang ikon SVG langsung ke dalam internal CSS, maka gunakan cara ketiga ini. Cara ini memang cukup ribet sehingga anda mesti paham betul agar bisa berhasil. Ini bisa anda lakukan misalnya ketika ingin membuat icon sebagai background image atau konten dari pseudo-element :before atau :after. Contohnya seperti berikut ini:
#profil { background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7.41,15.41L12,10.83L16.59,15.41L18,14L12,8L6,14L7.41,15.41Z' fill='%23fff'/%3E%3C/svg%3E"); background-color:#008c5f; background-repeat: no-repeat; background-position: center center; background-size: 45px 45px; }
Keterangan:
- Tulisan ditandai warna orange mesti ditulis sama persis agar bisa tampil di semua browser.
- Tulisan ditandai warna merah merupakan kode svgnya. Silahkan ganti dengan kode ikon svg anda.
- Tulisan warna biru adalah kode untuk mengatur warna ikon (tanda # ditulis %23).
Cara Mengganti Font Awesome dengan Ikon SVG
Biasanya pemasangan font awesome pada html menggunakan kode seperti berikut ini:
<i class='fa fa-home'/></i>
Maka untuk menggantinya, kita tinggal ganti saja kode tersebut menggunakan kode dari SVG, misalnya menjadi seperti berikut ini:
<svg style="width:24px;height:24px" viewBox="0 0 24 24"> <path fill="currentColor" d="M12 5.69L17 10.19V18H15V12H9V18H7V10.19L12 5.69M12 3L2 12H5V20H11V14H13V20H19V12H22L12 3Z" /> </svg>
Jika ada pengaturan CSS untuk kode font awesomenya, silahkan bisa dihapus dan ganti dengan internal CSS untuk kode SVGnya. Ini juga berlaku jika anda hendak mengganti beberapa kode font awesome dalam satu elemen dengan kode SVG. Caranya yaitu dengan memisahkan script internal CSSnya, lihat cara pemasangan nomor dua di atas.
Sedangkan untuk mengganti kode font awesome yang dipasang dalam internal CSS, caranya memang sedikit ribet. Tapi secara teori bisa anda sesuaikan sebagaimana cara pemasangan nomor tiga di atas. Contoh lainnya seperti berikut ini:
#menutop label:after {content:"\f0c9";font-family:FontAwesome;
font-style:normal;font-weight:normal;...............
...............
......
}
Setelah diganti menggunakan ikon svg, maka hasilnya menjadi seperti berikut ini:
#menutop label:after {content:url("data:image/svg+xml,%3Csvg viewBox='7 -3 27 27' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3,6H21V8H3V6M3,11H21V13H3V11M3,16H21V18H3V16Z' fill='%23666'/%3E%3C/svg%3E");
}
Itulah sekilas tentang Ikon SVG dan cara mengganti font awesome dengan Ikon SVG agar loading Blog menjadi lebih ringan. Semoga bermanfaat.
Labels:
Blogging
Thanks for reading Mengganti Font Awesome dengan Ikon SVG Agar Loading Blog Lebih Ringan. Please share...!
weh keren bang tak coba dulu
BalasHapusyang terakhir itu cara convertnya gimana gan? itu ascci code ya. terus kalau bisa kasih contoh pengaturan ukurannya gan
BalasHapusSoalan nomer tiga memang agak ribet bang, coba aja utak atik seperti yg saya contohkan di atas. Yang ditulis warna merah silahkan ganti dengan kode dari icon svgnya, yang warna biru untuk warna iconnya, yg lain biarkan dulu saja. Untuk ukurannya bisa diganti pada viewBox="0 0 24 24". Coba saja ganti angka-angka tersebut, di contoh paling bawah juga sudah saya kasih contohnya.
HapusPahami juga kode background-image:url("data:image... dan content:url("data:image... biasanya yg bikin bingung disitu. Coba aja utak atik sendiri nanti ketemu.
ribet banget ternyata :v... tapi btw makasih bang
BalasHapusSebenarnya paling ribet cara nomer tiga, pengaturannya agak membingungkan, tapi sama-sama gan. Terima kasih kunjungannya.
Hapus