Mengganti Ikon Navigasi Blogger

Ikon Navigasi default Blogger

Ikon navigasi yang ada pada template bawaan blogger antara lain terdapat pada elemen:

1. Hamburger menu
2. Tombol pencarian
3. Tombol kembali / Back
4. Tombol Share

Lokasi ikon dalam template

Nama class ikon SVG dalam template HTML Blogger
<svg class='svg-icon-24'>
Untuk menemukan lokasi tepatnya dalam template HTML,
ketik nama class tersebut menggunakan pencarian, tekan Ctrl + F lalu ketik svg-icon-24 lalu Enter
Contoh elemen dalam template :

<svg class="svg-icon-24">
<use xlink:href="/responsive/sprite_v1_6.css.svg#ic_arrow_back_black_24dp" xmlns:xlink="http://www.w3.org/1999/xlink">
</use>
</svg>

Untuk mengganti ikon, hapus seluruh tag svg tersebut lalu pilih salah satu Jenis ikon yang diinginkan, copy kodenya lalu pastekan di lokasi ikon yang dihapus tersebut.

Beri class yang sama pada ikon pengganti yang sudah dipaste agar mendapatkan ukuran dimensi dan gaya yang sama dengan ikon sebelumnya.

Misal ikon sebelumnya tanda panah / Back , lalu diganti dengan ikon Home , agar gaya dan ukuran tetap seperti semula berikan class='svg-icon-24' pada tag svg home tersebut.

Contoh penambahan class:

<svg style="width:24px;height:24px" viewBox="0 0 24 24">
<path fill="currentColor" d="M10,20V14H14V20H19V12H22L12,3L2,12H5V20H10Z" />
</svg>

Menjadi:

<svg class='svg-icon-24' style="width:24px;height:24px" viewBox="0 0 24 24">
<path fill="currentColor" d="M10,20V14H14V20H19V12H22L12,3L2,12H5V20H10Z" />
</svg>

Pilihan jenis ikon pengganti

Intro

Ada beberapa pilihan atau jenis ikon yang bisa digunakan untuk mengganti ikon tersebut.

Antara lain :

1. Symbol HTML (ringan, pilihan ikon terbatas)
2. Ikon Font Icons (sedang, banyak pilihan)
3. Ikon SVG (ringan, variatif)
4. Ikon image (.jpg / .png) (ribet)

Namun diantara jenis ikon diatas yang paling mudah dan populer adalah menyesuaikan jenis ikon aslinya yaitu SVG atau menggantinya dengan Font Icon, seperti Font Awesome atau Material Icons dari Google.

Menggunakan Ikon SVG

SVG

Penyematan SVG - Font Awesome 6 langsung tanpa script / link.

Ikon Menu Hamburger Font Awesome 6 :

<svg style="width:24px;height:24px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
<!--! Font Awesome Pro 6.1.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. -->
<path d="M0 96C0 78.33 14.33 64 32 64H416C433.7 64 448 78.33 448 96C448 113.7 433.7 128 416 128H32C14.33 128 0 113.7 0 96zM0 256C0 238.3 14.33 224 32 224H416C433.7 224 448 238.3 448 256C448 273.7 433.7 288 416 288H32C14.33 288 0 273.7 0 256zM416 448H32C14.33 448 0 433.7 0 416C0 398.3 14.33 384 32 384H416C433.7 384 448 398.3 448 416C448 433.7 433.7 448 416 448z"/>
</svg>

Ikon Home Font Awesome 6 :

<svg style="width:24px;height:24px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512">
<!--! Font Awesome Pro 6.1.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. -->
<path d="M575.8 255.5C575.8 273.5 560.8 287.6 543.8 287.6H511.8L512.5 447.7C512.5 450.5 512.3 453.1 512 455.8V472C512 494.1 494.1 512 472 512H456C454.9 512 453.8 511.1 452.7 511.9C451.3 511.1 449.9 512 448.5 512H392C369.9 512 352 494.1 352 472V384C352 366.3 337.7 352 320 352H256C238.3 352 224 366.3 224 384V472C224 494.1 206.1 512 184 512H128.1C126.6 512 125.1 511.9 123.6 511.8C122.4 511.9 121.2 512 120 512H104C81.91 512 64 494.1 64 472V360C64 359.1 64.03 358.1 64.09 357.2V287.6H32.05C14.02 287.6 0 273.5 0 255.5C0 246.5 3.004 238.5 10.01 231.5L266.4 8.016C273.4 1.002 281.4 0 288.4 0C295.4 0 303.4 2.004 309.5 7.014L564.8 231.5C572.8 238.5 576.9 246.5 575.8 255.5L575.8 255.5z"/>
</svg>

Ikon Back SVG Font Awesome 6:

