Perlu menambahkan icon ke proyek web Anda dengan cepat? Berikut cara tercepat dan termudah untuk menggunakan Font Awesome di proyek berbasis web Anda (perlu diingat bahwa Anda dapat menggunakan Font Awesome dengan banyak cara lain, termasuk di desktop).
Kalimat tersebut kami cuplik dari dokumentasi font awesome. Benar sekali, icon merupakan salah satu cara membuat tampilan website lebih menarik dan lebih informatif. Tetapi seringkali, kita tidak punya waktu untuk membuatnya, bahkan jika kita ambil dari internet, ada kemungkinan icon tersebut memiliki hak cipta.
Gunakan saja font awesome! Pada versi terakhir (versi 6) ada lebih dari 33.000 icon yang tersedia untuk bisa digunakan. Mengapa perlu menggunakan font awesome?
- Gratis. Di versi gratis ada 2.000 lebih icon yang bisa digunakan secara bebas. Jika di versi pro lebih banyak lagi, 33.000 lebih icon
- Menarik. Tampilannya yang khas dan menarik, bisa dicustomize dengan css, membuat 1 jenis icon bisa tampil berbeda tergantung css yang digunakan.
- Banyak pilihan. Seperti sudah disebut diatas, ada ribuan icon yang merepresentasikan jenis – jenis aktifitas dan kategori yang berbeda.
- Ringan. Ini yang disukai, sama sekali tidak membebani website dengan loading yang lama.
- Cara Install mudah. Cukup menambahkan 1 baris di code website, anda sudah bisa menambahkn icon langsung ke website.
Cara install
Di beberapa content management system (cms), font awesome sudah include di dalamnya sehingga tinggal memasang element yang dibutuhkan. Tetapi jika tidak ada secara default, misalnya anda membuat website dari scratch, maka anda harus memasukkan code seperti berikut:
<head> <!-- our project just needs Font Awesome Solid + Brands --> <link href="/your-path-to-fontawesome/css/fontawesome.css" rel="stylesheet" /> <link href="/your-path-to-fontawesome/css/brands.css" rel="stylesheet" /> <link href="/your-path-to-fontawesome/css/solid.css" rel="stylesheet" /> </head> <body> <i class="fa-solid fa-user"></i> <!-- uses solid style --> <i class="fa-brands fa-github-square"></i> <!-- uses brand style --> </body>
Font awesome bisa dipanggil dari CDN-nya langsung sehingga tidak perlu download, atau jika ingin install di sistem yang tidak terkoneksi internet, maka anda harus download dulu dan tempatkan di salah satu folder website, selanjutnya tinggal dipanggil sesuai kode di atas.
Yang ada diantara bagian <head></head> adalah deklarasi css yang menghubungkan font-awesome dengan website anda. sementara yang ada di antara <body></body> adalah cara menampilkan font awesome di website. Contoh <i class=”fa-solid fa-user”></i> artinya menampilkan icon user dengan model solid.
Contoh ini hanya cara sederhana untuk menampilkan font awesome ke website, ada lebih banyak opsi dan lebih banyak pilihan yang bisa anda pelajari di website resminya.
