Menampilkan icon font awesome

Bagi seorang Front-End Web Developer terkadang untuk mempercantik tampilan sebuah tampilan web membutuhkan pemanis berupa icon. Dengan adanya icon-icon akan membuat visualisasi dari sebuah web menjadi tampak lebih segar dan tentunya lebih indah. Namun masalahnya adalah, membuat icon itu bukan sebuah hal yang gampang. Diperlukan skill khusus untuk mendesign icon.

Untuk icon khusus yang merupakan ciri khas dari sebuah produk atau brand, tentu kita harus mendesainnya sendiri. Namun bagaimana dengan icon-icon standar yang memang selalu digunakan? Haruskah kita membuatnya juga satu persatu? Jawabannya tentu saja tidak, kita bisa menggunakan tools yang satu ini untuk mempermudah kerja kita, Font Awesome.

Font Awesome merupakan font yang berisi icon-icon yang telah dimuat menjadi framework css yang bisa digunakan untuk mempermudah menampilkan icon-icon standar dalam front-end development. Font Awesome dibuat oleh Dave Gandy, dan saat ini sudah versi 4.1.0 dan bisa didownload disini. Versi sebelumnya 3.2.1 juga masih bisa digunakan dan didownload disini. Dan jika kamu mau berkontribusi dan ingin melihat projectnya bisa ke Githubnya disini.

Ada 439 jenis icon yang ada di Font Awesome 4.1.0 yang siap untuk digunakan. Untuk melihat icon apa saja yang bisa kita gunakan bisa Kamu lihat disini. Sebenarnya Font Awesome didisain untuk Bootstrap, namun masih oke digunakan untuk framework yang lainnya. Karena Font Awesome merupakan vektor, jadi Kamu nggak perlu takut menggunakan size besar dan

khawatir tampilannya akan rusak jika digunakan pada size yang besar.

Penggunaannya santa mudah sekali, kita hanya perlu menyimpan kode berikut pada header kita:

<link href="//netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">

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

<i class="fa fa-heart"></i>


<i class="fa fa-home"></i>


<i class="fa fa-flag"></i>

Maka akan tampil seperti berikut:

  

Kamu juga bisa memperlakukannya seperti font pada umumnya dengan memberi warna pada iconnya atau pada backgroundnya. Ingin tahu lebih detail cara penggunaanya kamu bisa mengunjungi linkhttp://fortawesome.github.io/Font-Awesome/get-started dan untuk melihat berbagai contoh penggunaannya dihttp://fortawesome.github.io/Font-Awesome/examples

Selamat bersenang-senang.. :D