Membuat Icon Pada Bootstrap

Bootstrap menyediakan fasilitas untuk membuat atau menampilkan icon dengan sangat mudah, fasilitas ini disebut dengan “Glyphicon”. Ada sangat banyak icon yang sudah disediakan oleh bootstrap. dan masing-masing icon diberi nama class dan untuk digunakan kita hanya perlu memanggil nama class tersebut.
Cara untuk menampilkan icon bootstrap, pertama tama yang harus di lakukan adalah menambahkan class “glyphicon” di dalam tag <span> pembuka. setelah menambahkan class glyphicon, kemudian tambahkan nama class icon nya sesuai dengan icon yang akan kita gunakan. untuk melihat icon-icon yang sudah di sediakan oleh bootstrap anda bisa melihatnya langsung pada situs resmi bootsrap disini.

Untuk contoh penggunaannya, bisa diikuti proses seperti berikut

1. Tuliskan script HTML nya sebagai berikut,

<div class="container">

<h1>Cara Membuat Icon Dengan Bootstrap</h1>

<p>Icon surat: <span class="glyphicon glyphicon-envelope"></span></p>

<p>Icon tambah: <span class="glyphicon glyphicon-plus"></span></p>

<p>Icon musik: <span class="glyphicon glyphicon-music"></span></p>

<p>Icon sampah di atas tombol: <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-trash"></span> Hapus

</button>

</p>

<p>Icon Print: <span class="glyphicon glyphicon-print"></span></p>

<p>Icon Print di atas tombol ukuran besar ("btn-lg"):

<a href="#" class="btn btn-success btn-lg"><span class="glyphicon glyphicon-print"></span> Cetak

</a>

</p>

</div>

</div>

2. Sertakan library jquery.js, bootstrap.js dan bootstrap.css nya

/Style bootstrap
https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css

//Script bootstrap
https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js

//Script jQuery
https://code.jquery.com/jquery-1.10.2.min.js

Demikian contoh pembuat icon dengan bootstrap. Untuk lebih jelasnya bisa dilihat pada link Berikut

Semoga bermanfaat...