Cara Menggunakan Icon Font Awesome | LENGKAP
Cara menggunakan Icon Font Awesome pada situs web atau blog sangat mudah dan praktis, sebelumnya pastikan kamu sudah memasang framework Font Awesome.
Cara Mudah dan Praktis Menggunakan Font Awesome
Terdapat dua cara untuk menggunakan Font Awesome yaitu melalui HTML atau CSS, untuk implementasinya kamu harus mencari nama atau kode icon Font Awesome pada alamat berikut.
Versi 4.7.0 Icon Font Awesomehttps://fontawesome.com/v4.7.0/icons/https://fontawesome.com/iconsMenggunakan Font Awesome Melalui HTML
Menggunakan Font Awesome melalui HTML cukup mudah dan praktis namun mungkin berbeda pada versi tertentu. Misalnya untuk versi stabil 4.7.0 menggunakan tag HTML berikut.
<i class="fa fa-instagram"></i>Sedangkan untuk versi terbaru (Font Awesome versi 5 keatas) seperti berikut.
<i class="fas fa-instagram"></i>Kode HTML diatas akan menampilkan icon seperti ini :
UKURAN
Untuk mengubah ukuran Icon Font Awesome melalui HTML kamu bisa menggunakan tag berikut di dalam tag <i>.
| Class | Size |
|---|---|
| fa-xs | .75em |
| fa-sm | .875em |
| fa-lg | 1.33em |
| fa-2x | 2em |
| fa-3x | 3em |
| fa-4x | 4em |
| fa-5x | 5em |
| fa-6x | 6em |
| fa-7x | 7em |
| fa-8x | 8em |
| fa-9x | 9em |
| fa-10x | 10em |
Contoh :
<i class="fa fa-instagram fa-2x"></i><i class="fa fa-instagram fa-3x"></i><i class="fa fa-instagram fa-4x"></i><i class="fa fa-instagram fa-5x"></i>Hasilnya :
Selain menggunakan tag dari Font Awesome untuk mengubah ukurannya, kita juga bisa mengubahnya melalui inline CSS pada HTML. Contoh :
<i class="fa fa-instagram" style="font-size:2em;"></i>WARNA
Cara mengubah warna icon Font Awesome melalui HTML sama seperti mengubah warna font biasa dengan inline CSS pada HTML. Contoh :
<i class="fa fa-instagram" style="color:#4285F4;"></i>Hasilnya :
Menggunakan Font Awesome Melalui CSS
Menggunakan Font Awesome melalui CSS biasanya diterapkan pada :before atau :after, untuk penggunaannya sama seperti CSS pada umumnya. Hanya saja ada beberapa elemen yang harus diperhatikan.
Contoh :
Font Awesome Versi 4.7.0 kebawah.azzah:before {content: "\f16d";font-family: fontawesome;}.azzah:before {content: "\f16d";font-family: "Font Awesome 5 Free";}
- content: "\f16d" (Sesuaikan dengan kode yang icon Font Awesome).
- font-family: fontawesome atau "Font Awesome 5 Free" (Sesuaikan dengan versi Font Awesome).
- Kamu bisa menambahkan style lain di bawahnya seperti css pada umumnya.
Hal penting yang harus diperhatikan adalah versinya, pastikan class fa atau fas dll sesuai dengan versi Font Awesome yang kamu pasang. Untuk selengkapnya silakan dilihat pada https://fontawesome.com
