- 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
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
0 Comments
Silakan berkomentar yang baik, dilarang komentar yang berbentuk spam, misalnya unsur pornografi, kata-kata jorok. dll
EmoticonEmoticon