Kustomisasi Icon Font Awesome (Part 1)

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.