Cara Menambahkan Icon Pada Menu Navigasi Bar Blog

Cara Menambahkan Icon Pada Menu Navigasi Bar Blog

Menambahkan Menu Navigasi Pada Bar Blog merupakan hal yang dilakukan agar bisa mempercantik tampilan blog kalian. Bahkan bisa juga memudahkan pengunjung dalam mengakses informasi suatu Blog.

Kalian juga bisa membuatnya lebih menarik lagi dengan Menambahkan Icon yang sesuai dengan Navigasi tersebut. Contohnya seperti yang saya gunakan pada blog saya sekarang ini. Lebih bagus dan enak dipandang bukan?

Pada kesempatan kali ini saya akan memberikan sedikit tutorial tentang Cara Menambahkan Icon Pada Menu Navigasi Bar Blog. Sebenarnya caranya itu sangat mudah karena kita akan menggunakan icon dari Font Awesome. Jadi, kalian tidak perlu menggunakan CSS tambahan apapun.

Mari kita langsung ke langkah-langkahnya.

1. Pastikan kalian sudah memasang Font Awesome pada blog kalian. Jika belum, letakkan kode ini sebelum </body>.

<link href='//cdnjs.cloudflare.com/ajax/libs/font-awesome/5.7.0/css/fontawesome.min.css' rel='stylesheet' type='text/css'/>

2. Lalu carilah kode menu navigasi blog kalian. Disini saya menggunakan Template VioMagz sehingga kode menu navigasinya seperti ini.

<ul><li><a href='https://www.faishalkc.eu.org/'>Beranda</a></li></ul>

3. Pergi ke fontawesome.com dan cari icon yang kalian inginkan.

4. Setelah menemukan icon yang kalian inginkan, kalian akan melihat kode seperti ini.

<i class="fas fa-home"></i>

5. Ubah kode tersebut menjadi seperti ini.

<i aria-hidden='true' class='fas fa-home'/>

6. Sekarang tambahkan kode diatas ke dalam menu navigasi sehingga menjadi seperti ini.

<ul><li><a href='https://www.faishalkc.eu.org/'><i aria-hidden='true' class='fas fa-home'/> Beranda</a></li></ul>

7. Setelah itu tekan Simpan.

Sekarang kalian sudah berhasil Menambahkan Icon Pada Menu Navigasi Bar Blog. Semoga bermanfaat buat kalian semua dan bisa membuat blog kalian semakin berkembang.