Berikut penjelasan cara menggunakan Bootstrap Icons dengan lengkap dan sederhana.
✅ 1. Menggunakan Bootstrap Icons via CDN (paling mudah)
Cukup tambahkan link CSS berikut di dalam <head> HTML Anda:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">
Lalu gunakan icon dengan tag <i> seperti ini:
<i class="bi bi-alarm"></i>
<i class="bi bi-heart-fill"></i>
<i class="bi bi-house"></i>
✅ 2. Menggunakan Bootstrap Icons secara lokal (offline)
Jika ingin bekerja tanpa internet:
- Download Bootstrap Icons dari
https://github.com/twbs/icons - Ekstrak folder ZIP
- Masukkan folder /font dan /css ke dalam project
- Hubungkan CSS-nya:
<link rel="stylesheet" href="css/bootstrap-icons.css">
- Gunakan icon seperti biasa:
<i class="bi bi-gear"></i>
✅ 3. Ukuran, Warna, dan Style Icon
Mengatur ukuran icon
<i class="bi bi-alarm" style="font-size: 2rem;"></i>
Mengatur warna icon
<i class="bi bi-heart-fill" style="color: red;"></i>
Mengubah ketebalan (gunakan CSS tambahan bila perlu)
<i class="bi bi-check-circle" style="font-weight: bold;"></i>
✅ 4. Menggunakan bersama Bootstrap (Opsional)
Bootstrap Icons bisa digabung dengan elemen bootstrap lain:
<button class="btn btn-primary">
<i class="bi bi-send"></i> Kirim
</button>
✅ 5. Contoh lengkap
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Icon Demo</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">
</head>
<body>
<h3>Contoh Bootstrap Icons</h3>
<i class="bi bi-alarm" style="font-size: 2rem;"></i>
<i class="bi bi-heart-fill" style="font-size: 2rem; color: red;"></i>
<i class="bi bi-house" style="font-size: 2rem;"></i>
<button class="btn btn-success m-3">
<i class="bi bi-check-circle"></i> Submit
</button>
</body>
</html>
Leave a Reply