Bayu Abdillah: Mengenal, Memasang dan Menggunakan Font Awesome

Selasa, 25 Agustus 2015

Mengenal, Memasang dan Menggunakan Font Awesome

Pernahkah kita kebingungan mencari icon-icon untuk blog atau website? Entah yang kita cari itu icon user, icon menu, atau icon sosial media. Pokoknya, icon itu berperan cukup penting dalam mempercantik tampilan sebuah web. Jika kita mencari icon di google.com, maka kita perlu mendownload satu per satu gambar yang akan digunakan. Kalau cuma beberapa icon sih tidak masalah, tapi bagaimana kalau kita akan menggunakan puluhan icon?

Untuk itu, kali ini saya ingin mengenalkan pada kalian yang belum kenal dengan "Font Awesome". Pernah dengar tentang Font Awesome?

Singkat saja, Font Awesome adalah font icon yang dapat dipanggil menggunakan css. Font Awesome dibuat oleh Dave Gandy dalam GitHub Project. Kita dapat mengunjungi halaman resminya di http://fortawesome.github.io/Font-Awesome/

Timbul, pertanyaan. Apa aja sih yang ia bisa?

Baik-baik, kemampuan Font Awesome meliputi :

1. Satu font, tapi berisi banyak icon. Icon yang adapun saya rasa sudah cukup lengkap.
2. Tidak memerlukan sintaks JavaScript dalam pengaplikasiannya.
3. Icon menggunakan gambar Scalable Vector Graphics (SVG) sehingga kualitas gambar tetap terjaga dalam berbagai ukuran.
4. Gratis. Yang paling penting adalah... Font Awesome itu gratis.
5. Style dapat dimodifikasi menggunakan css. Seperti mengganti warna, ukuran, shadow dan apapun yang mungkin menggunakan css.
6. Cocok digunakan pada tampilan resolusi tinggi.
7. Meskipun pada awalnya dibuat untuk Bootstrap, namun tetap bisa digunakan pada semua framework.
8. Dapat digunakan pada dekstop.
9. Mudah dideteksi pada layar.

Saya anggap, kita semua sudah mengenal Font Awesome. Nah, sekarang~

Timbul, pertanyaan. Bagaimana kita menginstal atau memasang Font Awesome?

Ada beberapa cara yang bisa kita gunakan untuk memasang Font Awesome. Tapi, saya akan menjelaskan dua cara saja. Satu untuk online dan satu untuk offline.

1. Menggunakan BootstrapCDN dari MaxCDN

Ini adalah cara yang paling mudah. Tidak perlu mendownload atau menginstall apapun. Cukup menambahkan satu baris kode html di dalam tag <head> pada website kita.


<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">

Dengan satu syarat, yaitu harus online.

2. Menggunakan CSS

Kalau ini cara biasa. Di netbook saya, saya bisa menggunakan Font Awesome meskipun offline. Tapi, kadang ada icon tertentu yang tidak mau nampil dan saya kurang tahu mengapa.

Pertama, download Font Awesome di http://fortawesome.github.io/Font-Awesome/. Tekan tombol download, lalu akan muncul sebuah modalbox, tekan tombol download yang ada.

Kemudian ekstrak file zip-nya, dan copy ke dalam folder projek kita.
Lalu tambahkan font-awesome.min.css dalam tag <head> pada projek kita.


<link rel="stylesheet" href="path/font-awesome/css/font-awesome.min.css">

Pastikan path atau alamat benar, dan Font Awesome sudah terpasang.

Bagaimana menggunakan Font Awesome?

Cara menggunakannya tidak sulit kok. Cukup tambahkan class="fa fa-icon" dan atur ukuran dan warna menggunakan css. Contoh :


<!doctype html>
<html>
<head>
  <title>Contoh Font Awesome</title>
  <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
</head>
<body> 
  <a href="#" class="fa fa-ambulance" style="color:gray;font-size:100px;"></a>
</body>
</html>

Dan hasilnya adalah

Daftar icon yang bisa digunakan bisa kalian lihat pada halaman http://fortawesome.github.io/Font-Awesome/icons/

Cukup sekian yang kita pelajari tentang Font Awesome. Kalau ada pertanyaan, jangan ragu untuk bertanya. Arigatou...