Demo: Fontawesome
Aplikasi ini adalah alat untuk mencari dan menampilkan ikon dari Font Awesome versi 6.7.0. Fitur ini dirancang untuk membantu pengguna memilih ikon yang sesuai untuk proyek mereka dengan kemudahan navigasi dan pencarian. Aplikasi ini mendukung:
- Menampilkan ikon dari kategori Pro dan Free secara gratis.
- Pencarian ikon berdasarkan nama menggunakan fitur pencarian instan.
- Pemilihan gaya ikon, seperti:
LightRegularSolidThin
- Navigasi antar tab untuk membedakan ikon:
- All: Menampilkan semua ikon.
- Brands: Menampilkan ikon khusus untuk merek.
- Pagination untuk membatasi jumlah ikon yang ditampilkan per halaman, memberikan pengalaman navigasi yang lancar.
Untuk menggunakan ikon dan mendukung berbagai gaya serta animasi, tambahkan kode berikut ke dalam tag <head> di file HTML Anda:
<link rel="stylesheet" href="css/all.css">
<link rel="stylesheet" href="css/pro.min.css">
<link rel="stylesheet" href="css/sharp-duotone-thin.css">
<link rel="stylesheet" href="css/sharp-duotone-solid.css">
<link rel="stylesheet" href="css/sharp-duotone-regular.css">
<link rel="stylesheet" href="css/sharp-duotone-light.css">
<link rel="stylesheet" href="css/sharp-thin.css">
<link rel="stylesheet" href="css/sharp-solid.css">
<link rel="stylesheet" href="css/sharp-regular.css">
<link rel="stylesheet" href="css/sharp-light.css">
<link rel="stylesheet" href="css/duotone-thin.css">
<link rel="stylesheet" href="css/duotone-regular.css">
<link rel="stylesheet" href="css/duotone-light.css">
<link rel="stylesheet" href="css/woff2.css">Aplikasi ini mendukung animasi bawaan dari Font Awesome. Pengguna dapat menerapkan efek animasi berikut:
- Rotasi (Rotate)
- Berputar (Spin)
- Gemetar (Shake)
- Memudar (Fade)
- Melompat (Bounce)
- Berdetak (Beat)
- Flip (Membalik)
Pengguna dapat memilih gaya ikon melalui dropdown:
- Solid
- Light
- Regular
- Thin
- All: Menampilkan semua ikon.
- Brands: Menampilkan ikon yang terkait dengan merek (seperti logo perusahaan).
Pengguna dapat membatasi jumlah ikon yang ditampilkan pada satu halaman untuk menghindari terlalu banyak informasi.
Ikon dapat diputar pada sudut tertentu:
<i class="fa-solid fa-seedling fa-rotate-90"></i>
<i class="fa-solid fa-seedling fa-rotate-180"></i>
<i class="fa-solid fa-seedling fa-rotate-270"></i>Ikon berdetak seperti jantung:
<i class="fa-solid fa-heart fa-beat"></i>
<i class="fa-solid fa-heart-circle-bolt fa-beat-fade"></i>Ikon melompat seperti bola memantul:
<i class="fa-solid fa-basketball fa-bounce"></i>Ikon memudar secara halus:
<i class="fa-solid fa-star fa-fade"></i>Ikon dapat dibalik:
<i class="fa-solid fa-arrows-rotate fa-flip"></i>
<i class="fa-solid fa-arrow-right fa-flip-horizontal"></i>
<i class="fa-solid fa-arrow-up fa-flip-vertical"></i>Ikon bergoyang seperti gemetar:
<i class="fa-solid fa-bell fa-shake"></i>Ikon berputar secara terus-menerus:
<i class="fa-solid fa-circle-notch fa-spin"></i>
<i class="fa-solid fa-circle-notch fa-spin-reverse"></i>
<i class="fa-solid fa-spinner fa-spin-pulse"></i>Untuk dokumentasi dalam bahasa Inggris, silakan lihat file berikut:
📂 docs/README-EN.md
Aplikasi ini menyediakan solusi lengkap untuk mengakses ikon Pro Font Awesome secara gratis. Dengan fitur pencarian, navigasi tab, animasi bawaan, dan pengaturan gaya, pengguna dapat dengan mudah menemukan dan menampilkan ikon yang sesuai untuk kebutuhan desain mereka.
🎉 Selamat mencoba! Pastikan Anda memanfaatkan fitur ini untuk meningkatkan produktivitas dan estetika proyek Anda!