Cara Memasang Icon SVG Pengganti Icon Fontawesome via CDN

Keindahan menjadi pertimbangan saat membuat theme blogger sendiri dari nol. Tidak heran jika ada yang memanfaatkan Fontawesome, Bootstrap Icons maupun icon library lainnya. Karena dengan memanfaatkan icon-icon tersebut semakin memberi warna artistik.

Termasuk saya sendiri yang mengenal terlebih dahulu Fontawesome, Google Material Symbols dan Bootstrap Icons. Kehadirannya, tidak hanya tentang ketersediaan icon-icon yang menarik. Melainkan kesederhanaan penggunaannyalah yang mendorong banyak orang untuk mencoba.

Namun seiring waktu tibalah saatnya memperhatikan kecepatan blog berdasarkan theme blogger sendiri. Maka, Google PageSpeed Insight menjadi salah satu tool untuk menguji kualitas theme yang dibuat. Hingga akhirnya saya dapati link eksternal yang mengarah ke sana spertinya sedikit membebani.

Oleh karena itu saya berupaya mencari alternatif untuk menggantikan icon yang tertera pada situs yang dibuat dengan pustaka Fontawesome, Bootstrap Icons dan library Icon lainnya melalui tag meta. Yaitu sebuah script meta tag yang mengarah ke server CDN (Content Delivery Network) penyedia icon.

Cara Mendapatkan Kode Icon SVG Pengganti Icon Fontawesome via CDN

Sebelum memasuki tahapan memasang icon SVG perlu diketahui dahulu yaitu kode masing-masing icon tersebut. Kode inilah yang nantinya bisa disisipkan ke dalam baris kode HTML dalam theme blogger Anda yang dibuat sendiri dari nol.

Berikut contoh penggunaanya yang saya bagi ke dalam 2 (dua) bagian; yaitu Icon dari Google dan yang kedua dari Fontawesome. Dan cara ini termasuk yang paling mudah yang saya pilih jika dibandingkan dengan metode lainnya yang tersedia.

Cara Mendapatkan Kode Icon SVG di Material Symbols and Icons

Google tidak hanya dikenal sebagai mesin pencari dan penyedia layanan email gratis saja. Bagi seorang blogger, situs raksasa pencarian itu memiliki segudang layanan yang menunjang profesi kita. Salah satunya juga menyediakan webfont serta icon-icon layaknya Fontawesome, begini caranya:

1. Kunjungi Material Symbols and Icons milik Google.

2. Pilih salah satu icon yang dibutuhkan.

3. Download versi SVG.

4. Buka hasil download berupa file .SVG dengan software text editor sesuai sistem operasi yang Anda gunakan. Untuk pengguna Windows yaitu Notepad sedangkan contoh di bawah menggunakan Linux. Peringatan! File SVG meskipun merupakan format gambar, dalam hal ini jangan membukanya dengan Adobe Photoshop, CorelDRAW atau semisalnya. Karena yang kita butuhkan adalah kode dari gambar.

5. Pilih semua kode tersebut dan klik "Copy". Inilah kode icon yang akan kita pasang di template blogger nanti di tahap selanjutnya.

Cara Mendapatkan Kode Icon SVG di Fontawesome

Selain itu, Fontawesome termasuk salah satu website penyedia layanan icon gratis dan berbayar yang terkenal. Koleksi icon yang tersedia sangatlah banyak dan bisa kita manfaatkan untuk penggunaan website. Sebelumnya saya juga termasuk yang menggunakan icon ini melalui layanan server CDN.

Dengan menempatkan script meta tag tersebut di bagian head maka otomatis link eksternal akan memanggil seluruh icon untuk dipersiapkan pada penggunaan blog. Hal ini tentu saja bisa membebani bagi kita yang hanya numpang hosting gratis dengan spesifikasi yang sudah disediakan dari sononya.

