Mempercepat Loading Blog Dengan Menggunakan Alternatif Font Awesome

Cara mudah mempercepat loading blog dengan menggunakan alternatif font awesome alias SVG. dijamin bisa membuat blog kalian lebih cepat
Muhammad Reza Fahlevi

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.

Pada hasil yang muncul. kalian klik ikon yang ingin kalian gunakan. sehingga muncul form baru seperti dibawah ini. lalu pilih opsi View SVG
Lalu akan muncul serangkaian kode. seperti gambar dibawah ini.
Sekarang kita akan masuk ke langkah pemasangan icon lewat kode yang sudah kita dapat diatas. Sebelum itu kalian tambahkan class style dibawah ini.
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

Tidak jauh berbeda seperti diatas kalian hanya perlu menambahkan kode icon sebelum tag yang akan kalian panggil contohnya seperti gambar dibawah ini. saya ingin menambahkan icon tepat sebelum tulisan BERANDA

<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>

Selesai.seharusnya icon sudah tampil. dan Web kalian akan lebih Hemat dalam Resource karena Icon ini hanya mengandalkan serangkaian Kode-kode untuk Membentuk sebuah gambar. dan tentunya script tersebut berada di Internal template kita jadi blog tidak perlu Memuat dari situs lain dan ini akan membuat blog kita jadi lebih cepat.

Muhammad Reza Fahlevi