Tutorial fontawesome untuk blogger atau blogspot

FontAwesome memberikan anda vektor icon yang fleksible, yang dapat langsung disesuaikan baik ukuran, warna, drop shadow, dan apa pun yang bisa dilakukan dengan kode CSS.

Keunggulan dari fontawesome:
1. 1 Font lebih dari 600 ikon yang anda bisa sesuaikan menggunakan css.
2. FontAwesome bisa bekerja dengan segala jenis CSS framework seperti bootstrap, material design, Pure CSS atau framework lainnya, bisa juga bekerja untuk CMS wordpress, joomla bahkan blogger.
3. Tidak membutuhkan javascript untuk menggunakan icon ini, font ini juga kompatible dengan banyak browser dan tidak membutuhkan javascript.
4. Sangat fleksible dan terlihat sangat bagus disemua ukuran font.
5. Kontrol hanya dengan menggunakan CSS, baik itu ukuran font, warna font, box shadow, dan lainnya, semua cukup menggunakan CSS.
6. Sempurna pada tampilan retina. Fontawesome adalah vektor ikon sehingga sangat sempurna tampil di semua resolusi termasuk resolusi tinggi sekalipun.
7. Yang penting gratis dan bisa digunakan di semua project website anda, baik itu project gratisan maupun project komersial, karena fontawesome adalah open source dan GPL. Pelajari lisensi nya di: http://fontawesome.io/license/

Menggunakan FontAwesome sangat sederhana dan mudah, anda cukup menambahkan dua baris kode ke website Anda, atau website anda akan terlihat professional dengan ikon ikon kualitas tinggi.

Ok sobat gianmr, langsung saja berikut adalah tutorialnya:
1. Silahkan backup terlebih dahulu template bawaan anda, berikut adalah tutorial cara backup template blogger:
Cara mudah backup template blogger atau blogspot

2. Selanjut anda edit template blogger anda, jika anda tidak tahu cara edit template blogger berikut adalah cara edit template blogger:
Cara edit template blogger atau blogspot

3. Setelah masuk ke halaman editor template anda, taruh kode berikut sebelum kode ]]></b:skin> atau </style>:

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

Diatas adalah link CDN untuk fontawesome.

4. Untuk menampilkan ikon yang perlu anda lakukan adalah memanggil kode class fontawesome pada HTML anda, kode class fontAwesome berawalan fa.

FontAwesome dirancang untuk digunakan dengan elemen inline seperti <i> dan <span> elemen yang banyak digunakan untuk ikon.

Berikut adalah contoh kode untuk memanggil ikon mobil:

<i class="fa fa-car"></i>
<i class="fa fa-car" style="font-size:44px;"></i>
<i class="fa fa-car" style="font-size:60px;color:blue;"></i>

Untuk hasilnya anda bisa lihat dibawah ini:

Untuk ikon yang lebih besar anda cukup memanggil kode class nya saja semisal fa-lg (menambah ukuran font 33%), fa-2x, fa-3x, fa-4x, atau fa-5x.

Akan saya kasih contoh penggunaan kode tersebut:

<i class="fa fa-car fa-lg"></i>
<i class="fa fa-car fa-2x"></i>
<i class="fa fa-car fa-3x"></i>
<i class="fa fa-car fa-4x"></i>
<i class="fa fa-car fa-5x"></i>

Maka hasil dari kode diatas bisa anda lihat penampakan nya dibawah:

Wow, amazing bukan.. :D

Lanjut ke trik selanjutnya. FontAwesome juga di desain untuk dapat bekerja pada HTML list seperti unorderlist(ul). Gunakan fa-ul pada ul dan gunakan fa-li pada ikon nya. Sebagai contoh masukkan kode berikut:

<ul class="fa-ul">
  <li><i class="fa-li fa fa-check-square"></i>List icons</li>
  <li><i class="fa-li fa fa-spinner fa-spin"></i>List icons</li>
  <li><i class="fa-li fa fa-square"></i>List icons</li>
</ul>

Dibawah ini adalah contoh dari kode diatas: