Apa itu Font Awesome

fontawesome

Font Awesome adalah sekumpulan vector icon yang dapat dengan mudah di edit dari mulai ukuran, warna, drop shadow dan apapun yang bisa dilakukan menggunakan CSS. Dengan menggunakan font awesome kita bisa mendapatkan icon yang menarik tanpa mengetikan tag img atau me-load icon dari file gambar atau tipe lainnya. Cukup dengan menuliskan tag html dengan class name tertentu kita sudah dapat menggunakan icon yang sudah tersedia di font awesome.

Keuntungan jika menggunakan Font Awesome

Ada beberapa keuntungan yang bisa kita dapatkan jika kita menggunakan Font Awesome ini, yaitu melalui Font Awesome ini kita bisa mendapatkan 519 icon didalamnya, tidak memerlukan java script untuk menggunakannya, fleksibilitas ukuran dari ukuran kecil sampai ukuran yang sangat besar, gratis, mudah mengimplementasikan edit ukuran, warna menggunakan css control, sudah support retina display, mudah mengintegrasikan dengan framework html lainnya. Font Awesome adalah icon yang berupa font jadi sangat fleksibel untuk merubah ukuran, warna dan efek css lainnya, keuntungan lainnya adalah karena berupa font otomatis Font Awesome akan lebih cepat diload daripada me-load icon yang berupa image.

Untuk menggunakan Font Awesome ini pada sebuah website, yang perlu kita lakukan adalah me-load file font-awesome.css pada tag HEAD file html kita, untuk lebih jelasnya silahkan lihat code dibawah ini

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

Pada code diatas halaman website akan me-load font-awesome.min.css yang ada di BootstrapCDN, dengan begitu kita akan selalu menggunakan latest dan versi yang stabil dari Font Awesome ini. Setelah itu kita tinggal mengimplementasikan Font Awesome ini pada website kita, caranya sangatlah sederhana yakni dengan menuliskan code seperti dibawah ini

<!-- Basic Icon Size -->
<i class="fa fa-camera-retro"></i>
<i class="fa fa-camera-retro fa-lg"></i> fa-lg
<i class="fa fa-camera-retro fa-2x"></i> fa-2x
<i class="fa fa-camera-retro fa-3x"></i> fa-3x
<i class="fa fa-camera-retro fa-4x"></i> fa-4x
<i class="fa fa-camera-retro fa-5x"></i> fa-5x

Contoh diatas merupakan contoh untuk me-load icon “fa-camera-retro” pada file htmlnya, silahkan lihat daftar font dibawah ini yang ada pada versi terakhir Font Awesome ini.

fontawesome-icon

Untuk melihat daftar lengkap icon yang bisa dibuat menggunakan Font Awesome silahkan kunjungi halaman Font Awesome Icon List

Font Awesome ini memiliki dokumentasi yang sangat mudah untuk dibaca bahkan untuk para pemula, silahkan lihat beberapa contoh implementasi penggunaan Font Awesome ini

Dengan menggunakan Font Awesome ini kita bisa menghemat penggunaan icon untuk beberapa bagian seperti menu dan icon detail yang biasa kita gunakan pada pembuatan sebuah website.

Gimana apakah anda tertarik untuk menggunakan Font Awesome ini pada project anda berikutnya?