Cara Menambahkan Icon Pada Menu Navigasi Blog dengan Font Awesome

Ambyarblog.com - Apa kabar? Pada kesempatan kali ini saya akan berbagi tutorial Cara Menambahkan Icon Pada Menu Navigasi Blog dengan Font Awesome. Sebenarnya ada cara lain untuk menambahkan icon pada menu navigasi selain menggunakan Font Awesome yaitu menggunakan SVG.

Namun pada tutorial sekarang saya akan menggunakan Font Awesome.

"Apa akan mengurangi kecepatan Blog?"

Tentu saja tidak, karena menggunakan kode CSS malahan membuat penampilan blog Anda lebih menarik, keren dan enak di pandang.

Sebelum ke tutorialnya kita bahas dulu tentang Font Awesome mungkin dari kalian belum mengetahuinya.

Font Awesome

Font Awesome adalah sekumpulan berbagai gambar vektor icon kecil yang dapat dengan mudah untuk di edit dari ukuran, warna drop shadow hingga ukuran yang anda inginkan.
Icon ini dapat di pasang pada berbagai website/ blog, dengan meletakkan tag script HTML dan CSS pada templatenya.

Cukup meletakan tag script HTML dan CSS name tertentu Anda sudah dapat menggunakan icon-icon yang sudah tersedia pada website penyedia font awesome tersebut.

Pada umumnya para blogger memasang pada Navigasi Menu, Menu Bar dan berbagai Widget dengan tujuan untuk mempercantik tampilan pada website/ blog.

Ok, silahkan Anda simak langkah-langkah cara menambahkannya.

Cara Menambahkan Icon Pada Menu Navigasi Blog dengan Font Awesome

Langkah #1 - Buka dashboard Blogger Anda.

Langkah #2 - Pilih menu Tema > Edit HTML > Copy dan Paste kode di bawah ini tepat DIATAS </head> dan Simpan.

<script crossorigin='anonymous' src='https://kit.fontawesome.com/c4e1d1a724.js'/>

Untuk cara pemasangan Icon yang Anda butuhkan cukup buka Font Awesome dan klik menu Icon, lalu cari Icon yang anda perlukan. Jika sudah salin kodenya dan paste ke menu yang anda inginkan.

Contoh:
#1 - Kita cari Icon kontak dan pilih icon yang akan digunakan.

Pemilihan ikon Font Awesome

#2 -  Lalu akan muncul kodenya seperti berikut.

Pengambilan kode icon font awesome

#3 - Copy dan paste kode tersebut ke menu yang akan ditambahkan icon oleh Anda.

Untuk pemasangan anda cukup masuk ke mode Tata Letak atau ke Tema > Edit HTML, kemudian cari menu navigasi anda. Terakhir simpan di menu yang akan anda tambahkan icon.

Penutup

Itulah Cara Menambahkan Icon Pada Menu Navigasi Blog dengan Font Awesome, mohon maaf apabila penjelasan dan gambar nya kurang jelas. Ma'lum saya menggunakan Handphone "hehee". Semoga bermanfaat, sekian dan terima kasih.

Share :