Jika Anda ingin menggunakan Icon Font Awesome ke blog Anda langkah pertama adalah memasang link dari file font-awesome.css pada template blog Anda. Selanjutnya Anda sudah bisa menggunakan berbagai pilihan ikon-ikon yang tersedia dalam fitur Font Awesome tersebut.
Berikut ini salah satu contoh link Font Awesome yang bisa Anda pakai :
ikon normal
ikon diputar 90 derajat
ikon diputar 180 derajat
ikon diputar 270 derajat
ikon dibalik secara horizontal
ikon dibalik secara vertikal
icon-twitter di atas icon-check-empty
icon-flag di atas icon-circle
Berikut ini salah satu contoh link Font Awesome yang bisa Anda pakai :
<link href='//netdna.bootstrapcdn.com/font-awesome/3.1.1/css/font-awesome.min.css' rel='stylesheet'/>
Cara Menggunakan Font Awesome
Untuk menggunakan Font Awesome, sobat harus menambahkan tag<i> kemudian class nya gunakan nama icon.Cara penggunaannya:
<i class="icon-google-plus-sign"></i>
<i class="icon-html5"></i>
Memperbesar Ukuran
<i class="icon-google-plus-sign"></i> <i class="icon-google-plus-sign icon-large"></i> <i class="icon-google-plus-sign icon-2x"></i> <i class="icon-google-plus-sign icon-3x"></i> <i class="icon-google-plus-sign icon-4x"></i>
Bordered & Pulled Icons
Gunakan kode pull-right atau pull-left untuk disimpan di kanan atau dikiri, dan icon-border untuk membuat kotak diluar icon bendera. Ini hanya sekedar contoh, untuk lebih variatif silahkan dicoba sendiri.<i class="icon-flag icon-3x pull-left icon-border"></i>Gunakan kode pull-right atau pull-left untuk disimpan di kanan atau dikiri, dan icon-border untuk membuat kotak diluar icon bendera. Ini hanya sekedar contoh, untuk lebih variatif silahkan dicoba sendiri.
<i class="icon-quote-left icon-4x pull-left icon-muted"></i>
Animated Spinner
Untuk membuat ikon berputar, seperti animasi loading gunakan kode icon-spin bagus digunakan pada icon-spinner dan icon-refresh<i class="icon-spinner icon-spin icon-2x"></i>
Rotated & Flipped
Ikon juga dapat diputar dengan menentukan derajat putaran, juga bisa dibalik secara vertikal atau horizontal.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-shield"></i> ikon normal <i class="icon-shield icon-rotate-90"></i> ikon diputar 90 derajat <i class="icon-shield icon-rotate-180"></i> ikon diputar 180 derajat <i class="icon-shield icon-rotate-270"></i> ikon diputar 270 derajat <i class="icon-shield icon-flip-horizontal"></i> ikon dibalik secara horizontal <i class="icon-shield icon-flip-vertical"></i> ikon dibalik secara vertikal
Stacked Icons
Ikon juga dapat ditumpuk, Gunakan kode icon-stack sebelum tag ikon, dan kode icon-stack-base sebagai background / di bawah.icon-twitter di atas icon-check-empty
icon-flag di atas icon-circle
<span class="icon-stack"> <i class="icon-check-empty icon-stack-base"></i><i class="icon-twitter"></i></span><span style="margin-left: 8px;">icon-twitter di atas icon-check-empty </span> <span class="icon-stack"> <i class="icon-circle icon-stack-base"></i><i class="icon-flag icon-light"></i></span><span style="margin-left: 8px;">icon-flag di atas icon-circle </span>
Button
Icon juga dapat diterapkan pada button / tombol.<ul class="button"> <li><a class="btn1" href="#"><i class="icon-repeat"></i> Reload</a></li> <li><a class="btn2" href="#"><i class="icon-shopping-cart icon-large"></i> Checkout</a></li> <li><a class="btn2" href="#"><i class="icon-info-sign"></i> Info</a></li> <li><a class="btn1" href="#"><i class="icon-trash icon-large"></i> Delete</a></li> </ul>