Cara Gampang Menambah Icon di Navbar

Cara Gampang Menambah Icon di Sebelah Nama Label  - Assalamualaikum, icon merupakan simbol / tanda yang dapat mewakili sepenggal kata.Begitu juga pada blog, icon dapat melambangkan nama dari label kita.Penggunaan icon pada navbar di blog banyak sekali manfaatnya :

• Terlihat Indah
• Terlihat Menarik
• Terlihat Lebih Berkelas

Dari kelebihan kelebihan di atas saya rasa anda paham betapa menggiurkannya menggunakan icon pada navbar anda.

Namun, disamping manfaat pasti ada ruginya yaitu :

• Waktu loading bertambah seiring bertambahnya CSS yang digunakan pada template

Ya, karena dalam tutorial ini kita diwajibkan menggunakan CSS cdn milik fontawesome.

Siapkan CSS

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

Copy kode diatas tepat diatas </head>

Memilih gambar icon.

Cari dan pilih gambar icon pada link berikut

http://fontawesome.io/cheatsheet/

Carilah gambar icon yang sesuai dengan nama label kalian.Jangan sampai salah pilih icon yang tidak sesuai dengan nama dari label kalian.

Memasang Kode HTML

Sebelum diberi kode icon font awesome, kode HTML kalian seharusnya tampak seperti ini

<ul class='nav nav-menu2'>
<li><a class='active' href='/'>Home</a></li>
<li><a href='#Link1'> Download</a></li>
<li><a href='#Link2'> Buku</a></li>

Misalkan saya ingin menambah icon pada Label DownloadYang harus saya tambah adalah kode

class='fa fa-download'

Letakkan kode di-atas tepat sebelum kode href=''.Kira kira akan terlihat seperti dibawah ini

<ul class='nav nav-menu2'>
<li><a class='active' href='/'>Home</a></li>
<li><a class='fa fa-download' href='#Link1'> Download</a></li>
<li><a href='#Link2'> Buku</a></li>

Untuk menambahkan icon icon lain, langkahnya sama seperti langkah di-atas yaitu menambahkan kode class='fa fa-NamaIcon'

<ul class='nav nav-menu2'>
<li><a class='active' href='/'><i class='fa fa-home'/> Home</a></li>
<li><a class='fa fa-download' href='#Link1'> Download</a></li>
<li><a class='fa fa-book' href='#Link2'> Buku</a></li>

Kira kira seperti itu step by step untuk menambahkan icon pada navbar dengan mudah. Dengan memanfaatkan CSS dan kode dari fontawesome kita sudah bisa memanggil icon.

Jika terdapat kendala dalam pemasangannya dapat kalian tanyakan pada kolom komentar. Jangan segan segan untuk menanyakannya karena terdapat kekurangan dalam penulisan artikel saya ini. Semoga saja, dapat saya balas dengan cepat :).

Sekian tutorial dari saya, semoga bermanfaat :)
Wassalamualaikum