Cara Menggunakan Icon Bootstrap
Bootstrap memiliki koleksi icon yang kaya dan mudah digunakan untuk meningkatkan tampilan website Anda. Berikut adalah cara menggunakannya:
1. Menambahkan Bootstrap ke Proyek Anda
Anda perlu menyertakan Bootstrap di proyek Anda agar dapat menggunakan icon-nya. Ada beberapa cara untuk melakukannya:
- Menggunakan CDN: Cara termudah adalah dengan menyertakan Bootstrap melalui CDN (Content Delivery Network). Salin dan tempel kode berikut di bagian
<head>dari HTML Anda:
- Mengunduh Bootstrap: Anda juga bisa mengunduh Bootstrap dan menambahkannya ke direktori proyek Anda.
2. Menggunakan Icon
Setelah Bootstrap ditambahkan, Anda dapat menggunakan icon dengan tag <i class="bi bi-nama-icon"></i>.
Contoh:
Kode di atas akan menampilkan icon rumah.
Nama Icon: Untuk menemukan nama icon, Anda bisa mengunjungi website resmi Bootstrap:
3. Menyesuaikan Icon
Anda bisa menyesuaikan icon dengan beberapa cara:
- Ukuran: Gunakan class
bi-lguntuk icon besar,bi-smuntuk icon kecil, ataubi-xluntuk icon extra large. - Warna: Gunakan class
text-nama-warnauntuk mengubah warna icon. Contoh:text-primary,text-secondary,text-success,text-danger,text-warning,text-info,text-light,text-dark. - Rotasi: Gunakan class
bi-rotate-nama-derajatuntuk merotasi icon. Contoh:bi-rotate-90,bi-rotate-180,bi-rotate-270. - Flip: Gunakan class
bi-flip-nama-arahuntuk membalikkan icon. Contoh:bi-flip-horizontal,bi-flip-vertical.
Contoh dengan penyesuaian:
Kode di atas akan menampilkan icon rumah dengan ukuran besar, warna biru, dan diputar 90 derajat.
4. Menggunakan Icon dalam Button
Anda juga dapat menggunakan icon dalam button:
Kode di atas akan menampilkan button dengan icon rumah dan tulisan "Home".
Kesimpulan
Bootstrap menyediakan icon yang mudah digunakan dan fleksibel untuk meningkatkan tampilan website Anda. Dengan mengikuti langkah-langkah di atas, Anda dapat menambahkan icon yang menarik ke halaman HTML Anda.
