Kumpulan Ikon Font Awesome Terpopuler + Kode HTML
Font Awesome adalah perpustakaan ikon berbasis CSS yang sangat populer untuk web. Kamu bisa menambahkan ikon ke blog atau website hanya dengan menyalin kode HTML-nya.
Berikut adalah artikel lengkap berisi koleksi ikon Font Awesome populer dalam bentuk daftar beserta kode HTML-nya, yang bisa langsung digunakan oleh pengunjung Blogger, WordPress, atau situs lainnya.
💡 Sebelum menggunakan, pastikan kamu sudah menyisipkan CDN Font Awesome ke dalam
<head>atau gadget HTML kamu:
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css" rel="stylesheet">
📋 Daftar Ikon + Kode HTML
Berikut daftar lengkap ikon populer:
| Ikon | Nama | Kode HTML |
|---|---|---|
| 🔍 | Pencarian | <i class="fas fa-search"></i> |
| 📂 | Folder | <i class="fas fa-folder"></i> |
| 📝 | Edit | <i class="fas fa-edit"></i> |
| 🗑️ | Hapus | <i class="fas fa-trash"></i> |
| 📧 | <i class="fas fa-envelope"></i> |
|
| 📞 | Telepon | <i class="fas fa-phone"></i> |
| 📅 | Kalender | <i class="fas fa-calendar-alt"></i> |
| 🖥️ | Komputer | <i class="fas fa-desktop"></i> |
| 💾 | Simpan | <i class="fas fa-save"></i> |
| 🔒 | Terkunci | <i class="fas fa-lock"></i> |
| 🔓 | Terbuka | <i class="fas fa-lock-open"></i> |
| ⚙️ | Pengaturan | <i class="fas fa-cog"></i> |
| ⬇️ | Unduh | <i class="fas fa-download"></i> |
| ⬆️ | Unggah | <i class="fas fa-upload"></i> |
| ⏳ | Loading | <i class="fas fa-spinner fa-spin"></i> |
| 💬 | Komentar | <i class="fas fa-comments"></i> |
| 📈 | Statistik | <i class="fas fa-chart-line"></i> |
| 📎 | Lampiran | <i class="fas fa-paperclip"></i> |
| 👤 | User | <i class="fas fa-user"></i> |
| 👥 | Users | <i class="fas fa-users"></i> |
| 🏠 | Beranda | <i class="fas fa-home"></i> |
| 📚 | Arsip | <i class="fas fa-book"></i> |
| 🌐 | Global | <i class="fas fa-globe"></i> |
| 🎓 | Pendidikan | <i class="fas fa-graduation-cap"></i> |
| 🎵 | Musik | <i class="fas fa-music"></i> |
| 📷 | Kamera | <i class="fas fa-camera"></i> |
| 🔗 | Link | <i class="fas fa-link"></i> |
| 🔍 | Pencarian Plus | <i class="fas fa-search-plus"></i> |
| 🕓 | Jam | <i class="fas fa-clock"></i> |
| 💡 | Ide | <i class="fas fa-lightbulb"></i> |
| ⚠️ | Peringatan | <i class="fas fa-exclamation-triangle"></i> |
| ✅ | Ceklist | <i class="fas fa-check-circle"></i> |
| ❌ | Salah | <i class="fas fa-times-circle"></i> |
| 🔁 | Refresh | <i class="fas fa-sync-alt"></i> |
| 📤 | Kirim | <i class="fas fa-paper-plane"></i> |
| 🔥 | Populer | <i class="fas fa-fire"></i> |
| 🧭 | Navigasi | <i class="fas fa-compass"></i> |
| 🎮 | Game | <i class="fas fa-gamepad"></i> |
| 🖼️ | Gambar | <i class="fas fa-image"></i> |
| 🧾 | Dokumen | <i class="fas fa-file-alt"></i> |
| 📰 | Berita | <i class="fas fa-newspaper"></i> |
| 🚀 | Akses Cepat | <i class="fas fa-rocket"></i> |
📌 Cara Menggunakan
-
Salin kode ikon HTML dari tabel di atas.
-
Tempelkan ke:
-
Menu tab
-
Judul postingan
-
Widget
-
Daftar menu navigasi
-
Atau tombol khusus lain di blog kamu.
-
Contoh penggunaan:
<button><i class="fas fa-comments"></i> Komentar</button>
🧩 Tips Tambahan
-
Untuk memperbesar ikon, tambahkan kelas
fa-lg,fa-2x,fa-3x, dll. Contoh:
<i class="fas fa-user fa-2x"></i>
-
Untuk rotasi atau animasi, kamu bisa tambahkan:
-
fa-spin→ berputar -
fa-pulse→ berdenyut -
fa-rotate-90,fa-rotate-180, dll.
-
🔗 Referensi Lengkap
Untuk mencari ikon lainnya, kunjungi:
🌐 https://fontawesome.com/icons
Jika kamu ingin saya bantu membuat daftar ikon khusus untuk tema tertentu seperti musik, teknologi, pendidikan, atau lainnya, tinggal beri tahu saja!
Ingin saya ubah artikel ini dalam format siap posting ke Blogger (dengan <b:section> atau layout-friendly)?
Posting Komentar