Jadi Akil Cara Gampang Mengubah Semua Icon Blog Dengan Svg Icon

Selamat berjumpa kembali dengan aku admin blog yang keren dikit tapi, biar anda sehat selalu. Jika sebelumnya aku memposting perihal tentang mengganti icon svg untuk mempercepat loading blog. Kali ini aku akan sedikit mengulas lebih detail / rinci untuk mengubah semua icon blog dengan svg icon yang bahwasanya sudah dibahas oleh mas +Adhy Suryadi dalam postingannya.

Jika biasanya icon sebuah blog memakai font awesome yang masih harus me-load script js eksternal yang mungkin akan mengganggu loading blog pada koneksi lelet / lambat, apalagi pada susukan mobile. Dengan menggantinya dengan icon svg, maka icon akan eksklusif muncul menyerupai halnya teks postingan, jadi sama sekali tidak mengganggu loading blog dan eksklusif muncul meski pada koneksi lambat / susukan 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 memakai font awesome) supaya dapat terlihat perubahannya nanti.

Kemudian kita harus menuju pada situs Material Design Icon kemudian klik icon yang akan kita gunakan kemudian pilih view SVG pada tombol </>. Kemudian simpan semua instruksi icon tersebut di notepad supaya tidak lebih mudah.

Selanjutnya kita akan mengganti icon font awesome melalui edit html, untuk lebih gampang pencarian semua icon font awesome, tekan Ctrl+F. Karena ada banyak icon, jadi kita ketik <i class= saja. Kemudian tinggal kita ganti saja instruksi tersebut dengan instruksi yang kita simpan di notepad tadi sesuai dengan icon yang kita inginkan. Sebaiknya instruksi svg dibentuk satu baris jangan ada enter.

Biasanya instruksi pemanggil font awesome menyerupai ini;

<i class='fa fa-home'/>

dan icon svg menyerupai 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 aku lebih suka menciptakan css style diluar icon supaya lebih leluasa mengeditnya sehingga menjadi menyerupai ini;

<svg viewBox="0 0 24 24"><path d="M10,20V14H14V20H19V12H22L12,3L2,12H5V20H10Z" /></svg>

kemudian kita dapat mengatus css-nya menyerupai ini

 .home svg {width:24px;height:24px;vertical-align:middle;}
 .home svg path{fill:#444}

Sebagai pola aku praktekkan disini hasil editing icon breadcrumbs blog ini yang mempunyai instruksi menyerupai 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&amp;nbsp;</span></a></span>&amp;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 + &quot;?max-results=6&quot;' expr:title='data:label.name' itemprop='url'><span itemprop='title'><data:label.name/></span></a>
 <b:if cond='data:label.isLast != &quot;true&quot;'> <i class='fa fa-angle-right'/>
 </b:if></span>
 </b:loop>
 <i class='fa fa-angle-right'/> <span><data:post.title/></span>
 </div>

sesudah instruksi yang ditandai diatas diganti dengan icon svg, secara keseluruhan menjadi menyerupai 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&amp;nbsp;</span></a></span>&amp;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 + &quot;?max-results=6&quot;' expr:title='data:label.name' itemprop='url'><span itemprop='title'><data:label.name/></span></a><b:if cond='data:label.isLast != &quot;true&quot;'>
 <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 instruksi diatas menyerupai ini;

.breadcrumbs svg{width:16px;height:16px;vertical-align:middle;}
 .breadcrumbs svg path{fill:#666}

Saya rasa cukup demikian saja perihal Cara Praktis Mengubah Semua Icon Blog Dengan SVG Icon. Kode diatas hanya pola saja, jadi silahkan sesuaikan dengan instruksi pada blog anda. Semoga bermanfaat dan selamat mencoba...