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.
Faishal Hady Seorang Blogger Pemula yang sedang belajar

7 Komentar untuk "Cara Menambahkan Icon Pada Menu Navigasi Bar Blog"

  1. Mantap gan artikelnya, simpel dan mudah dipahami tutornya :)

    BalasHapus
  2. Mantap gan tutornya, mantap juga templatenya :)

    Boleh tau ini pakai Template apa ?

    BalasHapus
    Balasan
    1. Makasih 😁✌️
      Tema yang saya pakai saat ini adalah VioMagz versi redesign saya sendiri dengan penggunaan sedikit script dari "arlinadzgn" dan juga "igniel" serta "igniplex"

      Hapus
    2. Jika perlu tutorialnya nanti saya bikinin 😁✌️

      Hapus
  3. mas ini kok punya saya gagal ya udah ngikutin tutor padahal
    coba cek " ninjutsu dot eu dot org "

    malah jadi kotak kotak seperti tidak bisa tampil gitu

    mohon bantuannya terimakasih

    BalasHapus
Berkomentarlah sesuai dengan topik dan tidak menaruh link aktif. Terima kasih atas perhatiannya.

Silahkan tuliskan komentar Anda yang sesuai dengan topik postingan halaman ini. Komentar yang berisi tautan tidak akan ditampilkan sebelum disetujui.

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel