Lompat ke konten Lompat ke sidebar Lompat ke footer

Icon SVG : Solusi Efektif Font Awesome Yang Lambat

svg icon pengganti font awesome

Ikon adalah bagian yang tidak bisa dipisahkan dari desain web, setidaknya 4 hingga 5 ikon yang terpasang dan jumlah tersebut bisa bertambah jika menyisipkan icon tombol bagikan, icon menu side bar , ikon footer dll.

Font awesome adalah salah satu font web yang menyediakan ikon. font awesome membuat perancangan icon menjadi mudah. Hampir semua jenis ikon tersedia.  font awesome mudah digunakan dan banyak sekali pilihan icon yang bisa digunakan. seperi namanya font awesome "mengagumkan"

Loading Font Awesome CSS Terlalu Lambat

Font Awesome adalah cara terbaik untuk menyediakan ikon untuk situs web. penerapannya juga cepat dan mudah dengan adanya font awesome menyisipkan icon dapat dilakukan dengan mudah misalkan saja untuk lambang amplop tinggal ketik "fa envelope" tanpa harus membuat kode yang panjang.

Namun, fontnya sendiri cukup besar dan lambat dimuat. lambat disini ketika melakukan tes kecepatan loading web blog di page speed insight google  ada tuliasan kurang lebih seperti ini "Hilangkan resource yang memblokir render, Resource memblokir first paint halaman. Sebaiknya kirim inline JS/CSS kritis dan tunda semua JS/gaya yang tidak kritis" dalam bahasa inggris "Eliminate render-blocking resources, Resources are blocking the first paint of your page. Consider delivering critical JS/CSS inline and deferring all non-critical JS/styles." dengan menyertakan ukuran dari font awesome dibawahnya.



oleh karenanya perlu Mencari solusi icon pengganti font awesome? itulah Icon SVG

Icon SVG : Solusi Efektif Font Awesome Yang Lambat

pada tahun 1999, World Wide Web Consortium (W3C) mengembangkan format gambar Scalable Vector Graphics (SVG) yang menggunakan XML (Extensible Markup Language) sebagai dasar untuk membentuk gambar vektor dua dimensi.

SVG dapat dicari, di-index, ditulis dengan bahasa pemograman dan dikompres. Karena berbasis XML, SVG dapat dibuat dan disunting dengan aplikasi teks apa saja.

Sejumlah peramban web populer seperti Mozilla Firefox, Internet Explorer, Google Chrome, Opera, dan Safari sudah mulai mendukung penggunakan format SVG.

penggunaan SVG mampu mengatasi lambatnya pemuatan penggunaan icon, ini bisa dijadikan solusi sebagai pengganti dari font awesome. menggunakan icon svg merupakan salah satu cara mengatasi loading blog yang berat

icon SVG bisa dijadikan  solusi pengganti font awsome yang membuat blog lambat dalam memuat icon.

  • Font Awesome css


kelebihan 
menyisipkan ikon dengan font awesome cepat dan mudah dengan misalkan saja untuk lambang amplop tinggal ketik "fa envelope" tanpa harus membuat kode yang panjang.

kekurangan
berat dimuat membuat loading blog menjadi lambat 

  • SVG (Scalable Vector Graphics)

kelebihan 
membuat loading blog menjadi cepat

kekurangan
menggunakan kode yang lebih panjang ringan dimuat 

Walaupun Memasang ikon SVG menggunakan kode yang panjang tetapi sebenarnya dapat dilakukan dengan mudah.

Cara Memasang Ikon SVG pada Blog

1. kunjungi website berikut https://icomoon.io/app/#/select
2. pilih tab selection kemudian pilih salah satu ikon yang mau dipasang, contoh disini ikon home

3. klik generate svg & more di bebelah kiri tab selection bawah 


4. atur ukuran dengan memasukkan angka ukuran sesuai pilihan
5. simpan kursor dibawah ikon, lalu klik get code
6. maka akan muncul tiga buah kode 1. HTML (SVG use) 2. Symbol definition 3. CSS

  • . HTML (SVG use)
kurang lebih seperti ini :


<svg class="icon icon-home3"><use xlink:href="#icon-home3"></use></svg>
  • . Symbol definition.
kurang lebih seperti ini :

<symbol id="icon-home3" viewBox="0 0 12 12"><path d="M12 7.125l-2.25-2.25v-3.375h-1.5v1.875l-2.25-2.25-6 6v0.375h1.5v3.75h3.75v-2.25h1.5v2.25h3.75v-3.75h1.5z"></path></symbol>

  • . CSS
kurang lebih seperti ini :


.icon {
  display: inline-block;
  width: 1em;  height: 1em;  stroke-width: 0;  stroke: currentColor;  fill: currentColor;}

7. copy satu persatu kode diatas, pastekan di notepad
8. copy kode Symbol definition  kemudian pastekan di tanda   HTML (SVG use)

<svg class="icon icon-home3"><use xlink:href="<symbol id="icon-home3" viewBox="0 0 12 12">
<path d="M12 7.125l-2.25-2.25v-3.375h-1.5v1.875l-2.25-2.25-6 6v0.375h1.5v3.75h3.75v-2.25h1.5v2.25h3.75v-3.75h1.5z"></path></symbol>icon-home3"></use></svg>

9. Pastekan Kode diatas (langkah 8) pada html ikon yang mau disimpan misalnya di footer, side nav dll.

10. cari kode  ]]</b:skin> , gunakan ctrl + f untuk mempermudah mencari  ]]</b:skin>
tempelkan kode CSS tersebut diatas (langkah 6) sebelum  kode ]]</b:skin>

bila kesulitan menemukan kode ]]</b:skin> . gunakan opsi lain menyimpan kode css diatas, yaitu lewat layout kemudian pilih theme designer, lalu di advanced pilih add css paste kode kemudian apply


11. save theme

demikianlah salah satu solusi daripada penggunaan font awesome, semoga bermanfaat

Posting Komentar untuk "Icon SVG : Solusi Efektif Font Awesome Yang Lambat"

data-ad-format="auto">
data-ad-format="auto">

Berlangganan via Email