Menggunakan Icon SVG Sebagai Pengganti Font Awesome Untuk Icon Blog - Sebelumnya Saya sudah mebagikan artikel Cara Membuat Ikon External Link memakai Ikon SVG Kali ini Saya akan mencoba membaikan tutorial cara Menggunakan Icon SVG Sebagai Pengganti Font Awesome Untuk Icon Blog.Icon SVG atau (Scalable Vector Graphics) yakni bahasa markup untuk menggambarkan aplikasi dua dimensi grafis dan gambar yang merupakan rekomendasi W3C dan didukung oleh semua browser modern untuk desktop dan ponsel.
SVG mempunyai ukuran file yang kecil dan terkompres dengan baik dan tetap tampil baik pada layar retina serta kondusif untuk di-zoom. Maka dari itu, kita gunakan Ikon SVG ini untuk ikon-ikon di blog biar blog kita semakin ringan. Karena icon SVG tidak perlu memanggil css style library ibarat icon Font Awesome atau icon font lainya.
Nah, bagi Anda yang ingin memakai icon SVG untuk ikon-ikon di blog Anda, silahkan lakukan ibarat di bawah ini.
Yang Pertama
Masuk pada link https://materialdesignicons.com kemudian pilih icon yang ingin digunakan.
Kemudian silahkan klik pada ikon yang Anda pilih. Pilih toggle kode </> kemudian pilih view SVG maka akan tampil kotak dengan instruksi ibarat di bawah ini, sebagai contoh.
<svg style="width:24px;height:24px" viewBox="0 0 24 24">
<path fill="#000000" d="M12,4A4,4 0 0,1 16,8A4,4 0 0,1 12,12A4,4 0 0,1 8,8A4,4 0 0,1 12,4M12,14C16.42,14 20,15.79 20,18V20H4V18C4,15.79 7.58,14 12,14Z" />
</svg>
Silahkan simpan instruksi SVG di atas di edit HTML. Misalkan kita akan memakai ikon "account" pada link profil kita ibarat di bawah ini
<span class='post-author vcard' itemprop='author' itemscope='itemscope' itemtype='https://schema.org/Person'>
<b:if cond='data:post.authorProfileUrl'>
<span class='fn author'>See Other Article
<a expr:href='data:post.authorProfileUrl' itemprop='url' rel='author' target='_blank' title='author profile'>
<span itemprop='name'><data:post.author/></span>
</a>
</span>
<b:else/>
<span class='fn author'><span itemprop='name'><data:post.author/></span></span>
</b:if>
</span>
Maka akan tampak ibarat di bawah ini
Agar gambar SVG ini tampil dengan posisi yang bagus, maka kita pindahkan inline style-nya
Kita dapat mengatur besar kecilnya ukuran ikonnya Dengan instruksi CSS di atas. Jika kita ingin mengganti warna pada ikon-nya, kita gunakan css berikut.
Nah, itulah cara Menggunakan Icon SVG Sebagai Pengganti Font Awesome Untuk Icon Blog
<span itemprop='name'><data:post.author/></span>
</a>
</span>
<b:else/>
<span class='fn author'><span itemprop='name'><data:post.author/></span></span>
</b:if>
</span>
Maka akan tampak ibarat di bawah ini
<span class='post-author vcard' itemprop='author' itemscope='itemscope' itemtype='https://schema.org/Person'>
<b:if cond='data:post.authorProfileUrl'>
<svg style="width:24px;height:24px" viewBox="0 0 24 24">
<path fill="#000000" d="M12,4A4,4 0 0,1 16,8A4,4 0 0,1 12,12A4,4 0 0,1 8,8A4,4 0 0,1 12,4M12,14C16.42,14 20,15.79 20,18V20H4V18C4,15.79 7.58,14 12,14Z" />
</svg>
<span class='fn author'>
<a expr:href='data:post.authorProfileUrl' itemprop='url' rel='author' target='_blank' title='author profile'>
<span itemprop='name'><data:post.author/></span>
</a>
</span>
<b:else/>
<span class='fn author'><span itemprop='name'><data:post.author/></span></span>
</b:if>
Agar gambar SVG ini tampil dengan posisi yang bagus, maka kita pindahkan inline style-nya
style="width:24px;height:24px" ke style CSS blog menjadi ibarat ini .post-author svg {
width:24px;
height:24px;
}
Kita dapat mengatur besar kecilnya ukuran ikonnya Dengan instruksi CSS di atas. Jika kita ingin mengganti warna pada ikon-nya, kita gunakan css berikut.
.post-author svg path {
fill: white;
}
Nah, itulah cara Menggunakan Icon SVG Sebagai Pengganti Font Awesome Untuk Icon Blog
Share this Article