Oleh karena itu, berikut ini alternatif lainnya menggunakan icon yang diperlukan dari Fontawesome. Langkah awal sebagaimana telah dicontohkan di atas yaitu bagaimana cara mendapatkan kode SVG dari icon yang terkait.

1. Kunjungi website Fontawesome.

2. Pilih icon yang ingin ditampilkan di website.

3. Klik tab "SVG".

4. Klik pada area kode tersebut yang diawali tag <svg untuk meng"Copy".

Cara Memasang Icon SVG Pengganti Icon Fontawesome via CDN

Setelah berhasil mendapatkan kode dari icon yang ingin kita pasang. Langkah selanjutnya adalah menempatkan kode tersebut ke dalam template blogger kita yang dibuat dari nol. Agar lebih mudah memahaminya kali ini akan menggunakan baris kode menu navigasi Sebardi Blog.

Bagi yang belum mendapatkannya silahkan kunjungi tautan berikut yang berisi link download theme blogger Sebardi Blog. Dan bagi teman-teman yang sudah mengunduhnya serta memasangnya pada blog dummy. Silahkan ikuti cara memasang icon SVG pengganti icon Fontawesome via CDN berikut.

1. Login ke dashboard Blogger.

2. Gunakan blog khusus untuk mempelajari kode dengan template Sebardi Blog.

3. Klik "Tema" atau "Theme".

4. Klik icon "▼" di sebelah tulisan SESUAIKAN.

5. Klik "Edit HTML".

6. Perhatikan baris kode menu navigasi yang terlihat sebagai berikut.

