Skip to content
Ada dua kelas yang berfungsi untuk menggerakkan ikon pada Font-Awesome. Yakni fa-spin dan fa-pulse. Kelas tersebut umumnya digunakan pada ikon fa-refresh, fa-cog, fa-circle-o-notch dan fa-spinner. Meski demikian Anda bisa saja menggunakannya pada ikon lainnya.
Menampilkan Font Awesome di CSS
Kita bisa menampilkan ikon pada Font Awesome di CSS. Caranya adalah lewat CSS pseudo-elements yang diletakkan pada :before (posisi di depan) atau :after (posisi di belakang).
Contohnya kita memiliki tag HTML dengan nama class quote, maka kodenya adalah seperti ini:
.quote:before {
content: “\f109”;
font-family: “Font Awesome 5 Free”;
font-weight: 900;
font-size: 20px;
display: inline-block;
margin-right: 3px;
}
Keterangan:
- Content: unicode dari Font Awesome yang wajib ditambahkan tanda backslash (\) di depannya.
- font-family: jenis font yang dipakai. Harus diisi dengan Font Awesome 5 Free.
- font-weight: harus diisi dengan 900 jika memakai font dengan jenis solid. Sedangkan untuk font regular menggunakan 400. Jenis solid atau regular ini bisa dilihat saat Anda memilih ikon.
Hasil dari kode di atas adalah seperti berikut:
Baca juga: Cara Menggunakan Github
Sekian yang dapat kami sampaikan tentang cara menggunakan Font Awesome. Anda bisa membuka dokumentasi Font Awesome untuk mempelajari lebih lanjut seputar framework CSS ini. Atau Anda juga bisa mencari tutorial lainnya di internet, baik di blog caraharian, media sosial atau Youtube.
