CSS Tips | Cara Menambahkan Icon Pada Menu - Kali ini kabelantena akan berbagi tips Cara Menambahkan Icon Pada Menu, jadi pada samping tulisan pada menu ada gambar atau icon sesuai dengan kategori menu tersebut, mungkin anda sering menemuinya kan?. Saat postingan ini ditulis pun menu pada kabelantena ada gambarnya, jadi kelihatan rame.
Untuk lebih mudah mengingatnya, nama dari icon untuk menu yaitu Font Awasome atau disingkat fa. Jadi icon ini termasuk font bukan image, sehingga untuk loading halaman situs tidak membebani. Berikut Cara Menambahkan Icon Pada Menu :
Buat penghubung dengan file CSS-nya dengan menambahkan code di bawah ini sesudah element <head>
<link href='//netdna.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.css' rel='stylesheet'/>
Jika sudah ditambahkan, tinggal kita menambahkan jenis icon apa yang ingin kita tambahkan, untuk menambahkan icon bisa menggunakanan code di bawah ini:
Tempatkan di samping tulisan yang ingin ditambahi icon, ganti namaicon dengan nama icon yang anda inginkan. Lihat contoh tulisan twitter di bawah ini
<i class='fa fa-namaicon'/>
Tempatkan di samping tulisan yang ingin ditambahi icon, ganti namaicon dengan nama icon yang anda inginkan. Lihat contoh tulisan twitter di bawah ini
Twitter
Code tulisan twitter di atas adalah :
Untuk daftar nama-nama icon anda bisa lihat di:
https://fortawesome.github.io/Font-Awesome/icons/
Jika anda mau membuat icon sendiri, anda bisa mendaftar dulu di fonticons[dot]com
Sekian CSS Tips | Cara Menambahkan Icon Pada Menu semoga bermanfaat.
Code tulisan twitter di atas adalah :
<i class="fa fa-twitter">Twitter</i>
Untuk daftar nama-nama icon anda bisa lihat di:
https://fortawesome.github.io/Font-Awesome/icons/
Jika anda mau membuat icon sendiri, anda bisa mendaftar dulu di fonticons[dot]com
Sekian CSS Tips | Cara Menambahkan Icon Pada Menu semoga bermanfaat.
Post A Comment:
0 comments so far,add yours
Posting Komentar