Mempercepat Loading Blog Dengan Menggunakan Alternatif Font Awesome
www.fahlevimikase.my.id - Font Awesome adalah sebuah framework yang memungkinkan kalian untuk menambahkan icon dengan hanya bermodalkan CSS. Banyak Web Developer yang menggunakan Font Awesome untuk mempermudah project Web mereka.
Disamping itu Font Awesome memiliki sedikit dampak Negatif untuk sebagian pengguna. khususnya bagi kalian Web Developer atau Admin Web yang mengedepankan Kecepatan Web atau Page Speed karena font awesome sendiri lumayan menambah beban untuk web kalian ketika sedang dimuat (render) Oleh Pengunjung.
Dipostingan kali ini penulis akan memberikan Solusi untuk itu. Yaitu dengan menggunakan Alternatif dari pada Font Awesome. adalah SVG (Scalable Vector Graphics) adalah sebuah vektor berbasis teks XML kebanyakan dari gambar yang kita temui di internet dikemas dalam format piksel berbeda halnya dengan SVG yang bergantung pada XML Markup untuk mengolah gambar.sehingga beban(size) yang dihasilkan akan sangat jauh berbeda dari keduanya.
Penjelasan lebih lengkapnya kalian bisa cari disumber lain. sekarang kita akan masuk ke langkah pembahasannya
Pertama kalian buka tautan berikut materialdesignicons.com lalu akan muncul serangkaian icon.atau kalian bisa menuliskan icon yang ingin kalian cari pada kolam pencarian yang telah disediakan. sebagai contoh saya ingin mencari icon yang bergambarkan. Kue. maka saya akan mengetikan cake. karena pedoman penamaannya berdasarkan bahasa inggris.
svg {width: 23px;
height: 23px;
vertical-align: -7px;
margin-right: 1px;
transition: all .3s ease;}
svg path {fill:#fff}
Penjelasan kode CSS diatas
Width untuk mengatur lebar icon sedangkan Height untuk mengatur tinggi icon. lalu Vertical Align untuk mengatur posisi Icon secara vertical. sedangkan Margin Right untuk memberi jarak antar icon lalu pada Fill untuk mengatur warna icon. kalian bisa sesuaikan lagi valuenya
Memasang di Navigasi Menu
Umumnya Elmen link pada Menu Navigasi adalah seperti berikut <li><a href='#'>BERANDA</a></li> kalian tinggal tambahkan kode svg yang sudah kita dapat sebelumnya. tepat sebelum Value BERANDA sehingga hasilnya akan seperti berikut.<li><a href='#'><svg viewBox="0 0 24 24">
<path fill="currentColor" d="M11.5,0.5C12,0.75 13,2.4 13,3.5C13,4.6 12.33,5 11.5,5C10.67,5 10,4.85 10,3.75C10,2.65 11,2 11.5,0.5M18.5,9C21,9 23,11 23,13.5C23,15.06 22.21,16.43 21,17.24V23H12L3,23V17.24C1.79,16.43 1,15.06 1,13.5C1,11 3,9 5.5,9H10V6H13V9H18.5M12,16A2.5,2.5 0 0,0 14.5,13.5H16A2.5,2.5 0 0,0 18.5,16A2.5,2.5 0 0,0 21,13.5A2.5,2.5 0 0,0 18.5,11H5.5A2.5,2.5 0 0,0 3,13.5A2.5,2.5 0 0,0 5.5,16A2.5,2.5 0 0,0 8,13.5H9.5A2.5,2.5 0 0,0 12,16Z" />
</svg>BERANDA</a></li>
Jangan lupa hapus tag style pada kode yang kita dapat di web Material Design Icons. karena kita sudah menambahkan CSS Internal. Memasang di HTML
<span><svg viewBox="0 0 24 24">
<path fill="currentColor" d="M11.5,0.5C12,0.75 13,2.4 13,3.5C13,4.6 12.33,5 11.5,5C10.67,5 10,4.85 10,3.75C10,2.65 11,2 11.5,0.5M18.5,9C21,9 23,11 23,13.5C23,15.06 22.21,16.43 21,17.24V23H12L3,23V17.24C1.79,16.43 1,15.06 1,13.5C1,11 3,9 5.5,9H10V6H13V9H18.5M12,16A2.5,2.5 0 0,0 14.5,13.5H16A2.5,2.5 0 0,0 18.5,16A2.5,2.5 0 0,0 21,13.5A2.5,2.5 0 0,0 18.5,11H5.5A2.5,2.5 0 0,0 3,13.5A2.5,2.5 0 0,0 5.5,16A2.5,2.5 0 0,0 8,13.5H9.5A2.5,2.5 0 0,0 12,16Z" />
</svg> BERANDA</span>