FontAwesome Icons & UI Docs
Panduan lengkap penggunaan font ikon FontAwesome v7.3.1 Pro. Seluruh style keluarga ikon (Solid, Regular, Light, Thin, Duotone, Sharp, Brands) didukung penuh tanpa dependensi eksternal.
Keluarga Style (Prefix Guide)
FontAwesome 7 menyediakan fleksibilitas bobot dan gaya visual yang dapat dipadukan secara harmonis.
Solid (Classic)
Tampilan tegas dan solid untuk aksi utama dan menu.
Regular (Outline)
Garis proporsional yang bersih dan rapi untuk status netral.
Light & Thin
Garis halus minimalis untuk interface modern dan lapang.
Duotone Pro
Dua layer warna dinamis yang mendukung custom warna.
Sharp Family
Ujung tajam geometris (90-degree corners) tanpa rounded.
Brands Icons
Logo resmi GitHub, Google, Tailwind, dan ratusan brand lainnya.
Sharp Duotone
Perpaduan dua layer warna dengan gaya geometris presisi.
Varian Eksperimental
Gaya artistik baru: chisel, jelly, mosaic, pixel, slab, dll.
Katalog Ikon Populer (Klik untuk Salin)
Gunakan kotak pencarian atau filter kategori untuk menemukan ikon.
Ukuran Ikon (Sizing)
Gunakan class ukuran bawaan FontAwesome atau utility Tailwind seperti text-base, text-xl.
<i class="fa-solid fa-cube fa-sm"></i>
<i class="fa-solid fa-cube fa-lg text-brand-500"></i>
Fixed Width (fa-fw)
Wajib digunakan pada daftar menu vertikal agar teks sejajar rapi tanpa bergeser.
<i class="fa-solid fa-gauge-high fa-fw"></i> Dashboard
<i class="fa-solid fa-gear fa-fw"></i> Pengaturan
Animasi & Loading
Cocok untuk tombol aksi proses asinkron dan indikator memuat data.
<button class="btn btn-primary"><i class="fa-solid fa-circle-notch fa-spin"></i> Memproses...</button>
Rotasi & Flip
Mengubah orientasi ikon tanpa perlu file SVG terpisah.
<i class="fa-solid fa-shield fa-rotate-90"></i>
<i class="fa-solid fa-shield fa-flip-horizontal"></i>
Duotone Color Customizer (Realtime Playground)
Ubah variabel CSS Duotone untuk melihat perubahan warna layer primer & transparansi layer sekunder secara langsung.
Implementasi pada Komponen UI Kit
Contoh integrasi ikon FontAwesome dalam elemen formulir, tombol, badge, dan kartu ringkasan.
Pada Tombol (Buttons)
<button class="btn btn-primary rounded-xl">
<i class="fa-solid fa-plus"></i> Tambah Data
</button>
Pada Form Input Groups
<div class="relative">
<i class="fa-solid fa-envelope absolute left-3.5 top-1/2 -translate-y-1/2 text-slate-400"></i>
<input class="pl-10 ..."/>
</div>
Pada Badge & Status
<span class="inline-flex items-center gap-1.5 px-3 py-1 rounded-full bg-emerald-500/10 text-emerald-500">
<i class="fa-solid fa-circle-check"></i> Selesai
</span>
Pada Kartu Ringkasan (Stat Card)
Total Transaksi
Rp 128.450.000
+14.8% bulan ini<div class="w-12 h-12 rounded-2xl bg-brand-500/10 text-brand-500 flex items-center justify-center">
<i class="fa-solid fa-wallet text-xl"></i>
</div>