Glyphicon adalah icon-icon yang siap dipakai pada website jika kita memakai framework CSS yaitu Bootstrap. Bootstrap menyediakan fasilitas untuk membuat atau menampilkan icon dengan sangat mudah, ada sangat banyak icon yang disediakan oleh bootstrap, masing-masing sudah diberi nama dan kita hanya perlu memanggil nama class nya masing-masing untuk menampilkan icon bootstrap yang diinginkan.
Untuk menampilkan icon bootstrap yang pertama kali harus di lakukan adalah menambahkan class “glyphicon” di dalam tag <span> pembuka atau tag lainnya, setelah menambahkan class glyphicon kemudian tambahkan nama class icon masing-masing sesuai dengan icon yang ingin kita inginkan.
Fitur glyphicons tidak bisa digunakan secara langsung di versi 4 ini, ada beberapa langkah yang harus dilakukan, yaitu :
- Unduh file glyphicons.css di sini
- Simpan di folder css bootstrap project web kita
- Coding di bagian header untuk deklarasi penggunaan file css tersebut, contoh : <link rel=”stylesheet” type=”text/css” href=”../assets/css/glyphicons.css”>
<!DOCTYPE html>
<html>
<head>
<!-- Menghubungkan dengan bootstrap & glyphicons, sesuaikan dengan direktory file masing-masing -->
<link rel="stylesheet" type="text/css" href="../assets/css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="../assets/css/glyphicons.css">
<title>Tutorial Membuat Icon Dengan Bootstrap 4</title>
</head>
<body>
<div class="container">
<br>
<div class="container">
<h1>Cara Membuat Icon Dengan Bootstrap</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>
Hasilnya :
Pada contoh di atas bahwa icon glyphicon bootstrap dapat ditambahkan pada semua element html, seperti tombol, link dan lainnya, ukuran icon glyphicon bootstrap ini mengikuti ukuran font.
Untuk bootstrap terbaru glyphicon sudah tidak disertakan lagi, walaupun sudah tidak disertakan gluphicon tetap masih bisa kita gunakan.
Pada bootstrap versi terbaru glyphicon sudah tergantikan dengan Bootstrap Icons, kita bisa download dan pelajri di link berikut ini https://getbootstrap.com/
Referensi :
- https://www.malasngoding.com/cara-membuat-icon-dengan-bootstrap/
Be the first to comment