Cara Menggunakan Icon SVG Sebagai Pengganti Font Awesome - Onet4u Tech
Dark
News Update
Loading...

Cara Menggunakan Icon SVG Sebagai Pengganti Font Awesome

Cara Menggunakan Icon SVG Sebagai Pengganti Font Awesome
Also Read
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.
Cara Menggunakan Icon SVG Sebagai Pengganti Font Awesome

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 Menggunakan Icon SVG Sebagai Pengganti Font Awesome

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

Cara Menggunakan Icon SVG Sebagai Pengganti Font Awesome

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

Cara Menggunakan Icon SVG Sebagai Pengganti Font Awesome

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.
DONATION Help give donations if the article feels useful. Donations will be used to extend the www.onet4u.com. domain. thanks.

RELATED POSTS

COMMENT

Load Comments

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel