Selamat berjumpa kembali dengan saya admin blog Nom Ifrod yang keren dikit tapi, semoga anda sehat selalu. Jika sebelumnya saya memposting tentang tentang mengganti icon svg untuk mempercepat loading blog. Kali ini saya akan sedikit mengulas lebih detail / rinci untuk mengubah semua icon blog dengan svg icon yang sebenarnya sudah dibahas oleh mas +Adhy Suryadi dalam postingannya.
Jika biasanya icon sebuah blog menggunakan font awesome yang masih harus me-load script js eksternal yang mungkin akan mengganggu loading blog pada koneksi lelet / lambat, apalagi pada akses mobile. Dengan menggantinya dengan icon svg, maka icon akan langsung muncul seperti halnya teks postingan, jadi sama sekali tidak mengganggu loading blog dan langsung muncul meski pada koneksi lambat / akses mobile.
Bagaimana, ingin mengubah icon blog anda dengan svg icon? mari simak pelajaran selanjutnya.
Pertama-tama kita harus menghapus script font awesome (anggap saja blog anda menggunakan font awesome) supaya bisa terlihat perubahannya nanti.
Kemudian kita harus menuju pada situs Material Design Icon lalu klik icon yang akan kita gunakan lalu pilih view SVG pada tombol </>. Kemudian simpan semua kode icon tersebut di notepad supaya tidak lebih mudah.
Selanjutnya kita akan mengganti icon font awesome melalui edit html, untuk lebih mudah pencarian semua icon font awesome, tekan Ctrl+F. Karena ada banyak icon, jadi kita ketik
<i class= saja. Kemudian tinggal kita ganti saja kode tersebut dengan kode yang kita simpan di notepad tadi sesuai dengan icon yang kita inginkan. Sebaiknya kode svg dibuat satu baris jangan ada enter.Biasanya kode pemanggil font awesome seperti ini;
<i class='fa fa-home'/>dan icon svg seperti ini;
<svg style="width:24px;height:24px" viewBox="0 0 24 24"><path fill="#000000" d="M10,20V14H14V20H19V12H22L12,3L2,12H5V20H10Z" /></svg>kita tinggal mengatur style dan fill-nya, tapi saya lebih suka membuat css style diluar icon supaya lebih leluasa mengeditnya sehingga menjadi seperti ini;
<svg viewBox="0 0 24 24"><path d="M10,20V14H14V20H19V12H22L12,3L2,12H5V20H10Z" /></svg>kemudian kita bisa mengatus css-nya seperti ini
.home svg {width:24px;height:24px;vertical-align:middle;}
.home svg path{fill:#444}Sebagai contoh saya praktekkan disini hasil editing icon breadcrumbs blog ini yang memiliki kode seperti ini;
<div class='breadcrumbs'>
<span itemscope='itemscope' itemtype='https://data-vocabulary.org/Breadcrumb'>
<a expr:href='data:blog.homepageUrl' itemprop='url' title='Home'>
<span itemprop='title'><i class='fa fa-home'/> Home&nbsp;</span></a></span>&nbsp;<i class='fa fa-tags'/>
<b:loop values='data:post.labels' var='label'>
<span itemscope='itemscope' itemtype='https://data-vocabulary.org/Breadcrumb'>
<a expr:href='data:label.url + "?max-results=6"' expr:title='data:label.name' itemprop='url'><span itemprop='title'><data:label.name/></span></a>
<b:if cond='data:label.isLast != "true"'> <i class='fa fa-angle-right'/>
</b:if></span>
</b:loop>
<i class='fa fa-angle-right'/> <span><data:post.title/></span>
</div>setelah kode yang ditandai diatas diganti dengan icon svg, secara keseluruhan menjadi seperti ini;
<div class='breadcrumbs'>
<span itemscope='itemscope' itemtype='https://data-vocabulary.org/Breadcrumb'>
<a expr:href='data:blog.homepageUrl' itemprop='url' title='Home'>
<span itemprop='title'>
<svg viewBox='0 0 24 24'><path d='M10,20V14H14V20H19V12H22L12,3L2,12H5V20H10Z'/></svg> Home&nbsp;</span></a></span>&nbsp;
<svg viewBox='0 0 24 24'><path d='M5.5,9A1.5,1.5 0 0,0 7,7.5A1.5,1.5 0 0,0 5.5,6A1.5,1.5 0 0,0 4,7.5A1.5,1.5 0 0,0 5.5,9M17.41,11.58C17.77,11.94 18,12.44 18,13C18,13.55 17.78,14.05 17.41,14.41L12.41,19.41C12.05,19.77 11.55,20 11,20C10.45,20 9.95,19.78 9.58,19.41L2.59,12.42C2.22,12.05 2,11.55 2,11V6C2,4.89 2.89,4 4,4H9C9.55,4 10.05,4.22 10.41,4.58L17.41,11.58M13.54,5.71L14.54,4.71L21.41,11.58C21.78,11.94 22,12.45 22,13C22,13.55 21.78,14.05 21.42,14.41L16.04,19.79L15.04,18.79L20.75,13L13.54,5.71Z'/></svg>
<b:loop values='data:post.labels' var='label'>
<span itemscope='itemscope' itemtype='https://data-vocabulary.org/Breadcrumb'>
<a expr:href='data:label.url + "?max-results=6"' expr:title='data:label.name' itemprop='url'><span itemprop='title'><data:label.name/></span></a><b:if cond='data:label.isLast != "true"'>
<svg viewBox='0 0 24 24'><path d='M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z'/></svg>
</b:if></span>
</b:loop>
<svg viewBox='0 0 24 24'><path d='M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z'/></svg>
<span><data:post.title/></span>
</div>maka css style untuk kode diatas seperti ini;
.breadcrumbs svg{width:16px;height:16px;vertical-align:middle;}
.breadcrumbs svg path{fill:#666}Saya rasa cukup demikian saja tentang Cara Mudah Mengubah Semua Icon Blog Dengan SVG Icon. Kode diatas hanya contoh saja, jadi silahkan sesuaikan dengan kode pada blog anda. Semoga bermanfaat dan selamat mencoba...