<svg style="width:24px;height:24px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
<!--! Font Awesome Pro 6.1.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. -->
<path d="M447.1 256C447.1 273.7 433.7 288 416 288H109.3l105.4 105.4c12.5 12.5 12.5 32.75 0 45.25C208.4 444.9 200.2 448 192 448s-16.38-3.125-22.62-9.375l-160-160c-12.5-12.5-12.5-32.75 0-45.25l160-160c12.5-12.5 32.75-12.5 45.25 0s12.5 32.75 0 45.25L109.3 224H416C433.7 224 447.1 238.3 447.1 256z"/>
</svg>

Ikon Back SVG Font Awesome 6 (circle arrow left):

<svg style="width:24px;height:24px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
<!--! Font Awesome Pro 6.1.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. -->
<path d="M256 0C114.6 0 0 114.6 0 256c0 141.4 114.6 256 256 256s256-114.6 256-256C512 114.6 397.4 0 256 0zM384 288H205.3l49.38 49.38c12.5 12.5 12.5 32.75 0 45.25s-32.75 12.5-45.25 0L105.4 278.6C97.4 270.7 96 260.9 96 256c0-4.883 1.391-14.66 9.398-22.65l103.1-103.1c12.5-12.5 32.75-12.5 45.25 0s12.5 32.75 0 45.25L205.3 224H384c17.69 0 32 14.33 32 32S401.7 288 384 288z"/>
</svg>

Ikon Share Font Awesome 6 :

<svg style="width:24px;height:24px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
<!--! Font Awesome Pro 6.1.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. -->
<path d="M448 127.1C448 181 405 223.1 352 223.1C326.1 223.1 302.6 213.8 285.4 197.1L191.3 244.1C191.8 248 191.1 251.1 191.1 256C191.1 260 191.8 263.1 191.3 267.9L285.4 314.9C302.6 298.2 326.1 288 352 288C405 288 448 330.1 448 384C448 437 405 480 352 480C298.1 480 256 437 256 384C256 379.1 256.2 376 256.7 372.1L162.6 325.1C145.4 341.8 121.9 352 96 352C42.98 352 0 309 0 256C0 202.1 42.98 160 96 160C121.9 160 145.4 170.2 162.6 186.9L256.7 139.9C256.2 135.1 256 132 256 128C256 74.98 298.1 32 352 32C405 32 448 74.98 448 128L448 127.1zM95.1 287.1C113.7 287.1 127.1 273.7 127.1 255.1C127.1 238.3 113.7 223.1 95.1 223.1C78.33 223.1 63.1 238.3 63.1 255.1C63.1 273.7 78.33 287.1 95.1 287.1zM352 95.1C334.3 95.1 320 110.3 320 127.1C320 145.7 334.3 159.1 352 159.1C369.7 159.1 384 145.7 384 127.1C384 110.3 369.7 95.1 352 95.1zM352 416C369.7 416 384 401.7 384 384C384 366.3 369.7 352 352 352C334.3 352 320 366.3 320 384C320 401.7 334.3 416 352 416z"/>
</svg>

• Penyedia ikon SVG salah satunya adalah Font Awesome yang saat ini mencapai versi 6.
• Kelebihannya jenis ikon bervariasi
• Kekurangannya adalah penulisan tag path-nya yang cukup panjang.
• Terbatas hanya untuk jenis FREE untuk gratisan.
• Style yang bertanda kuning ditambahkan manual, jadi jika menempatkan kodenya tanpa penambahan style / CSS ikonnya akan ditampilkan sangat besar dihalaman.
• Terdapat tag <!--comment--> yang menambah panjang penulisan tag. (bisa dihapus)
• Jika ingin menggunakan versi ini, disarankan menggunakan metode web Font Icon agar lebih simpel cara penyematannya.

SVG alternatif dari Material Design Icons

Kelebihan SVG dari MDI dibandingkan dengan SVG Font Awesome 6 :

1. Free - Gratisan
2. Penulisan kode / tag path lebih simple / pendek.
3. Dalam tag sudah terdapat style dimensi ikon.
4. Bisa disematkan menggunakan metode Font Icon namun akan tetap dirender sebagai SVG

MDI

Penyematan SVG langsung

Ikon Home :

<svg style="width:24px;height:24px" viewBox="0 0 24 24"> <path fill="currentColor" d="M10,20V14H14V20H19V12H22L12,3L2,12H5V20H10Z" /> </svg>

Ikon Home (Home circle) :

<svg style="width:24px;height:24px" viewBox="0 0 24 24">
<path fill="currentColor" d="M19.07,4.93C17.22,3 14.66,1.96 12,2C9.34,1.96 6.79,3 4.94,4.93C3,6.78 1.96,9.34 2,12C1.96,14.66 3,17.21 4.93,19.06C6.78,21 9.34,22.04 12,22C14.66,22.04 17.21,21 19.06,19.07C21,17.22 22.04,14.66 22,12C22.04,9.34 21,6.78 19.07,4.93M17,12V18H13.5V13H10.5V18H7V12H5L12,5L19.5,12H17Z" />
</svg>

Ikon Home (Home circle outlined) :

