Sebelumya saya sudah pernah menciptakan tutorial perihal penggunaan Fontawesome yang sangat berkhasiat untuk menambahkan Icon dalam penggunaan navigasi blog. Akan tetapi cara ini sedikit memberatkan kecepatan loading blog sebab kita harus memanggil script eksternal.
Nah kali ini ada cara yang lebih efesien yaitu dengan mengganti penggunaan Fontawesome dengan menerapkan Icon SVG untuk blog kamu.
Kelebihan Penggunaan Icon SVG dalam Blog
Icon SVG sangat ringan sebagai solusi pengganti Fontawesome. Saat ini jenis Icon SVG sedang booming untuk meringankan dan mengoptimasi kecepatan loading blog. Kaprikornus bagi kau yang sangat mempentingkan loading blog, penggunaan Icon SVG inilah jawabannya.Kamu sanggup ikuti langkah-langkah dibawah untuk penerapan Icon SVG dalam hidangan Navigasi blog.
Cara Mendapatkan Icon SVG
Untuk mendapat Icon SVG yang harus kau lakukan adalah1. Pertama kunjungi web material design
https://materialdesignicons.com/2. Pilih salah satu Icon yang kau inginkan gunakan fitur Search jikalau ingin Icon SVG yang spesifik.
3. Klik Icon Menu < / > lalu pilih View SVG.
Nah itu yaitu instruksi Icon SVG yang sanggup kita gunakan dalam blog, gampang bukan cara mendapat Icon SVG. Sekarang kita lanjut ke langkah penerapan.
Cara Penerapan Icon SVG Untuk Menu Navigasi Blog
1. Buka akun Blogger kau dan pilih Edit Tema.2. Cari instruksi ]]></b:skin> atau </style> dengan memakai Fungsi CTRL + F.
Lalu Salin instruksi dibawah ini sempurna DIATAS NYA.
.icosvg{vertical-align:-7px} Script diatas berkhasiat biar Icon SVG berada pada posisi yang pas.
3. Lalu ganti instruksi hidangan navigasi kalian dengan instruksi dibawah ini
<a href='Link-Anda' title='Nama-Menu'><svg class='icosvg' height='24' viewBox='0 0 24 24' width='24'><title>Nama-Manu</title><path d='M9,2V8H11V11H5C3.89,11 3,11.89 3,13V16H1V22H7V16H5V13H11V16H9V22H15V16H13V13H19V16H17V22H23V16H21V13C21,11.89 20.11,11 19,11H13V8H15V2H9Z' fill='#fff'/></svg><span> Nama-Manu</span></a> Keterangan
Link-Anda ganti dengan Link Menu Blog kamu.
Nama-Menu ganti dengan nama hidangan kamu.
height='24' yaitu besar nya Icon SVG
M9,2V8H1.........dst.........5V2H9Z yaitu instruksi Icon SVG yang kau dapatkan dari web material design icon.
Link-Anda ganti dengan Link Menu Blog kamu.
Nama-Menu ganti dengan nama hidangan kamu.
height='24' yaitu besar nya Icon SVG
M9,2V8H1.........dst.........5V2H9Z yaitu instruksi Icon SVG yang kau dapatkan dari web material design icon.
Bagaimana gampang kan penerapan Icon SVG ini. Jika kau masih merasa galau sanggup tinggalkan komentar dibawah ya.
Sumber https://gawarii.blogspot.com/
