Mempercepat Blog #1 - Icon SVG Sebagai Pengganti Font Awesome

Penggunaan Font Awesome pada blog udah jadi hal yang lumrah. Apa sih Font Awesome? Dia adalah font khusus yang berfungsi sebagai icon. Jadi kamu udah nggak perlu tuh pake gambar berekstensi .jpg / .png / .gif kalau mau pasang icon di blog. Cukup sisipkan Font Awesome didalamnya. Tapi, udah pasti ada plus minusnya dong dari penggunaan Font Awesome ini.

1. Kelebihan dan Kekurangan Font Awesome

Plus
Memperingan pekerjaan. Nggak perlu membuat icon satu-persatu dengan gambar. Jenis iconnya pun banyak. Jangan khawatir icon yang diperlukan nggak ada, soalnya banyak banget. Penggunaan icon bisa mempercantik layout blog lho.

Minus
Memperlambat loading blog. Loh kenapa? Karena untuk pake Font Awesome ini harus manggil script dulu. Pemanggilan script eksternal jadi salah satu point penting yang perlu dipertimbangkan. Terutama bagi pengguna platform Blogger yang nggak bisa ngatur cache dan expired header. Meskipun nggak memperlambat blog sebegitu drastis, tetep aja bakal nurunin score ketika ngecek page speed di GTMetrix, Google Page Speed Insight, dll kalau kamu nggak pinter-pinter ngakalin. Umumnya Font Awesome dipanggil dengan menuliskan script ini di HTML blog.

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

2. Icon SVG Ringan Sebagai Solusi Pengganti Font Awesome

Apa kamu tau, yang bisa menampilkan icon nggak cuma Font Awesome? Ya, ada! Mungkin kamu udah familiar sama Font Material yang sekarang mulai booming. Tapi itupun sama, harus manggil script eksternal lebih dulu.

Sebenernya ada satu jenis icon yang nggak perlu manggil script eksternal. Dia cuma perlu ditulis layaknya kode CSS / HTML biasa. Namanya adalah icon SVG atau Scalable Vector Graphics. Dia merupakan bahasa markup yang sanggup menampilkan icon atau gambar dan udah support di semua browser, baik itu desktop maupun mobile. Blog Igniel pun pake icon SVG.

3. Cara Mendapatkan Icon SVG

1. Pertama, kamu wajib kunjungi website Material Design Icon. Disana kamu bisa milih berbagai jenis icon SVG, yang nanti kodenya diambil untuk disimpan di blog.
   


2. Pilih salah satu, lalu klik icon </>, pilih "View SVG". Kemudian kode untuk menampilkan iconnya akan muncul.
   

4. Cara Pasang Icon SVG di Blog

Setelah kodenya didapatkan, trus gimana cara pakai icon SVG di blog ini? SVG bisa dipasang menggunakan 3 cara. Kamu pilih deh cara mana yang paling cocok.

4.1. Langsung Pasang Seperti HTML

Ini cara yang paling gampang karena tinggal paste kode dari websitenya ke blog. Pastikan kamu udah dapet kode icon SVG (caranya yang barusan diatas). Misalnya, kodenya adalah sbb:

<svg style="width:24px;height:24px" viewBox="0 0 24 24">
    <path fill="#000000" d="M16,13C15.71,13 15.38,13 15.03,13.05C16.19,13.89 17,15 17,16.5V19H23V16.5C23,14.17 18.33,13 16,13M8,13C5.67,13 1,14.17 1,16.5V19H15V16.5C15,14.17 10.33,13 8,13M8,11A3,3 0 0,0 11,8A3,3 0 0,0 8,5A3,3 0 0,0 5,8A3,3 0 0,0 8,11M16,11A3,3 0 0,0 19,8A3,3 0 0,0 16,5A3,3 0 0,0 13,8A3,3 0 0,0 16,11Z" />
</svg>

Tinggal simpan deh kode itu dimanapun kamu mau. Jangan lupa ganti tulisan yang di-highlight dan sesuaikan dengan keinginan.

1. width:24px;height:24px: Lebar dan tinggi icon.
2. #000000: Warna icon.

4.2. Pasang HTML dan Internal CSS

Ini cara yang lebih baik dari dibanding yang pertama karena ada pengaturan internal CSSnya. Hapus kode style="width:24px;height:24px" dan fill="#000000", lalu tambahkan di kode CSS.

HTML

<svg viewBox="0 0 24 24">
    <path d="M16,13C15.71,13 15.38,13 15.03,13.05C16.19,13.89 17,15 17,16.5V19H23V16.5C23,14.17 18.33,13 16,13M8,13C5.67,13 1,14.17 1,16.5V19H15V16.5C15,14.17 10.33,13 8,13M8,11A3,3 0 0,0 11,8A3,3 0 0,0 8,5A3,3 0 0,0 5,8A3,3 0 0,0 8,11M16,11A3,3 0 0,0 19,8A3,3 0 0,0 16,5A3,3 0 0,0 13,8A3,3 0 0,0 16,11Z" />
</svg>

CSS

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

PENTING: Harap pehatikan tempat menyimpan kodenya. Jika masih di dalam ruang lingkup turunan elemen lain, maka tambahkan kode CSSnya. Misalnya disimpan di dalam ruang lingkup div yang memiliki id profil seperti ini:

<div id="profil"><svg blablabla></svg></div>

Maka CSSnya harus seperti ini:

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

4.3. Sebagai Internal CSS

Ini kalau kamu mau langsung pake SVG di CSS. Misalnya sebagai background image atau sebagai konten dari pseudo-element :before atau :after. Ini cara favorit saya meskipun sedikit agak ribet.

#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;
}

PENTING: tulis kode SVG persis di tempat yang udah di-hightlight. Dengan catatan:

1. Simbol < diganti menjadi %3C
2. Simbol > diganti menjadi %3E
3. Simbol # diganti menjadi %23

Ini wajib agar pengaturan internal CSS bisa diterima dan akan tampil di semua browser. Kalau nggak diganti, biasanya nggak bakal muncul di Mozilla Firefox dan Internet Explorer.

Memang keliatan agak ribet dibanding Font Awesome yang memanggil kode lebih sedikit. Tapi dijamin ampuh buat mempercepat page speed. Saya pun sampe ketagihan pakai icon SVG di blog ini.

Baca Juga