Untuk cara penggunaannya pun sangat mudah, kita bisa menggunakan css classnya ataupun Unicode dari font tersebut untuk menampilkan icon yang kita suka.
Berikut ini adalah contoh icon yang dibuat menggunakan font awesome:
Cara menggunakan font awesome pada blog dan web
Untuk menggunakan font awesome pada blog atau web kamu langkah pertama yang harus kamu lakukan adalah memasangkan code css font awesome.Letakan script berikut di bawah code <head>
<link href='https://netdna.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css' rel='stylesheet'/>Setelah meletakan script tersebut font awesome sudah terinstalasi pada blog kamu, yang perlu kamu lakukan sekarang adalah menggunakan font awesome pada blogmu.
Bagaimana cara menggunakan font awesome?
Untuk cara penggunaannya sebenarnya sangat sederhana kamu tinggal mengganti font dari element tersebut dengan font awesome. Kamu hanya perlu mengaturnya dengan menggunakan css code "font-family: FontAwesome;".Contohnya seperti ini:
Tanpa fontawesome: <b>Halo</b><br/>
Menggunakan fontawesome: <b style='font-family:FontAwesome'>Halo</b>
Dan untuk mempermudahnya kamu bisa langsung menggunakan css class yang sudah ada dalam css fontawesome tersebut. sehingga kamu hanya perlu menambahkan class='fa' pada element tersebut.
Contoh:
<b class='fa'>Halo</b>Lalu bagaimana cara menggunakan icon dari fontawesome?
Untuk menggunakan icon dari fontawesome ini kamu harus melihat list atau cheet sheet icon yang ada pada fontawesome ini terlebih dahulu.
Cheet sheet fontawesome bisa kamu lihat disini atau di website fontawesome.
Untuk pemasangannya kamu pilih salah satu icon yang ingin kamu gunakan, lalu copy css namenya(seperti gambar diatas).
contoh: misalnya kamu ingin menggunakan icon rumah(home), lihat pada cheet sheet lalu salin css namenya.
Letakan pada element css seperti ini:
<b class='fa fa-home'> Halo Djas</b>Mudahkan? Dengan menggunakan font awesome tampilan blog kita akan terlihat lebih elegant seperti website profesional.
0 Komentar Untuk "Tampilan Elegan dan Menarik dengan Flat Icon Fontawesome"
Post a Comment