Bootstrap Part 7 : Cara Membuat Icon Dengan Bootstrap
Cara Membuat Icon Dengan Bootstrap
Cara Membuat Icon Dengan Bootstrap – Bootstrap menyediakan fasilitas untuk membuat atau menampilkan icon dengan sangat mudah, fasilitas ini di sebut dengan “Glyphicon”. ada sangat banyak icon yang di sediakan oleh bootstrap. dan masing-masing sudah di beri nama dan kita hanya perlu memanggil nama class nya masing-masing untuk menampilkan icon bootstrap yang di inginkan.
untuk menampilkan icon bootstrap yang pertama kali harus di lakukan adalah menambahkan class “glyphicon” di dalam tag <span> pembuka. setelah menambahkan class glyphicon kemudian tambahkan nama class icon masing-masing sesuai dengan icon yang ingin kita inginkan. untuk melihat icon-icon yang sudah di sediakan oleh bootstrap anda bisa melihatnya langsung pada situs resmi bootsrap.di sini
cara membuat icon dengan bootstrap
Cara membuat icon dengan bootstrap
untuk cara membuat icon dengan bootstrap silahkan perhatikan pada contoh berikut ini. berikut contoh cara membuat icon dengan bootstrap.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
<!DOCTYPE html> <html> <head> <title>Bootstrap Part 7 : Cara Membuat Icon Dengan Bootstrap</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"> <h1>Cara Membuat Icon Dengan Bootstrap | www.malasngoding.com</h1> <p>Icon surat: <span class="glyphicon glyphicon-envelope"></span></p> <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> </div> </body> </html> |
membuat icon glyphicon dengan bootstrap
dapat di perhatikan pada contoh di atas bahwa icon glyphicon bootstrap dapat di tambahkan pada semua element html. bisa itu pada tombol, link dan lainnya. ukuran icon glyphicon bootstrap ini mengikuti ukuran font. cara membuat icon glyphicon bootstrap ini sangat mudah. anda hanya perlu menambahkan class “glyphicon” dan kemudian tambahkan lagi nama class untuk glyphicon yang ingin di gunakan.
|
1 |
<span class="glyphicon glyphicon-envelope"></span> |
Untuk contoh-contoh icon glyphicon yang tersedia pada bootstrap bisa anda lihat pada situs resmi bootstrap.
See the Pen NxpZve by Malas Ngoding (@malasngoding) on CodePen.0
sekian tutorial belajar bootstrap part 7 : cara membuat icon dengan bootstrap.
Tutorial Bootstrap Dasar Lainnya
Bootstrap Part 1 : Pengertian dan Cara Menggunakan Bootstrap
Bootstrap Part 2 : Membuat Table dengan Bootstrap
Bootstrap Part 3 : Tampilan Gambar dengan Bootstrap
Bootstrap Part 4 : Membuat Tombol dengan Bootstrap
Bootstrap Part 5 : Membuat Jumbotron dengan Bootstrap
Bootstrap Part 6 : Membuat Pesan Alert dengan Bootstrap
Bootstrap Part 7 : Cara Membuat Icon dengan Bootstrap
Bootstrap Part 8 : Pagination dan Breadcrumb dengan Bootstrap
Bootstrap Part 9 : Membuat List dengan Bootstrap
Bootstrap Part 10 : Membuat Panel dengan Bootstrap
Bootstrap Part 11 : Membuat Navigasi Tabs dan Pills dengan Bootstrap
Bootstrap Part 12 : Membuat Navigation Bar Bootstrap
Bootstrap Part 13 : Membuat Form dengan Bootstrap
Bootstrap Part 14 : Membuat Carousel dengan Bootstrap
Bootstrap Part 15 : Membuat Modal dengan Bootstrap
Bootstrap Part 16 : Mengenal System Grid Bootstrap
Tutorial Menarik Lainnya
Membuat Template Blog Sederhana Dengan Bootstrap
Bootstrap Part 16 : Mengenal Grid System Bootstrap
Bootstrap Part 15 : Membuat Modal Dengan Bootstrap
Bootstrap Part 14 : Membuat Carousel Dengan Bootstrap
svg nya ditaro dimana ya?