Kustomisasi Icon Font Awesome (Part 1)
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4gfBgRNm15QlM0jKZ9TJ7YnViRLqvF469F1UsmUhtzSZDUyYzZxLkKLSrFvVsX_8wqDvfHf9Gf0udsrDI5WEpOLOHnrW9WPSlleZObWQO4BKjGTWy4P2fUXQodcwnTQsGrTMrQdv8zIA/s400/font-awesome.webp)
Pada postingan sebelumnya kita sudah mengetahui bagaimana cara untuk menggunakan icon dari Font Awesome, maka pada postingan kali ini saya akan mencoba untuk berbagi bagaimana cara untuk kustomisasi icon Font Awesome. Kustomisasi yang dimaksud di sini adalah mengubah icon sesuai dengan gaya yang kita inginkan. Kita bisa mengubah ukuran ikon, mengubah warna icon, merotasi icon, menggabungkan icon, dan memberikan beberapa efek sederhana pada icon.
Berikut ini saya jelaskan satu persatu disertai dengan contohnya.
1. Mengubah ukuran icon Font Awesome
Secara default ukuran icon yang kita sisipkan akan menyesuaikan dengan ukuran font pada CSS. Untuk mengubah ukuran icon yang kita buat, Font Awesome menyediakan beberapa class yang bisa kita letakkan di belakang class nama ikon. Class yang tersedia adalah sebagai berikut:
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 penggunaan:
<i class="fas fa-address-book fa-xs"></i>
<i class="fas fa-address-book fa-sm"></i>
<i class="fas fa-address-book fa-lg"></i>
<i class="fas fa-address-book fa-2x"></i>
<i class="fas fa-address-book fa-3x"></i>
<i class="fas fa-address-book fa-4x"></i>
Hasilnya adalah sebagai berikut:
2. Mengubah warna icon Font Awesome
Untuk mengubah warna icon cukup dengan menambahkan style dalam tag span atau tag lainnya.
Contoh Penggunaan:
<span style="color:green">
<i class="fas fa-address-book fa-3x"></i>
</span>
<span style="color:red">
<i class="fas fa-home fa-3x"></i>
</span>
Hasilnya adalah sebagai berikut:
3. Merotasi/memutar icon Font Awesome
Untuk merotasi icon kita bisa menggunakan class berikut:
Class | Rotation Amount |
fa-rotate-90 | 90° |
fa-rotate-180 | 180° |
fa-rotate-270 | 270° |
fa-flip-horizontal | mirrors icon horizontally |
fa-flip-vertical | mirrors icon vertically |
fa-flip-both | mirrors icon vertically and horizontally (requires 5.7.0 or greater) |
Contoh Penggunaan:
<div style="font-size: 30px;">
<i class="fas fa-address-book fa-rotate-90"></i>
<i class="fas fa-address-book fa-rotate-180"></i>
<i class="fas fa-address-book fa-rotate-270"></i>
<i class="fas fa-address-book fa-rotate-horizontal"></i>
<i class="fas fa-address-book fa-rotate-vertical"></i>
<i class="fas fa-address-book fa-rotate-both"></i>
</div>
Hasilnya adalah sebagai berikut:
4. Menggabungkan beberapa icon menjadi satu
Untuk menggabungkan beberapa icon menggunakan class fa-stack.
Contoh Penggunaan:
Misalnya menggabungkan antara icon lingkaran dengan icon home menjadi satu icon.
<span class="fa-stack fa-2x">
<i class="fas fa-circle fa-stack-2x"></i>
<i class="fas fa-home fa-stack-1x fa-inverse"></i>
</span>
Sementara sampai di sini untuk tutorial kali ini, kustomisasi lainnya akan saya bahas pada postingan berikutnya.
Terima kasih.
Post a Comment for "Kustomisasi Icon Font Awesome (Part 1)"
Mohon untuk memberikan komentar yang baik dan membangun