Menggunakan Icon SVG Untuk Icon di Blogger

Menggunakan Icon SVG Sebagai Pengganti Font Awesome Untuk Icon Blog - Pada kesempatan kali ini Saya akan mencoba membagikan tutorial cara Menggunakan Icon SVG Sebagai Pengganti Font Awesome Untuk Icon Blog.

Icon SVG atau (Scalable Vector Graphics) adalah 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 memiliki ukuran file yang kecil dan terkompres dengan baik dan tetap tampil baik pada layar retina serta aman untuk di-zoom. Maka dari itu, kita gunakan Ikon SVG ini untuk ikon-ikon di blog agar blog kita semakin ringan. Karena icon SVG tidak perlu memanggil css style library seperti icon Font Awesome atau icon font lainya.

Nah, bagi Anda yang ingin menggunakan icon SVG untuk ikon-ikon di blog Anda, silahkan lakukan seperti di bawah ini.

Yang Pertama

Masuk pada link https://materialdesignicons.com lalu pilih icon yang ingin digunakan.

Kemudian silahkan klik pada ikon yang Anda pilih. Pilih toggle kode </> lalu pilih view SVG maka akan tampil kotak dengan kode seperti 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 kode SVG di atas di edit HTML. Misalkan kita akan menggunakan ikon "account" pada link profil kita seperti 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'>
                        <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 seperti 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 seperti ini

.post-author svg {
   width:24px;
   height:24px;
}

Kita bisa mengatur besar kecilnya ukuran ikonnya Dengan kode 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