Font Awesome adalah sekumpulan vector icon yang dapat dengan mudah di edit dari ukuran, warna, drop shadow dan apa sahaja yang boleh dilakukan menggunakan CSS. Dengan menggunakan font awesome kita boleh mendapatkan icon yang menarik tanpa menggunakan tag img atau load icon dari file gambar. Cukup dengan memasukkan 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 boleh kita dapatkan jika kita menggunakan Font Awesome ini,- Terdapat 585 icon didalamnya dan akan bertambah dari masa ke semasa,
- Tidak memerlukan javascript untuk menggunakannya,
- Fleksibiliti ukuran dari ukuran kecil sehingga ukuran yang sangat besar,
- Mudah mengimplementasikan edit ukuran dan warna menggunakan css control,
- Mudah mengintegrasikan dengan framework html lainnya.
- Sangat fleksibel untuk merubah ukuran, warna dan efek css lain,
- Lebih cepat diload daripada load icon image.
Cara Menggunakannya
Untuk menggunakan Font Awesome ini pada sebuah website, yang perlu kita lakukan adalah load file font-awesome.css pada tag HEAD file html kita, untuk lebih jelasnya sila lihat code dibawah ini
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
Pada code di atas, halaman website akan load font-awesome.min.css yang ada di BootstrapCDN. Dengan cara ini, kita akan selalu menggunakan latest dan versi yang stabil dari Font Awesome. Setelah itu, kita akan mengimplementasikan Font Awesome ini pada website kita, caranya sangatlah mudah dengan menuliskan code seperti dibawah iniHasilnya adalah seperti berikut<!-- 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 Lain
Untuk melihat secara lengkap icon yang boleh dibuat menggunakan Font Awesome sila kunjungi halaman Font Awesome Icon List
--------------------------------------------------------------------------------------------
Disediakan Oleh : Marzuki bin Ahmad
Sumber :
0 comments:
Post a Comment