Font Awesome Icon adalah Kumpulan icon-icon yang berbasis atau terbuat dari "
Font". Yang berarti Icon tersebut tidak terbuat dari "
Gambar" dan pastinya akan mempercepat load blog. /hehe
Untuk menerapkannya di blog, Pertama tambahkan kode dibawah ini diatas kode
<head><link href="//netdna.bootstrapcdn.com/font-awesome/3.1.1/css/font-awesome.css" rel="stylesheet"/>
Untuk melihat semua nama "
Font" yang dapat digunakan silahkan ke sini.
Cara penggunaan-nya anda cukup menambahkan tag
<i>,
class dan nama "
font".
Cara Penulisan-nya
<i class="icon-smile"></i> Cara Penulisan-nya
Ikon Kamera
<i class="icon-camera-retro"></i> Ikon Kamera
Memperbesar ukuran
ICON.
Normal
2x Lebih besar
3x Lebih besar
4x Lebih besar
5x Lebih besar
<i class="icon-smile"></i> Normal
<i class="icon-smile icon-large"></i> 2x Lebih besar
<i class="icon-smile icon-2x"></i> 3x Lebih besar
<i class="icon-smile icon-3x"></i> 4x Lebih besar
<i class="icon-smile icon-4x"></i> 5x Lebih besar
Icon-Icon tersebut juga dapat diputar, dengan menentukan derajat putaran.
ikon normal
ikon diputar 90 derajat
ikon diputar 180 derajat
ikon diputar 270 derajat
ikon dibalik secara horizontal
ikon dibalik secara vertikal
<i class="icon-home"></i> ikon normal
<i class="icon-home icon-rotate-90"></i> ikon diputar 90 derajat
<i class="icon-home icon-rotate-180"></i> ikon diputar 180 derajat
<i class="icon-home icon-rotate-270"></i> ikon diputar 270 derajat
<i class="icon-home icon-flip-horizontal"></i> ikon dibalik secara horizontal
<i class="icon-home icon-flip-vertical"></i> ikon dibalik secara vertikal
Icon Tersebut juga bisa anda gunakan pada tombol/button blog.
<a class="tombol" href="#"><i class="icon-comment"></i> Comment</a>
<a class="tombol" href="#"><i class="icon-info-sign"></i> Info</a>
<a class="tombol" href="#"><i class="icon-trash icon-large"></i> Delete</a>
<a class="tombol" href="#"><i class="icon-cog"></i> Settings</a>
Untuk tutor lengkap-nya silahkan ke sini :
http://blog.kangismet.net/2013/06/cara-menggunakan-ikon-font-awesome-di.html