<svg style="width:24px;height:24px" viewBox="0 0 24 24">
<path fill="currentColor" d="M12 20C7.6 20 4 16.4 4 12S7.6 4 12 4 20 7.6 20 12 16.4 20 12 20M12 2C6.5 2 2 6.5 2 12S6.5 22 12 22 22 17.5 22 12 17.5 2 12 2M11 14H13V17H16V12H18L12 7L6 12H8V17H11V14" />
</svg>

Ikon Back (Arrow left) :

<svg style="width:24px;height:24px" viewBox="0 0 24 24">
<path fill="currentColor" d="M20,11V13H8L13.5,18.5L12.08,19.92L4.16,12L12.08,4.08L13.5,5.5L8,11H20Z" />
</svg>

Ikon Back (Arrow left circle) :

<svg style="width:24px;height:24px" viewBox="0 0 24 24">
<path fill="currentColor" d="M2,12A10,10 0 0,1 12,2A10,10 0 0,1 22,12A10,10 0 0,1 12,22A10,10 0 0,1 2,12M18,11H10L13.5,7.5L12.08,6.08L6.16,12L12.08,17.92L13.5,16.5L10,13H18V11Z" />
</svg>

Ikon Back (Arrow left bold circle) :

<svg style="width:24px;height:24px" viewBox="0 0 24 24">
<path fill="currentColor" d="M22,12A10,10 0 0,1 12,22A10,10 0 0,1 2,12A10,10 0 0,1 12,2A10,10 0 0,1 22,12M7,12L12,17V14H16V10H12V7L7,12Z" />
</svg>

Ikon Back (Back burger) :

<svg style="width:24px;height:24px" viewBox="0 0 24 24">
<path fill="currentColor" d="M5,13L9,17L7.6,18.42L1.18,12L7.6,5.58L9,7L5,11H21V13H5M21,6V8H11V6H21M21,16V18H11V16H21Z" />
</svg>

Ikon Back (arrow left bold box) :

<svg style="width:24px;height:24px" viewBox="0 0 24 24">
<path fill="currentColor" d="M21,5V19A2,2 0 0,1 19,21H5A2,2 0 0,1 3,19V5A2,2 0 0,1 5,3H19A2,2 0 0,1 21,5M7,12L12,17V14H16V10H12V7L7,12Z" />
</svg>

Ikon Search (magnify) :

<svg style="width:24px;height:24px" viewBox="0 0 24 24">
<path fill="currentColor" d="M9.5,3A6.5,6.5 0 0,1 16,9.5C16,11.11 15.41,12.59 14.44,13.73L14.71,14H15.5L20.5,19L19,20.5L14,15.5V14.71L13.73,14.44C12.59,15.41 11.11,16 9.5,16A6.5,6.5 0 0,1 3,9.5A6.5,6.5 0 0,1 9.5,3M9.5,5C7,5 5,7 5,9.5C5,12 7,14 9.5,14C12,14 14,12 14,9.5C14,7 12,5 9.5,5Z" />
</svg>

Ikon Berbagi / Share :

<svg style="width:24px;height:24px" viewBox="0 0 24 24">
<path fill="currentColor" d="M18,16.08C17.24,16.08 16.56,16.38 16.04,16.85L8.91,12.7C8.96,12.47 9,12.24 9,12C9,11.76 8.96,11.53 8.91,11.3L15.96,7.19C16.5,7.69 17.21,8 18,8A3,3 0 0,0 21,5A3,3 0 0,0 18,2A3,3 0 0,0 15,5C15,5.24 15.04,5.47 15.09,5.7L8.04,9.81C7.5,9.31 6.79,9 6,9A3,3 0 0,0 3,12A3,3 0 0,0 6,15C6.79,15 7.5,14.69 8.04,14.19L15.16,18.34C15.11,18.55 15.08,18.77 15.08,19C15.08,20.61 16.39,21.91 18,21.91C19.61,21.91 20.92,20.61 20.92,19A2.92,2.92 0 0,0 18,16.08Z" />
</svg>

Mengganti Ikon Navigasi menggunakan Font Icons

Ikon pengganti alternatif lainnya bisa menggunakan Font Icons, dimana jenis ikon ini lebih berfariasi dan lebih simpel penulisan kodenya.

Meskipun metode penyematannya memerlukan link atau script agar ikon bisa dirender dan tampil sesuai harapan.
Jadi sebenarnya dari segi penyematan ikon, akan lebih mudah jika menggunakan SVG karena tidak memerlukan link ataupun script tambahan.
Tapi apabila memerlukan rekomendasi atau saran ikon, admin menyarankan menggunakan Font Awesome 6 Free.
Klik link Font Awesome 6 dibawah ini untuk melihat cara pemasangannya, sudah disertai hasil audit Pagespeed insight, lolos untuk sesi pengurangan CSS.

Alternatif Font Icons

1. Font Awesome 6
2. Google Material Icons
3. Material Design Icons
4. Glyphicon

Postingan terkait : Ikon SVG vs Percepatan loading Halaman