<div class='container'> <nav aria-label='Third navbar example' class='navbar navbar-expand-lg bg-primary bg-gradient py-0'> <button aria-controls='navbarsExample03' aria-expanded='false' aria-label='Toggle navigation' class='navbar-toggler' data-bs-target='#navbarsExample03' data-bs-toggle='collapse' type='button'> <span class='navbar-toggler-icon'/> </button> <div class='collapse navbar-collapse' id='navbarsExample03'> <ul class='navbar-nav ms-2 me-auto mb-2 mb-sm-0 judul-menu-kedua'> <li class='nav-item'><a class='nav-link text-black' href='https://www.sebardi.id/'><i class='bi bi-house-door-fill'/> Home</a></li> <li class='nav-item dropdown'><a aria-expanded='false' aria-haspopup='true' class='nav-link dropdown-toggle text-black' data-toggle='dropdown' href='#' id='navbarDropdownMenuLink1'><i class='bi bi-window-fullscreen'/> Apps</a> <ul aria-labelledby='navbarDropdownMenuLink1' class='dropdown-menu bg-primary'> <li class='dropdown-submenu'><a class='dropdown-item dropdown-toggle' href='#'> Edukasi</a> <ul class='dropdown-menu bg-primary'> <li><a class='dropdown-item' href='https://www.sebardi.id/search/label/GIMP'> GCompris</a></li> </ul> </li> <li class='dropdown-submenu'><a class='dropdown-item dropdown-toggle' href='#'> Grafis</a> <ul class='dropdown-menu bg-primary'> <li><a class='dropdown-item' href='https://www.sebardi.id/search/label/GIMP'> GIMP</a></li> <li><a class='dropdown-item' href='https://www.sebardi.id/search/label/inkscape'> Inkscape</a></li> <li><a class='dropdown-item' href='https://www.sebardi.id/search/label/Krita'> Krita</a></li> </ul> </li> <li class='dropdown-submenu'><a class='dropdown-item dropdown-toggle' href='#'> Office</a> <ul class='dropdown-menu bg-primary'> <li><a class='dropdown-item' href='https://www.sebardi.id/search/label/LibreOffice'> Libre Office</a></li> <li><a class='dropdown-item' href='https://www.sebardi.id/search/label/Ms.Office'> Microsoft Office</a></li> <li><a class='dropdown-item' href='https://www.sebardi.id/search/label/OpenOffice'> Open Office</a></li> </ul> </li> </ul> </li> <li class='nav-item'><a class='nav-link text-black' href='https://www.sebardi.id/p/sitemap.html'><i class='bi bi-list-columns-reverse'/> Daftar Isi</a></li> <li class='nav-item dropdown'><a aria-expanded='false' aria-haspopup='true' class='nav-link dropdown-toggle text-black' data-toggle='dropdown' href='#' id='navbarDropdownMenuLink2'><i class='bi bi-cloud-arrow-down-fill'/> Download</a> <ul aria-labelledby='navbarDropdownMenuLink2' class='dropdown-menu bg-primary'> <li class='dropdown-submenu'><a class='dropdown-item' href='https://www.sebardi.id/search/label/Free%20Template'> Theme Blogger</a></li> <li class='dropdown-submenu'><a class='dropdown-item' href='https://www.sebardi.id/search/label/Sebardi'> Theme Sebardi</a></li> </ul> </li> <li class='nav-item'><a class='nav-link text-black' href='https://www.sebardi.id/search/label/Internet'><i class='bi bi-wifi'/> Internet</a></li> <li class='nav-item dropdown'><a aria-expanded='false' aria-haspopup='true' class='nav-link dropdown-toggle text-black' data-toggle='dropdown' href='#' id='navbarDropdownMenuLink3'><i class='bi bi-tencent-qq'/> OS</a> <ul aria-labelledby='navbarDropdownMenuLink3' class='dropdown-menu bg-primary'> <li class='dropdown-submenu'><a class='dropdown-item dropdown-toggle' href='#'> GNU/Linux</a> <ul class='dropdown-menu bg-primary'> <li><a class='dropdown-item' href='https://www.sebardi.id/search/label/Linux%20Mint'> Linux Mint</a></li> <li><a class='dropdown-item' href='https://www.sebardi.id/search/label/ubuntu'> Ubuntu</a></li> </ul> </li> <li class='dropdown-submenu'><a class='dropdown-item' href='https://www.sebardi.id/search/label/windows'> Windows</a></li> </ul> </li> <li class='nav-item'><a class='nav-link text-black' href='https://www.sebardi.id/search/label/opini'><i class='bi bi-chat-dots-fill'/> Opini</a></li> <li class='nav-item'><a class='nav-link text-black' href='https://www.sebardi.id/search/label/Printer'><i class='bi bi-printer-fill'/> Printer</a></li> <li class='nav-item dropdown'><a aria-expanded='false' aria-haspopup='true' class='nav-link dropdown-toggle text-black' data-toggle='dropdown' href='#' id='navbarDropdownMenuLink4'><i class='bi bi-code'/> Web Desain</a> <ul aria-labelledby='navbarDropdownMenuLink4' class='dropdown-menu bg-primary'> <li class='dropdown-submenu'><a class='dropdown-item' href='https://www.sebardi.id/search/label/Blogger'> Blogger</a></li> <li class='dropdown-submenu'><a class='dropdown-item' href='https://www.sebardi.id/search/label/Bootstrap'> Bootstrap</a></li> <li class='dropdown-submenu'><a class='dropdown-item' href='https://www.sebardi.id/search/label/Halfmoon'> Halfmoon</a></li> <li class='dropdown-submenu'><a class='dropdown-item' href='https://www.sebardi.id/search/label/Wagtail'> Wagtail</a></li> </ul> </li> </ul> </div> <div class='menu-search'> <button aria-expanded='false' aria-label='Name' class='btn btn-primary' data-bs-toggle='dropdown' id='dropdownMenuButton-search' type='button'><i class='bi bi-search'/></button> <ul aria-labelledby='dropdownMenuButton-search' class='dropdown-menu dropdown-menu-end bg-primary'> <form class='navbar-form navbar-right' expr:action='data:blog.homepageUrl + "search"' role='search'> <div class='form-group ms-2 me-2 mt-2 mb-2 bg-primary'> <div class='input-group bg-primary'> <input aria-label='Search' class='form-control bg-light' id='text' name='q' placeholder='Search' value=''/><button class='btnsearch btn-primary bg-light' type='submit'> <i class='bi bi-search mt-2 mb-2 text-white'/> </button> </div> </div> </form> </ul> </div> <div class='pencarian form-check form-switch me-2'> <label class='form-check-label' for='lightSwitch'> <span class='theme-toggle-sr'/> <svg aria-hidden='true' class='theme-toggle__half-sun' fill='currentColor' height='1em' viewBox='0 0 32 32' width='1em' xmlns='http://www.w3.org/2000/svg'> <path d='M27.5 11.5v-7h-7L16 0l-4.5 4.5h-7v7L0 16l4.5 4.5v7h7L16 32l4.5-4.5h7v-7L32 16l-4.5-4.5zM16 25.4V6.6c5.2 0 9.4 4.2 9.4 9.4s-4.2 9.4-9.4 9.4z'/> </svg> </label> <input class='form-check-input' id='lightSwitch' type='checkbox'/> </div> </nav> </div>

