Bang Tutorial: Cara Menambah Icon Pada Menu Navigasi Blog Dengan Mudah

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 !

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 :)