Cara Baru Menggunakan Fontawesome Tanpa Membuat Blog Jadi Berat

Sebelumnya, Galih dihadapkan dengan masalah Web atau Blog yang terasa berat saat memuat atau loading. Segala cara sudah dilakukan. Misalnya, menghilangkan Css dan Javascript Bundle bawaan Blogger, menampilkan Jquery langsung di pengaturan HTML, minify semua Css dan Javascript, tidak menggunakan font yang dihosting diluar Blogger, dan masih banyak lagi. (Cara Baru Menggunakan Fontawesome Tanpa Membuat Blog Jadi Berat)

Tapi, masih ada satu masalah. Yakni cara penggunaan FontAwesome. Jika kamu tahu, saya membutuhkan font tersebut untuk menampilkan icon untuk mempercantik tampilan Blog. Akan tetapi, saya tidak menggunakan semua font tersebut. Berhubung Galih belum mengetahui cara yang tepat, akhirnya Galih memuat semua kode CSS FontAwesome yang mengakibatkan waktu memuat atau loading Blog terasa berat atau lama.

Baru-baru ini, setelah browsing sana-sini di forum Stackoverflow, akhirnya Galih menemukan cara baru untuk menggunakan FontAwesome tanpa membuat Blog atau Web milikmu menjadi berat saat memuat.

Cara Baru Menggunakan Fontawesome Tanpa Membuat Blog Jadi Berat

Jika sebelumnya, kamu menggunakan FontAwesome dengan cara memanggil link CSS seperti berikut,

<link href ="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" type="text/css"/>

Diikuti dengan penggunaan kode  HTML <i class='fa fa-icon'></i> untuk memanggil icon tertentu. Cara tersebut sudah tidak berlaku lagi sekarang.

Cara yang benar adalah dengan mengambil kode file SVG nya saja. Dan file SVG tersebut bisa kamu dapatkan di situs resmi Fontawesome.

Car Mendapatkan File SVG untuk digunakan sebagai Icon

1. Pergilah ke situs resmi penyedia icon SVG. Disini saya menggunakan Svg icon milik Fontawesome.

2. Cari dan pilih icon yang ingin kamu gunakan.

3. Klik tombol unduh. Lihat gambar!

4. Buka file svg yang sudah diunduh, menggunakan Text Editor. Misalnya Notepad, Atom, Visual Code Studio, dan lain-lain. Sebagai contoh, disini saya menggunakan Atom.

Maka akan tampil kode html file svg tersebut.

5. Ganti tag svg menjadi tag symbol. Kemudian hapus semua atributnya, namun sisakan atribute viewBox. Jangan lupa tambahkan atribut ID.

<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="toggle-on" class="svg-inline--fa fa-toggle-on fa-w-18" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512">   <path fill="currentColor" d="M384 64H192C86 64 0 150 0 256s86 192 192 192h192c106 0 192-86 192-192S490 64 384 64zm0 320c-70.8 0-128-57.3-128-128 0-70.8 57.3-128 128-128 70.8 0 128 57.3 128 128 0 70.8-57.3 128-128 128z"></path> </svg>

6. Hasilnya akan jadi seperti berikut.

<symbol id="nama_bebas" viewBox="0 0 576 512">   <path fill="currentColor" d="M384 64H192C86 64 0 150 0 256s86 192 192 192h192c106 0 192-86 192-192S490 64 384 64zm0 320c-70.8 0-128-57.3-128-128 0-70.8 57.3-128 128-128 70.8 0 128 57.3 128 128 0 70.8-57.3 128-128 128z"></path> </symbol>

7.Sekarang saatnya masuk ke Blogger > Edit HTML > letakkan kode berikut ini diatas tag </body>.

<svg display="none" height="0" width="0" xmlns="http://www.w3.org/2000/svg">

<!-- Salin kode symbol seperti yang ada di langkah nomor 6 disini-->

</svg>

Cara Memanggil File SVG

Jika kamu sudah melakukan langkah-langkah dari nomor 1 sampai nomor 7 dengan benar, sekarang saat nya memanggil symbol svg yang sebelumnya sudah kita tambahkan diatas tag </body>.

Gunakan kode berikut ini untuk memanggil file Svg tersebut.

<svg height="20px" width="20px">
<use xlink:href="#nama_bebas"></use>
</svg>

Penjelasan

• Pada bagian atribut height dan width bisa kamu ubah sesuai keinginan.
• #nama_bebas adalah ID file Svg yang akan kamu panggil.

Kesimpulan

• Cara tersebut terbukti tidak akan memperlambat kecepatan memuat halaman web atau blog.
• Dengan melakukan pemanggilan icon svg, tampilan struktur html akan jauh lebih rapi dan mudah dibaca daripada kamu langsung menggunakan kode svg secara mentah-mentah.

Sekian.