Mengenal Font Awesome dan Cara Pengunaannya


Linkdesain.com . Adakalanya kita membutuhkan icon-icon tertentu untuk mepercantik sebuah baris sub judul, menu-menu,  atau apapun itu di halaman website Anda, cara yang kita lakukan biasanya adalah mencari icon dalam bentuk gambar .png atau .gif dan mengimplemntasikan gambar tersebut sebagai icon, ini tentunya akan membutuhkan banyak gambar icon, dan dalam beberapa ukuran gambar pula,  dan tentunya kurang praktis. Font Awesome adalah cara baru dalam menampilkan icon di website atau blog anda. Kini Anda tidak perlu lagi menggunakan gambar-gambar png untuk menampilkan icon tertentu di tulisan Anda, karena cara tersebut tentunya akan kurang efektif dan efisien, font awesome sendiri adalah sekumpulan icon dalam bentuk font yang berupa vector dan scalable yang artinya dengan ukuran size berapapun  gambar icon tsb tidak akan pecah tidak seperti icon gambar lainnya, dan kelebihan lainnya mengunakan font awesome ini adalah karena icon yang berbentuk font , icon-icon yang ditampilkannyapun dapat anda custom dengan sangat mudah dengan dukungan CSS layaknya Anda mengcustom sebuah font , Anda dapat merubah warna icon, menambahkan shadow, mengubah ukuran, menambahkan efek animasi dan apapun yang dapat lakukan dengan dukungan CSS.

Kenapa Font Awesome?
Seperti yang tertulis di website Font Awesome ( fontawesome.io ) , berikut ini adalah beberapa alasan kenapa Anda harus menggunakan font awesome untuk website Anda :
1. 1 font terdiri dari lebih 400 icon
2. tidak membutuhkan javascript untuk penggunaanya
3. Infinite Scalability , Ini berarti setiap ikon yang ditampilkan akan tetap terjaga kualitas gambarnya apabila icon diperbesa dalam ukuran berapapun.
4. Free , Font Aweseome dapat Anda gunakan secara gratis , untuk proyek komersial sekalipun, Anda dapat melihat lisensi
5. CSS Control ,  mudah di styling dengan css seperti icon color, size, shadow, dan apapun yang memungkinkan dengan CSS.
6. Perfect on Retina Displays , Font Awesome icons adalah vektors, yang berarti itu akan terlihat sangat baik di tampilan dengan resolusi tinggi.
7. Plays Well with Others, font awesome dapat bekerja sangat baik dengan semua frameworks, karena memang awalnya font awesome dirancang untuk bootstrap.





Cara menggunakan Font Awesome
Untuk menggunakan font awesome pun sangat mudah , Ada beberapa cara untuk menggunakan font awesome seperti yang di jelaskan di websitentya
1. cara yang paling mudah tentunya Anda tidak perlu mendownload ataupun menginstall apapun , hanya cukup mempastekan baris kode berikut di dalam tag <head> file html anda :
<link href="//netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
kemudian menulis/memanggil class-class dari icon yang Anda ingin tampilkan.

2. Cara kedua , Anda perlu mendownload Font Awesome, meletakannya di folder project Anda dan memanggilnya di file html Anda :
<link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css">
kemudian menulis/memanggil class-class dari icon yang Anda ingin tampilkan.

untuk mencari/ melihat ikon- ikon yang anda inginkan dan mencari nama classnya untuk menampilkannya di website, anda bisa melihatnya di websitenya >> http://fontawesome.io/icons/


~hdra~

Share this

Related Posts

Previous
Next Post »

5 comments

comments
January 21, 2015 at 8:19 AM delete

mantap informasinya. cara penempatan code tersebut di blog bagaima sobat? mohon pencerahannya!

Reply
avatar
Anonymous
April 12, 2016 at 6:48 PM delete

g berhasil gmana?

Reply
avatar
April 12, 2016 at 9:31 PM delete

pengen ganti huruf-nya jadi tipe ini tapi ga bisa masih arial aja, coba deh cek di http://daftarperumahanmurah.com

Reply
avatar
Anonymous
April 13, 2016 at 6:31 AM delete

bisa kok, coba pake cara ini http://fontawesome.io/get-started/ , kalo ga begitu ngerti include font awesome di web, pake cara yang pertama aja yang EASIEST: BootstrapCDN by MaxCDN . yang paling mudah, trus ambil kode iconnya dari sini http://fontawesome.io/icons/

Reply
avatar

Komentar disini ..