HASANONTA - Bootstrap menyediakan fasilitas untuk membuat atau menampilkan icon dengan sangat mudah, fasilitas ini disebut dengan "Glyphicon". Awalnya Glyphicon adalah kumpulan icon-icon berbayar, tapi dengan BOOTSTRAP semua itu telah disediakan secara gratis
Untuk menampilkan icon Bootstrap pertama yang harus kita lakukan adalah menambahkan class "glyphicon" kemudian tambahkan class icon masing - masing sesuai kebutuhan sobat. Untuk melihat icon - icon yang disediakan oleh Bootstrap silahkan menuju situs resmi Bootstrap. DISINI
Berikutnya kita akan mencoba memasukkan beberapa icon Bootstrap. Contoh :
<!DOCTYPE html> <html> <head> <title>HasanOnta</title> <link rel="stylesheet" type="text/css" href="css/bootstrap.css"> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/bootstrap.js"></script> </head> <body> <div class="container"> <p>Icon surat: <span class="glyphicon glyphicon-envelope"></span></p></div> </body> </html><p>Icon surat sebagai link: <a href="#"><span class="glyphicon glyphicon-envelope"></span></a> </p> <p>Icon hati: <span class="glyphicon glyphicon-heart"></span></p> <p>Icon hati di atas tombol: <button type="button" class="btn btn-default"> <span class="glyphicon glyphicon-search"></span> Search </button> </p> <p>Icon Print: <span class="glyphicon glyphicon-print"></span></p> <p>Icon Print di atas tombol besar ("btn-lg"): <a href="#" class="btn btn-success btn-lg"> <span class="glyphicon glyphicon-print"></span> Print </a> </p> </div>
Output :
KESIMPULAN
Dapat kita simpulkan bahwa icon glyphicon Bootstrap dapat diselipkan pada semua element HTML. Kita dapat menambahnya pada tombol, link dan lainya. Ukuran glyphicon Bootstrap dapat kita atur sesuai ukuran font dan sesuai keinginan kita. Untuk menambahkan glyphicon sangat mudah yaitu tinggal memberi class "glyphicon" dan nama icon yang kita butuhkan. Untuk melihat list dari icon Bootstrap dapat kita lihat pada Website Resmi Bootstrap yang saya berikan tadi
Hello, my name is Jack Sparrow. I'm a 50 year old self-employed Pirate from the Caribbean. 
Tidak ada komentar:
Posting Komentar