Cara Menggunakan Icon SVG Sebagai Pengganti Font Awesome

Penggunaan Font Awesome sudah menjadi kebiasan bagi para blogger, Font Awesome berfungsi sebagai icon seperti gif ataupun png dan web icon dan Font Awesome senang di gunakan tetap Font Awesome memberi efek pada loding blog anda.

kelebihan  Font Awesome:

Mempunyai icon yang cukkup banyak.
Mampu membuat icon menjadi gif
Pemasangan icon yang cukup senang.

Kekurangan Font Awesome:

Akan menyebapkan blog anda loding lambat
Icon SVG ringan sebagai pengganti Font Awesome:
Svg juga mempunyai icon yang cukup banyak tetapi cara pemasanganya rumit bebrbanding Font Awsome.

Icon SVG ini tidak memerlukan javascript, anda hanya perlu memasang nya sama seperti css code.

Anda boleh mendapatkan kod html icon SVG di materialdesignicons.com Secara percuma, Dan di sini saya akan terangkan cara mendapatkan code HTML icon SVG. Lihat gambar berikut

Cara mendapatkan code html SVG, Click pada icon yang anda inginkan then akan kelihatan seperti gambar berikut :

Selanjutnya click simbol yang saya tandakan pada gambar di atas, dan click View SVG, dan anda akan mendapatkan code icon svg anda :

Cara memasang icon svg di blogger bagaimana ya?

Caranya cukup senang, setelah anda mendapatkan code icon svg anda boleh di passang terus ke dalam blogger anda seperti dalam css ataupun cuma di html.

<svg style="width:24px;height:24px" viewBox="0 0 24 24">
    <path fill="#000000" d="M12,2C6.47,2 2,6.5 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M15.6,8.34C16.67,8.34 17.53,9.2 17.53,10.27C17.53,11.34 16.67,12.2 15.6,12.2A1.93,1.93 0 0,1 13.67,10.27C13.66,9.2 14.53,8.34 15.6,8.34M9.6,6.76C10.9,6.76 11.96,7.82 11.96,9.12C11.96,10.42 10.9,11.5 9.6,11.5C8.3,11.5 7.24,10.42 7.24,9.12C7.24,7.81 8.29,6.76 9.6,6.76M9.6,15.89V19.64C7.2,18.89 5.3,17.04 4.46,14.68C5.5,13.56 8.13,13 9.6,13C10.13,13 10.8,13.07 11.5,13.21C9.86,14.08 9.6,15.23 9.6,15.89M12,20C11.72,20 11.46,20 11.2,19.96V15.89C11.2,14.47 14.14,13.76 15.6,13.76C16.67,13.76 18.5,14.15 19.44,14.91C18.27,17.88 15.38,20 12,20Z" />
</svg>

Lihat Pada code yang saya warnakan , code width:24px;height:24px Untuk menentukan size icon anda dan code fill="#000000" Akan menentukan warna icon anda, Anda boleh mengubahnya sesuai kemahuan anda.

SVG icon boleh di gunakan di dalam css seperti contoh css berikut

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

Lihat pada code yang saya warnakan, itulah code svg icon anda boleh mengubahnya sesuai icon anda.

Dan cara ke 2 utuk memasang icon svg seperti berikut:

<div id='cssmu'><svg style="width:24px;height:24px" viewBox="0 0 24 24">
    <path fill="#000000" d="M12,2C6.47,2 2,6.5 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M15.6,8.34C16.67,8.34 17.53,9.2 17.53,10.27C17.53,11.34 16.67,12.2 15.6,12.2A1.93,1.93 0 0,1 13.67,10.27C13.66,9.2 14.53,8.34 15.6,8.34M9.6,6.76C10.9,6.76 11.96,7.82 11.96,9.12C11.96,10.42 10.9,11.5 9.6,11.5C8.3,11.5 7.24,10.42 7.24,9.12C7.24,7.81 8.29,6.76 9.6,6.76M9.6,15.89V19.64C7.2,18.89 5.3,17.04 4.46,14.68C5.5,13.56 8.13,13 9.6,13C10.13,13 10.8,13.07 11.5,13.21C9.86,14.08 9.6,15.23 9.6,15.89M12,20C11.72,20 11.46,20 11.2,19.96V15.89C11.2,14.47 14.14,13.76 15.6,13.76C16.67,13.76 18.5,14.15 19.44,14.91C18.27,17.88 15.38,20 12,20Z" />
</svg> Onet4u</div>

Anda boleh mengantikan iconya sesuai code icon anda, Bagai mana? cara ini sedikit rumit berbanding cara pemasangan font Awsome kan , Tetapi svg icon ini lebih baik banding fa. Baiklah sampai di sini sahaja posting saya tentang cara penggunaan icon svg ini . wasalam dari saya.