Pada tutorial sebelumnya, kita sudah belajar Tutorial Belajar Bootstrap Bagian 17 : Cara Membuat Media Object di Bootstrap, selanjutnya kita akan belajar cara menambahkan icon di Bootstrap.
Versi baru Bootstrap 4 tidak menyertakan pustaka ikon secara default, tidak seperti versi Bootstrap 3 sebelumnya yang menyertakan Glyphicons dalam format font di intinya.
Namun, Anda masih dapat menyertakan ikon dalam proyek menggunakan beberapa pustaka ikon berbasis font eksternal.
Pustaka ikon paling populer dan sangat kompatibel untuk Bootstrap adalah Font Awesome.
Ini menyediakan 675 ikon yang tersedia dalam format font untuk kegunaan dan skalabilitas yang lebih baik.
Keuntungan menggunakan ikon font adalah, Anda dapat membuat ikon dengan warna apa saja hanya dengan menerapkan properti warna CSS.
Mari kita lihat bagaimana menyertakan ikon font-awesome di halaman web.
Cara Menyertakan Font Awesome
Anda cukup menggunakan tautan CDN menampilkan font yang tersedia secara gratis untuk menyertakan ikon font-awesome dalam proyek Anda.
Tautan CDN ini pada dasarnya mengarah ke file CSS jarak jauh yang menyertakan semua class yang diperlukan untuk menghasilkan berbagai ikon. Mari kita lihat contoh berikut ini:
<h1><i class="fa fa-globe"></i> Halo dunia!</h1>
<!-- JS files: jQuery pertama, lalu Popper.js, selanjutnya Bootstrap JS, lalu Font Awesome JS-->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<script src="https://kit.fontawesome.com/206142bfe3.js" crossorigin="anonymous"></script>
Cara Menggunakan Ikon Font Awesome dalam Kode Anda
Untuk menggunakan ikon font-awesome dalam kode, Anda akan memerlukan tag <i> bersama dengan class dasar .fa dan class ikon individu .fa-*.
Sintaks umum untuk menggunakan ikon font-awesome adalah:
Di mana fa-class-name adalah nama dari class ikon tertentu (misalnya fa-search, fa-user, fa-star, fa-calendar, fa-globe, dll.)
Yang ditentukan dalam file font-awesome.min.css.
Misalnya, untuk menggunakan ikon pencarian, Anda dapat menempatkan kode berikut di mana saja:
<button type="submit" class="btn btn-primary"><span class="fa fa-search"></span> Search</button>
<button type="submit" class="btn btn-secondary"><span class="fa fa-search"></span> Search</button>
Semoga tutorial ini membantu Anda belajar cara menambahkan icon di Bootstrap.
