Menampilkan Font Awesome di HTML, Simpel!

Bagi seorang front end developer terkadang dalam mempercantik tampilan web membutuhkan pemanis berupa icon. Dengan adanya icon maka tampilan web akan memberi visualisasi lebih segar dan tentunya lebih indah. Namun masalahnya adalah, membuat icon di web itu bukan sebuah hal yang gampang. Perlu skill khusus untuk mendesign icon web dengan cantik.

supaya menghasilkan icon web cantik dan tidak pasaran tentu kita harus mendesainnya sendiri. Namun bagaimana dengan icon web standar yang memang selalu digunakan. Haruskah kita membuatnya juga satu persatu? tentu saja tidak, jika kita bisa menggunakan tools yang satu ini untuk mempermudah kerja kita, yaitu Font Awesome.

Pengenalan Font Awesome

Font Awesome adalah font yang berisi icon-icon yang telah dimuat menjadi [framework] (https://en.wikipedia.org/wiki/Framework) css yang bisa digunakan untuk mempermudah menampilkan icon web standar dalam front end development. Font Awesome dibuat oleh Dave Gandy, dan saat ini font awesome rilis terbaru yaitu versi 6.2.0.

Font awesome versi 6.2.0 rilis pada November 2023. Jika kalian ingin menggunakan Font Awesome versi terbaru, kalian dapat install web Font Awesome di sini. Kalian dapat mempelajari lebih lanjut tentang Font Awesome 6.2.0 di changelog.

Baca Juga : Framework adalah Bahasa pemrograman Baru?

Fitur Baru Font Awesome 6.2.0

Versi Font awesome 6.2.0 ini membawa beberapa perubahan dan fitur baru. Future Bari font awesome 6.2.0 antara lain:

1. 100+ ikon baru, termasuk ikon untuk mata uang baru, teknologi, dan budaya.
2. Peningkatan performa, dengan pengurangan ukuran file dan waktu muat yang lebih cepat.
3. Dukungan untuk Unicode 15, yang menambahkan emoji baru dan karakter lainnya.
4. Perbaikan aksesibilitas, dengan label ARIA yang lebih baik dan nama ikon yang lebih deskriptif.
5. Peningkatan dokumentasi, dengan panduan yang lebih jelas dan contoh kode.

Pada versi terbaru Font Awesome 6.2.0, terdapat total ada 30.013 icon yang siap digunakan. Untuk rincian font awesome 6.2.0 rilis ternary yaitu:

1. Terdapat 2.037 icon gratis tersedia untuk digunakan oleh siapa saja.
2. Serta ada 3.30.013 icon Pro tersedia untuk pengguna yang berlangganan Font Awesome.

Kategori Font Awesome

Icon font awesome ini dikategorikan ke dalam beberapa kategori, seperti aksesibilitas, merek, bisnis, komunikasi, desain dan masih banyak lainnya. Beberapa font awesome lainnya meliputi editor, elektronik, keuangan, kesehatan, rumah dan media.

Baca Juga: Kumpulan Ikon Terbaik Desain Web

Kalian dapat menjelajahi semua icon yang tersedia di situs web Font Awesome di sini. Sebenarnya Font Awesome di desain untuk Bootstrap , namun masih cocok di gunakan untuk framework yang lainnya. Karena Font Awesome merupakan vektor, jadi kamu ngga perlu takut menggunakan size besar dan khawatir tampilannya akan rusak jika di gunakan pada size yang besar.

Penggunaan font awesome sangat mudah sekali, kita hanya perlu menyimpan kode berikut pada header kita:

Kemudian memanggil icon yang ingin kita gunakan dengan cara seperti berikut:

Tips Font Awesome

1. Kalian dapat menggunakan filter di situs web Font Awesome untuk menemukan icon yang kalian cari berdasarkan kategori, nama, atau tag.
2. Kalian dapat mengunduh ikon individual atau seluruh set ikon dalam berbagai format.
3. Kalian dapat menggunakan Font Awesome Pro untuk mengakses icon eksklusif, fitur tambahan, dan dukungan premium.

Catatan: Versi Versi 5.15.4 dari Font Awesome masih tersedia dan didukung, dan mungkin merupakan pilihan yang lebih baik untuk beberapa proyek. Versi 5.x memiliki lebih banyak kompatibilitas dengan browser dan perangkat yang lebih lama, dan mungkin lebih mudah di gunakan jika Anda tidak memerlukan fitur baru di font awesome versi 6.x.

Semoga membantu dan see you.