Cara Menambahkan Icon di Menu Navigasi Blog

Kita tahu icon biasanya berbentuk kecil, biasanya untuk melambangkan suatu judul. Icon di sebuah blog biasanya digunakan untuk menambah kesan menarik pada tampilan blog. Untuk itu pada tutorial kali ini saya akan memberikan tutorial tentang cara menambah icon di menu navigasi blog.

Kalian semua pasti tidak sabar mengetahui cara menambahkan icon di menu navigasi blog dari saya. Tetapi kita harus mengenali dulu script untuk memanggil icon di blog, disini kita menggunakan Font Awesome.

Font Awesome ini biasanya dipakai oleh para pembuat template untuk menambahkan icon yang menarik pada template mereka tentunya.

Langsung saja untuk cara menambahkan icon di menu navigasi blog, silahkan ikuti langkah-langkah dari saya berikut ini.

(Baca juga : Cara Membuat Tombol Back To Top di Blog dengan Font Awesome)

Cara Menambahkan Icon di Menu Navigasi Blog

Cara Memasukan Icon di Script Menu Navigasi

1. Langkah pertama, buka akun Blogger kalian. Masuk ke menu Tema, kemudian pilih Edit HTML. Kemudian masukan code dibawah ini, dan letakan sebelum kode </head>.

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

2. Setelah meletakan kode pemanggil ke Font Awesome. Kemudian cari menu yang ingin di tambahkan icon. Setelah kalian dapatkan menu yang akan di tambahkan icon, silahkan pilih icon yang akan kalian tambahkan di Font Awesome Icons.
3. Untuk memanggil icon yang kalian pilih, silahkan ketikan kode berikut.

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

4. Letakan script di atas sebelum nama menu navigasinya. Lakukan seperti contoh di bawah ini.

<li><a class='active' href='/'><i class='fa fa-home'/> Home</a></li>
<li><a href='#'><i class='fa fa-file'/> Modul</a></li>
<li><a href='#'><i class='fa fa-code'/> PHP dan Mysql</a></li>
<li><a href='#'><i class='fa fa-file-powerpoint-o'/> PowerPoint</a></li>
<li><a href='#'><i class='fa fa-file-text'/> Makalah</a></li>

5. Berikut adalah contoh menu navigasi saya. Selanjutnya silahkan masukan icon sesuka hati kalian.

(Baca juga : Cara Membuat Widget Popular Post Dengan Rating Bintang)

Cara Mengatur Ukuran Icon

1. Untuk mengatur ukuran Icon kita bisa menambahkan code seperti ini.

<li><a class='active' href='/'><i class='fa fa-home fa-lg'/> Home</a></li>

2. Berikut adalah urutan ukuran Font Awesome.

Icon	Code
	fa-lg
	fa-2x
	fa-3x
	fa-4x
	fa-5x

(Baca juga : Cara Membuat Button Dengan Animasi Bounce Effect)

Demikian tutorial singkat dari saya, lebih dan kurang saya mohon maaf. Untuk tutorial blog lainnya selalu kunjungi tutorialumum.com.

Terimakasih sudah berkunjung di blog saya, jika ada pertanyaan, kritik, atau saran silahkan berkomentar di kolom komentar. Karena kritik dan saran dari kalian sangat membantu saya dalam membangun sebuah blog.