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.

Seorang Blogger Pemula yang sedang belajar
  • Facebook
  • WhatsApp
  • Instagram
  • DONASI VIA PAYPAL Bantu berikan donasi untuk blog ini agar bisa tetap semangat memberikan artikel terbaru
    Tampilkan Komentar
    Sembunyikan Komentar

    0 Komentar

    Posting Komentar

    Catatan
    • Mohon Tinggalkan komentar sesuai dengan judul artikel.
    • Tidak diperbolehkan untuk mempromosikan barang atau berjualan.
    • Dilarang mencantumkan link aktif di komentar.
    • Komentar dengan link aktif akan otomatis dihapus
    • *Berkomentarlah dengan baik, Kepribadian Anda tercemin saat berkomentar.

    Iklan Atas Artikel

    Iklan Tengah Artikel 1

    Iklan Tengah Artikel 2

    Iklan Bawah Artikel