Halo para seniman yang budiman! Selamat datang kembali! Pada kesempatan kali ini, saya ingin membagikan koleksi fontawesome-pro-v6.7.0 yang telah saya kumpulkan melalui proses web scraping. Saya telah mengidentifikasi dan mengumpulkan file-file style, JavaScript dan lain-lain, langsung dari sumber resminya. Semua file ini telah saya rangkum dalam satu branch di GitHub.
Jika ada kekurangan atau file yang perlu ditambahkan, jangan ragu untuk melakukan fork dan mengajukan pull request. Mari kita kolaborasikan bersama demi hasil yang lebih baik! 😊
Link Demo: Fontawesome
1. Deskripsi #
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.
2. Cara Penggunaan #
Tambahkan CSS ke dalam Tag <head>
#
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">
3. Fitur Utama #
a. Animasi Ikon #
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)
b. Pengelompokan Gaya #
Pengguna dapat memilih gaya ikon melalui dropdown:
- Solid
- Light
- Regular
- Thin
c. Navigasi Tab #
- All: Menampilkan semua ikon.
- Brands: Menampilkan ikon yang terkait dengan merek (seperti logo perusahaan).
d. Pagination #
Pengguna dapat membatasi jumlah ikon yang ditampilkan pada satu halaman untuk menghindari terlalu banyak informasi.
4. Dukungan Animasi #
Rotasi Ikon (Rotating Icons) #
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 (Beating Icons) #
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 (Bouncing Icons) #
Ikon melompat seperti bola memantul:
<i class="fa-solid fa-basketball fa-bounce"></i>
Ikon Memudar (Fading Icons) #
Ikon memudar secara halus:
<i class="fa-solid fa-star fa-fade"></i>
Ikon Membalik (Flipping Icons) #
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 (Shaking Icons) #
Ikon bergoyang seperti gemetar:
<i class="fa-solid fa-bell fa-shake"></i>
Ikon Berputar (Spinning Icons) #
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>
5. Kesimpulan #
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!