Cara Menambah Icon Pada Menu Navigasi Blog Dengan Mudah

Cara Menambah Icon di Menu Navigasi Blog

Cara menambahkan icon pada menu navigasi blog - Jika anda bosan dengan template yang hanya banyak tulisan saja, icon adalah salah satu solusinya. Apa itu icon?? Icon adalah gambar yang ukurannya lumayan kecil. Biasanya, Icon melambangkan sesuatu ataupun mewakili dari Kategori ataupun semacamnya. Namun, jika pada blog, icon menjelaskan label pada suatu artikel yang telah kita tulis. Penambahan icon pada menu navigasi blog akan membuat blog menjadi bagus dan blog pun akan terlihat lebih profesional dan kelihatan premium.

Namun, untuk menambahkan icon pada blog tidak semudah kita mengupload foto di facebook, kita harus menggunakan code html untuk panggil icon dari Font Awesome. Apa itu font awesome?? Font awesome adalah website yang memberikan kita kemudahan untuk membuat icon pada blog kita sendiri. Font awesome biasanya digunakan oleh pembuat template untuk menambahkan macam-macam icon agar template yang dibuat dan rancangnya lebih menarik dan lebih cantik. Masih penasaran bagaimana tampilan icon di menu navigasi yang saya maksudkan ? Nah, kurang lebih seperti gambar dibawah ini !



Icon di Menu Navigasi





Bagus bukan?? Sekarang, silahkan sobat ikuti langsung tutorial dari Bang Tutorial. Silahkan ikuti dan terapkan pada blog sobat masing-masing.

Cara Menambah Icon di Menu Navigasi Blog

1. Pertama,silahkan sobat masuk ke halaman utama bloggernya terlebih dahulu, kemudian klik pada tema dan edit HTML. Selanjutnya letakkan kode dibawah ini tepat diatas kode </head> untuk lebih cepat gunakan "ctrl+f"


<link href='//netdna.bootstrapcdn.com/font-awesome/3.1.1/css/font-awesome.min.css' rel='stylesheet'/>

2. Selanjutnya, jika sobat telah meletakkan kode pemanggilan Font Awesome, kemudian cari menu blog sobat yng ingin sobat tambahkan iconnya. Silahkan sobat pilih iconnya di  http://fontawesome.io/icons/

3. Untuk memanggil icon yang telah kalian pilih, silahkan masukkan kode dibawah ini pada kode menu navigasi blog sobat.



<i class='fa fa-nama icon yang kalian pilih'/>

4. Letakkan kode diatas sebelum nama menu navigasinya. Lihat contohnya dibawah ini.


<li><a href='#'><i class='fa fa-user'/>About</a></li>
<li><a href='#'><i class='fa fa-bookmark-o'/>Partner</a></li>
<li><a href='#'><i class='fa fa-envelope'/>Contact Me</a></li>
<li><a href='#'><i class='fa fa-exclamation-triangle'/>TOS</a></li>
<li><a href='#'><i class='fa fa-gavel'/>Disclaimer</a></li>

5. Selesai.
Demikianlah tutorial Cara Menambah dan memasang Icon Pada Menu Navigasi Blog yang sangat singkat kali ini, semoga bisa bermanfaat dan berguna bagi sobat semuanya. Jika ada yang belum paham dan belum mengerti, silahkan sobat comment pada kolom komentar dibawah. dan jangan lupa untuk kembali dilain waktu. Karena blog ini akan selalu update artikel apa saja yang selalu anda butuhkan :)

13 Responses to "Cara Menambah Icon Pada Menu Navigasi Blog Dengan Mudah"

  1. Terima kasih infonya gan, langsung bisa di praktekin, hehe

    BalasHapus
  2. Untuk ganti iconnya yang di ganti apa mas?

    BalasHapus
    Balasan
    1. Misal "fa-fa-code" yang di ganti "code" untuk mengganti iconnya mba

      Hapus
  3. Bagaimana cara agar ikon berjarak dgn tulisannya? Mohon di jawab

    BalasHapus
    Balasan
    1. Tinggal beri spasi / tab sebelum judul navigasinya
      tq

      Hapus
  4. Muter2, akhirnya ini yang pas sesuai keinginan saya. Makasih Gan tutornya mudah dipahami.

    BalasHapus
    Balasan
    1. Gan, mbok kodenya jangan di kasih anti copast biar saya tidak ngetik lagi.

      Hapus
    2. Sudah bisa dicopas mas, maap 🙏

      Hapus
  5. Ty tutor nya gan saya jadi tau

    BalasHapus

Iklan Atas Artikel

agen

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel

Jasa Pembelajaran Carding CO Amazon Sampai Resi