Cara Menambah Icon di Menu Navigasi Blog

Mei 07, 2017
SERPChecker - Get deep insights into Google SERP
Cara Menambah Icon di Menu Navigasi Blog
Social Media Icon
XDTPD Blogs | Icon merupakan gambarnya yang ukurannya kecil. Biasanya icon melambangkan sesuatu ataupun mewakili dari suatu judul dan sebagainya. Namun, jika pada blog icon menjelaskan kategori artikel yang telah kita posting. Penambahan icon di menu navigasi blog menjadi daya tarik sendiri 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 untuk memanggil icon dari Font Awesome. Font awesome biasanya digunakan oleh pembuat template untuk menambahkan berbagai macam icon agar template yang dirancangnya lebih menarik. Masih penasaran bagaimana tampilan icon di menu navigasi yang saya maksudkan ? Nah, kurang lebih seperti gambar dibawah ini !


Sekarang, mari kita ikuti langsung tutorialnya. Silahkan ikuti dan terapkan pada blog masing-masing.

1. Pertama,silahkan sobat masuk kedashboard bloggernya terlebh dahulu, kemudian klik pada tema dan edit HTML. Selanjutnya letakkan kode dibawah ini tepat diatas kode </head>
<link href='//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.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 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. Selesai.

Demikianlah tutorial kali ini, semoga bisa bermanfaat dan berguna bagi sobat semuanya. Jika ada yang belum mengerti, silahkan sobat tanyakan pada kolom komentar dibawah. Oh iya, jangan lupa untuk kembali dilain waktu. Karena blog ini akan selalu update artikel menarik lainnya.

Tampilkan Komentar