Cara Menampilkan Icon dari Bootstrap 3

Oleh: Dandy Bimuda

Dalam membuat website, tentu tidak akan lepas dari icon-icon yang
mempercantik info text, tombol dan navigasi. Jika kita membuat icon dari
awal atau mengedit dari file image, tentu hal ini sangat memakan waktu
banyak. Bootstrap sebagai CSS framework yang sekarang sedang populer,
memudahkan para desainer w...

Dalam membuat website, tentu tidak akan lepas dari icon-icon yang mempercantik info text, tombol
dan navigasi. Jika kita membuat icon dari awal atau mengedit dari file image, tentu hal ini sangat
memakan banyak waktu. Bootstrap sebagai CSS framework yang sekarang sedang populer,
memudahkan para desainer web untuk menambahkan icon yang telah tersedia pada Bootstrap.
Bukankah lebih cepat menggunakan yang telah ada? Apalagi simbol yang telah kita buat sendiri atau
dari hasil editan bermakna sama dari icon Bootstrap.

Bootstrap 3 telah menyediakan banyak icon dalam bentuk font yang dapat digunakan untuk
mempercantik website, bagaimana cara menerapkannya ke dalam website?

Kita hanya perlu menambahkan kode:

<span class="glyphicon glyphicon_class"></span>

dimana glyphicon_class diganti dengan kode yang telah disediakan oleh Bootstrap 3.

Misalkan kita akan menambahkan icon telepon untuk memperjelas info no. telp pada website maka
tambahkan kode

<span class="glyphicon glyphicon-phone-alt"></span>

glyphicon-phone-alt adalah kode untuk icon telepon (hanya mengubah setelah class glyphicon
untuk mencoba icon lain). Contoh penerapan text dan icon pada website:

<span class="glyphicon glyphicon-phone-alt"></span> (0274) 123456

Maka akan menghasilkan:

Untuk kode-kode Glyphicon bisa dilihat di sini atau lihat gambar di bawah ini:
Semoga bermanfaat.

Tentang Penulis

Dandy Bimuda

Menyukai dunia IT, Website dan Desain Grafis.