Cara memasang font awesome dan cara menggunakannya

. 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
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.

Masuk ke Dasboard blog anda
Pilih Template ==>Klik Edit HTML
Cari code </head> agar pencarian lebih cepat gunaka CTR+F pada keyboard anda Copas Link di bwah ini letakan tepat di atas code </head> tadi atau bisa juga di atas code </body>

<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet" />

Save template

 Cara menggunakan Font awesome

Untuk menggunakan Font awesome ini kamu bisa gunakannya di mana saja misalnya di bagian menu anda bisa menggunakannya,, untuk memanggil Font awesome gunakan misalnya tag <i> dan menambah class utama yaitu fa...

Contoh sederhana cara menggunakan Font awesome:

 <i class="fa fa-home"></i> 

 Hasilnya akan menjadi:

Untuk mengganti atau memperbesarnya kamu bisa menambahkan (fa-lg)==>(33% encrease), (fa-2x)==>(mengubah ukuran menjadi 2kali lipat lebih besar dari ukuran sebelumnya)==>ubah angka <==x untuk menyesuaikan ukuran sesuai dengan keinginan anda:

<i class="fa fa-home fa-lg"></i>  contoh ditambah : fa-lg
<i class="fa fa-home fa-2x"></i> contoh ditambah fa-2x
<i class="fa fa-home fa-3x"></i> contoh ditambah fa-3x
<i class="fa fa-home fa-4x"></i> contoh ditambah fa-4x
<i class="fa fa-home fa-5x"></i> contoh ditambah fa-5x

Dan hasilnya:

contoh ditambah fa-lg
contoh ditambah fa-2x
contoh ditambah fa-3x
contoh ditambah fa-4x
contoh ditambah fa-5x


Untuk mengubah warna anda bisa menambahkan tag scripts di bawah ini

<style>
.fa-comments-o {padding:0;  margin:0; float:left;padding:5px 0px; color:#F2784B;}
}
</style>

Dan hasilnya:


Untuk menampilkan agar perputar anda hanya harus menambahkan Tag (fa-spin)
Contoh sederhana penggunaan:

<i class="fa fa-star fa-spin"></i> contoh ditambah fa-spin

Dan hasilnya:
contoh ditambah fa-spin