Font Awesome Bikin Loading Blog Lambat? Icon SVG Solusinya!

Font Awesome adalah font khusus untuk menampilkan icon di blog. Font Awesome ini sering di gunakan untuk mempercantik tampilan menu atau tombol. Jadi kita tidak perlu menggunakan gambar dengan format .png / .jpg / .gif jika hanya ingin pasang icon. Cukup sisipkan Font Awesome dan semua bisa teratasi. Berikut contoh icon penggunaan font awesome di blog Saifullah.id, saya lingkari warna merah.

 1. Kelebihan dan Kekurangan Font Awesome

😍 Kelebihan

Mudah dikerjakan. Kita hanya perlu memasukkan satu javascript pemanggil dan meletakkan kode pendek di tempat yang diperlukan saja tanpa harus ribet mengedit tinggi rendah besar kecil iconnya. Selain itu banyak pilihan icon yang tersedia sehingga tampilan blog kalian jadi lebih bervariasi

😭 Kekurangan

Membuat loading blog menjadi lambat. Script yang kita masukkan tadi menjadi beban karena merupakan script eksternal yang membutuhan waktu delay saat melakukan pemanggilan.

Parahnya  lagi pengguna platform Blogger tidak bisa mengatur cache dan expire header jadi mau tidak mau kita harus mengganti penggunaan font ini dengan alternatif lain.

Walaupun lama loading tidak begitu drastis menjadi sangat lama, namun tetap saja menurunkan speed score (nilai kecepatan) pada kecepatan halaman di Google Page Speed, GTMetrix, Pingdom, dll.

2. Media Pembuat Icon Selain Font Awesome

Sebetulnya tidak hanya Font Awesome yang bisa menampilkan icon di blog, ada juga yang bernama Font Material dan juga Icon SVG. Tapi sayang, Font Material memiliki prinsip yang sama seperti Font Awesome, yaitu memanggil script eksternal, jadi kalau kita pakai itu juga berarti sama saja masalahnya.

3. Solusi Terbaik Pengganti Font Awesome

Alternatif pengganti Font Awesome yang paling recommended adalah Icon SVG (Scalable Vector Graphics). Icon SVG merupakan bahasa markup layaknya kode CSS / HTML biasa yang sudah mendukung di semua browser dan sanggup menampilkan icon atau gambar.

Icon SVG menjadi solusi tepat pengganti Font Awesome karena jenis icon yang satu ini tidak perlu memanggil script dari luar / script eksternal. Pilihan iconnya juga cukup lengkap untuk kebutuhan di dunia blogging.

4. Cara Mendapatkan Icon SVG

Untuk mendapatkan icon SVG ada beberapa langkah yang harus dilakukan:

1. Kunjungi alamat website berikut https://materialdesignicons.com
2. Klik salah satu icon yang kalian inginkan
   
3. Lalu kli icon < / >  dan pilih "View SVG'
   
4. Kode untuk menampilkan icon di blog akan muncul seperti ini
   

5. Cara Pasang Icon SVG

Ada 3 cara memasang Icon SVG di blog, tinggal kalian pilih cara yang menurut kalian cocok dan mudah. Berikut cara memasang Icon SVG:

1. Langsung Pasang Seperti HTML
Cara ini terbilang sangat mudah, karena kita cuma perlu copy paste kode dari website Material Design Icons ke dalam template blog kita. Contoh kodenya seperti ini:


<svg style="width:24px;height:24px" viewBox="0 0 24 24">
<path fill="#000000" d="M17,18C15.89,18 15,18.89 15,20A2,2 0 0,0 17,22A2,2 0 0,0 19,20C19,18.89 18.1,18 17,18M1,2V4H3L6.6,11.59L5.24,14.04C5.09,14.32 5,14.65 5,15A2,2 0 0,0 7,17H19V15H7.42A0.25,0.25 0 0,1 7.17,14.75C7.17,14.7 7.18,14.66 7.2,14.63L8.1,13H15.55C16.3,13 16.96,12.58 17.3,11.97L20.88,5.5C20.95,5.34 21,5.17 21,5A1,1 0 0,0 20,4H5.21L4.27,2M7,18C5.89,18 5,18.89 5,20A2,2 0 0,0 7,22A2,2 0 0,0 9,20C9,18.89 8.1,18 7,18Z" />
</svg>


Letakkan kode itu dimanapun yang kita mau. Untuk bagian yang di highlight sesuaikan dengan keinginan.

Keterangan:
width:24px;height:24px : Lebar dan Tinggi icon
#000000 : Warna icon


2. Menggunakan Internal CSS dan HTML
Cara ini lebih baik daripada cara sebelumnya karena style diletakkan di internal CSS. Mengapa lebih baik? Karena penggunaan style yang berulang dan banyak di halaman HTML juga mempengaruhi kecepatan loading. Oleh sebab itu sebaiknya style-nya di pisah dan di masukkan ke CSS.

Caranya, hapus kode style="width:24px;height:24px" dan fill="#000000" lalu tambahkan kode di CSS seperti ini tepat di atas ]]></b:skin>






.svg {width:24px; height:24px}
.svg path {fill:#000000} 

Untuk HTML-nya jadi berubah seperti ini (sudah tidak ada kode style & fill-nya):

<svg viewBox="0 0 24 24"> <path d="M17,18C15.89,18 15,18.89 15,20A2,2 0 0,0 17,22A2,2 0 0,0 19,20C19,18.89 18.1,18 17,18M1,2V4H3L6.6,11.59L5.24,14.04C5.09,14.32 5,14.65 5,15A2,2 0 0,0 7,17H19V15H7.42A0.25,0.25 0 0,1 7.17,14.75C7.17,14.7 7.18,14.66 7.2,14.63L8.1,13H15.55C16.3,13 16.96,12.58 17.3,11.97L20.88,5.5C20.95,5.34 21,5.17 21,5A1,1 0 0,0 20,4H5.21L4.27,2M7,18C5.89,18 5,18.89 5,20A2,2 0 0,0 7,22A2,2 0 0,0 9,20C9,18.89 8.1,18 7,18Z" />
</svg>


3. Sebagai Internal CSS
Mengetahui cara pasang icon SVG di internal CSS sangat penting buat kita jika kita ingin membuat icon sebagai background image atau konten dari pseudo-element :before atau :after

#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:
Warna Hijau: wajib kalian tulis sama persis
Warna Kuning: kalian ganti dengan kode icon SVG kalian

Meskipun penggunaan icon SVG agak ribet, namun sangat baik untuk mempercepat loading blog tanpa menghilangkan efek estetika / keindahan tampilannya. Saya sendiri lebih suka menggunakan icon SVG untuk membuat icon di blog saya.