Ganti Font Awesome Pakai Icon SVG Untuk Mempercepat Blog - Detail Program

Biasanya template yang kita gunakan untuk blog sudah dilengkapi beberapa icon yang mempercantik tampilan dan menu.

Namun, terkadang icon tersebut menggunakan font awesome  yang mengharuskan untuk memasang paket icon berformat css yang disediakan oleh font awesome, tentu saja ini akan memperlambat loading blog, karena menunggu paket icon termuat lebih dahulu.

SVG Sebagai Pengganti Font Awesome

Untuk mengatasinya masalah loading Font Awesome, dapat digantikan dengan icon svg, yaitu format gambar yang disimpan dalam bentuk xml, penggunaannya dapat diatur sendiri, karena dipasang satu per satu.

Tentu saja dapat mempercepat loading karena hanya memakai apa yang benar-benar dibutuhkan, tidak seperti font awesome dari banyak paket icon, hanya sedikit yang kita butuh kan untuk tampil.

Website Penyedia Icon SVG

Berikut website penyedia icon SVG : 

- Materialdesignicons.com 

Kamu pilih salah satu icon, lalu klik </>, lalu pilih "View SVG", kemudian akan muncul kode untuk menampilkan svg tersebut.

- Icons.getbootstrap.com

Pilih salah satu icon, saat dihalaman icon yang kamu pilih, akan ada kode svg dari icon tersebut.

- Uxwing.com

Pada Uxwing ini kamu harus mendownload file svgnya terlebih dahulu lalu membukanya menggunakan text editor atau pembuka file teks.

Cara Memasang Icon SVG

Pemasangan SVG bisa langsung pada halaman html, maupun dalam css.

1. Pasang Langsung dalam HTML

Cara ini sangat mudah, kamu tinggal copy kode dari icon SVG yang sudah kamu pilih, lalu paste pada bagian html yang ingin kamu tambahkan icon.

<svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-alarm-fill" fill="currentColor" xmlns="http://www.w3.org/2000/svg"> <path fill-rule="evenodd" d="M5.5.5A.5.5 0 0 1 6 0h4a.5.5 0 0 1 0 1H9v1.07a7.002 7.002 0 0 1 3.537 12.26l.817.816a.5.5 0 0 1-.708.708l-.924-.925A6.967 6.967 0 0 1 8 16a6.967 6.967 0 0 1-3.722-1.07l-.924.924a.5.5 0 0 1-.708-.708l.817-.816A7.002 7.002 0 0 1 7 2.07V1H5.999a.5.5 0 0 1-.5-.5zM.86 5.387A2.5 2.5 0 1 1 4.387 1.86 8.035 8.035 0 0 0 .86 5.387zM13.5 1c-.753 0-1.429.333-1.887.86a8.035 8.035 0 0 1 3.527 3.527A2.5 2.5 0 0 0 13.5 1zm-5 4a.5.5 0 0 0-1 0v3.882l-1.447 2.894a.5.5 0 1 0 .894.448l1.5-3A.5.5 0 0 0 8.5 9V5z"/> </svg>

Hasilnya :

2. Pasang dalam CSS

Untuk memasang dalam css biasanya dipasang untuk menjadi background tombol, misalnya saja back to top :

.backToTop {
visibility:hidden; box-shadow:1px 1px 3px #000; width:35px; height:35px; position:fixed; bottom:100px; right:50px; z-index:99; cursor:pointer; 
border-radius:100px; opacity:0; -webkit-transform:translateZ(0); transition:all .5s; 
border:4px solid $(fiksioner.main.color); 
background:#FF8 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 640 640' clip-rule='evenodd'%3E%3Cpath d='M60.816 484.116c-14.186 13.784-36.863 13.476-50.67-.709-13.796-14.173-13.489-36.874.697-50.67l285.38-276.736 24.981 25.69-25.028-25.796c14.268-13.807 37.005-13.453 50.812.78.413.413.803.826 1.181 1.263l280.988 274.8c14.185 13.795 14.492 36.496.697 50.67-13.784 14.185-36.485 14.492-50.67.708L321.098 231.723 60.815 484.116z' fill='%23fff'/%3E%3C/svg%3E") center / 35px no-repeat}
}

Untuk pemasangan dalam css, beberapa simbol harus di ubah terlebih dahulu, ubah dengan tool ini :

• 
  Konversi < menjadi %3C
• 
  Konversi > menjadi %3E
• 
  Konversi # menjadi %23

Memasang svg menang agak susah, apalagi pertama kali mencoba, bisa-bisa icon tidak muncul karena kesalahan pemasangan.

Namun, jika sudah dipahami, memasang svg akan sangat mudah, bisa untuk memperindah tampilan blog kamu tanpa banyak mempengaruhi kecepatan.

Cara Menghapus FontAwesome

1. Hapus script pemanggil paket font awesome dari template, cari dengan kata kunci "font-awesome" biasanya dengan akhir url .css jadi "font-awesome.min.css".

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

2. Hapus Semua Element font awesome, dengan nama class berawal "fa". Contoh : <i class="fa fa-alarm"/>
3. Ganti dengan icon SVG dengan cara di atas.

Artikel ini terinspirasi dari igniel.com karena dulu saya juga cukup kesulitan dan baru sekarang mulai memahami pemasangan svg.