Selanjutnya kita meneruskan pembahasan Bootstrap 4 ini dengan menampilkan icon menggunakan font Awesome. Kita akan membahas mengenai instalasi font Awesome kemudian dilanjutkan dengan tutorial mengenai penggunaan font Awesome ini.
Instalasi font Awesome pada Bootstrap 4 ini adalah:
- Download font Awesome
Pertama-tama silahkan masuk ke https://fontawesome.com/ dan cari bagian download. Pada waktu artikel ini ditulis ada di https://fontawesome.com/how-to-use/on-the-web/setup/hosting-font-awesome-yourself .
- Menyiapkan foldernya
- Upload css yang diperlukan saja
- Upload semua web fonts
- Masukkan css pada file htmlnya
<link rel=”stylesheet” href=”/fontawesome/css/all.min.css”>
Contoh penggunaan adalah:
- Mencari icon yang diperlukan
Kita dapat mencarinya di https://fontawesome.com/icons?d=gallery .
- Melihat setingnya
Misal kita menemukan https://fontawesome.com/icons/user?style=regular . Klik ‘Start using this Icon’ dan di situ dijelaskan seting htmlnya
- Copy paste ke htmlnya
Pada contoh di atas htmlnya adalah<i class=”far fa-user”></i>
- Demo dapat dilihat di https://bs4.aris.proweb.asia/contact00.html dengan tampilan di bawah ini:
Informasi lebih lanjut silahkan mengunjungi https://fontawesome.com/.
Kunjungi www.proweb.co.id untuk menambah wawasan anda.
Icon dengan font Awesome pada Bootstrap