7. Perhatikan lagi khusus pada bagian:

<li class='nav-item'><a class='nav-link text-black' href='https://www.sebardi.id/'><i class='bi bi-house-door-fill'/> Home</a></li>

8. Dari kode tersebut, kode yang memanggil icon home dari Fontawesome adalah <i class='bi bi-house-door-fill'/>. Kode inilah yang menampilkan icon berupa gambar rumah. Hanya saja, baris kode ini hanya akan menampilkan gambar kotak saja jika tidak disertai dengan script meta tag yang mengarah ke server CDN milik Fontawesome.

<i class='bi bi-house-door-fill'/>

9. Oleh karena itu, untuk mengubahnya dengan icon SVG yakni dengan menghapus baris kode pada nomor 8 di atas kemudian ganti dengan kode SVG.

10. Kode SVG yang dimaksud misalnya pada contoh Material Symbols and Icons yaitu nomor 5. Sedangkan pada contoh mendapatkan kode SVG dari Fontawesome terlihat pada nomor 4 seperti ini:

<svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 576 512"><!--! Font Awesome Free 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M575.8 255.5c0 18-15 32.1-32 32.1h-32l.7 160.2c0 2.7-.2 5.4-.5 8.1V472c0 22.1-17.9 40-40 40H456c-1.1 0-2.2 0-3.3-.1c-1.4 .1-2.8 .1-4.2 .1H416 392c-22.1 0-40-17.9-40-40V448 384c0-17.7-14.3-32-32-32H256c-17.7 0-32 14.3-32 32v64 24c0 22.1-17.9 40-40 40H160 128.1c-1.5 0-3-.1-4.5-.2c-1.2 .1-2.4 .2-3.6 .2H104c-22.1 0-40-17.9-40-40V360c0-.9 0-1.9 .1-2.8V287.6H32c-18 0-32-14-32-32.1c0-9 3-17 10-24L266.4 8c7-7 15-8 22-8s15 2 21 7L564.8 231.5c8 7 12 15 11 24z"/></svg>

11. Simpan template.

Kesimpulan

SVG singkatan dari Scalable Vector Graphics yang merupakan format gambar. Tidak heran jika kehadiran file ini pada komputer Anda akan terasosiasi langsung dengan program image viewer atau image editor yang sudah terpasang.

Karena berupa gambar maka file .SVG ini biasa dibuka dengan software seperti GIMP, Inkscape, Photoshop dan yang lainnya untuk melihat, mengedit maupun memanipulasi gambarnya. Sedangkan pada salah satu tahapan contoh di atas kita telah membuka file tersebut dengan software text editor.

Setelah mendapatkan kode HTML dari icon SVG yang kita inginkan sebagaimana sudah kita paparkan. Pada praktikum kali ini kita juga telah berhasil memasang icon SVG melalui theme Blogger. Terakhir, jangan lupa hapus script khusus tag meta yang terhubung dengan server  CDN-nya ya. 

Sekian praktikum hari ini dan selamat mencoba.

Baca Juga