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:
1
| <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
1
| <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:
1
| <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.
Tidak ada komentar:
Posting Komentar