Salam semua... Pada kesempatan kali ini saya akan posting mengenai Font Awesome. Apa dan seperti apakah font awesome itu?... Mungkin diantara sobat sudah ada yang mengetahuinya, namun belum tentu semua tahu bukan?... Untuk mengetahui jawabannya sobat bisa membaca penjelasan saya mengenai font awesome di bawah ini:
Apa itu font awesome?...
Font awesome adalah sekumpulan font web yang berbentuk icon untuk antarmuka web. Dengan menggunakan icon awesome kita dapat mengubah warna serta ukuran icon dengan menggunakan css tanpa harus khawatir mengurangi kualitas icon. Sampai saat artikel ini dibuat font awesome telah sampai pada versi 4.3 dan memiliki lebih dari 500 variasi icon.
Apa kelebihan menggunakan font awesome?...
- Dengan adanya font awesome kita tidak lagi repot-repot mencari atau membuat gambar sendiri, kita hanya perlu mengetik kode font-nya saja untuk mendapat icon yang kita cari.
- Pada versi 4.3 ini kita bisa memilih 519 icon yang telah tersedia, dan tentunya kita bisa memberi warna sesuka kita serta mengatur ukuran dan menambah bayangan. Semua hal tersebut dapat kita lakukan dengan mengaturnya dengan css. Dengan kata lain, selain bentuk kita dapat memodifikasi font awesome sesuai keinginan.
- Karena font awesome berupa vector kita dapat menyesuaikannya pada resolusi tinggi maupun rendah. Karena hal ini pula kita dapat mengatur ukuran icon tanpa merusak kualitas icon itu sendiri.
Berikut adalah preview dari font awesome versi 4.3
 |
Untuk melihat lebih lengkapnya bisa mengunjungi website resminya: |
Bagaimana cara menggunakan Icon Awesome?...
Hal pertama yang harus kita lakukan adalah memasang css font awesome dibawah ini kedalam tag <head>...</head> pada HTML template sobat.
<Link href='//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css' rel='stylesheet'/>
"Jika sobat masih memakai font awesome versi lama silahkan hapus kode yang terlihat serupa dengan kode diatas."
Setelah kode css terpasang selanjutnya adalah cara menerapkan font awesome pada blog atau website. berikut adalah contoh penerapan css font awesome:
<i class="fa fa-home"></i>
Dapat kita lihat dari contoh tersebut bahwa untuk menerapkan font awesome kita dapat menggunakan tag <i></i> lalu di ikuti class dan dilanjutkan nama font. Dengan sedikit tambahan teks kita dapat menuliskan kodenya seperti ini:
<i class="fa fa-home">ini adalah home</i>
Hasil dari code tersebut akan menjadi seperti ini: ini adalah home
Untuk dasarnya seperti itu, akan tetapi kita tidak hanya dapat menggunakannya sebatas itu. Seperti yang telah saya katakan sebelumnya bahwa font awesome memiliki keunggulan yaitu selain bentuk icon kita dapat memodifikasi sesuai keinginan. Lalu modifikasi seperti apa saja yang dapat kita lakukan?...
Untuk mengetahui modifikasi apa saja yang dapat kita lakukan sobat bisa mengunjungi website resminya atau klik link berikut: http://fortawesome.github.io/Font-Awesome/examples
Okelah, sampai disini dulu penjelasan saya mengenai Icon Awesome, semoga artikel ini dapat bermanfaat bagi sobat sekalian. Thanks...