Memasang Plugin Font Awesome di Blogger

Memasang Plugin Font Awesome di Blogger

Memasang Plugin Font Awesome di Blogger - Font Awesome merupakan kumpulan icon dan  tombol yang berbasis font. Maksudnya ketika anda membutuhkan sebuah ikon anda tidak perlu membutuhkan gambar yang pastinya akan membuat loading blog semakin lebih ringan.

Cara penggunaan Font Awesome ini anda harus menambahkan kode CSS berikut diatas kode </head>

<link href='//netdna.bootstrapcdn.com/font-awesome/3.1.1/css/font-awesome.min.css' rel='stylesheet'/>

disini saya menggunakan versi 3.1.1 untuk versi lain anda bisa kunjungi Icons FontAwesome atau Font Awesome.

Cara Penggunaan Font Awesom ini anda harus menambahkan tag <i> kemudian class nya dengan menggunakan nama icon

Daftar Ikon Font Awesome

Cara Penulisannya:
Cara penulisannya:

<i class="icon-google-plus-sign"></i>

Cara penulisannya:

<i class="icon-html5"></i>

Memperbesar Ukuran Font Awesome

<i class="icon-frown"></i>
<i class="icon-frown icon-large"></i>
<i class="icon-frown icon-2x"></i>
<i class="icon-frown icon-3x"></i>
<i class="icon-frown 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-thumbs-up icon-3x pull-left icon-border"></i>Gunakan kode <code>pull-right</code> atau <code>pull-left</code> 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.

Gunakan kode pull-right atau pull-left untuk disimpan di kanan atau dikiri, dan icon-muted untuk membuat ikon menjadi warna muda.

<i class="icon-quote-left icon-4x pull-left icon-muted"></i>Gunakan kode <code>pull-right</code> atau <code>pull-left</code> untuk disimpan di kanan atau dikiri, dan icon-muted untuk membuat ikon menjadi warna muda.

Animated Spinner
Untuk membuat ikon berputar, seperti animasi loading gunakan kode icon-spin bagus digunakan pada icon-spinner dan icon-refresh
Ini contoh icon-spinner yang diputar.

<i class="icon-spinner icon-spin icon-2x"></i> Ini contoh <code>icon-spinner</code> yang diputar.

Rotated & Flipped
Dapat diputar sesuai derajat juga bisa dibalik dengan horizontal dan vertikal
  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-meh"></i>&nbsp; ikon normal
<i class="icon-meh icon-rotate-90"></i>&nbsp; ikon diputar 90 derajat
<i class="icon-meh icon-rotate-180"></i>&nbsp; ikon diputar 180 derajat
<i class="icon-meh icon-rotate-270"></i>&nbsp; ikon diputar 270 derajat
<i class="icon-meh icon-flip-horizontal"></i>&nbsp; ikon dibalik secara horizontal
<i class="icon-meh icon-flip-vertical"></i>&nbsp; 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-facebook"></i></span><span style="margin-left: 8px;">icon-facebook di atas icon-check-empty
</span>
<span class="icon-stack">
<i class="icon-circle icon-stack-base"></i><i class="icon-beer icon-light"></i></span><span style="margin-left: 8px;">icon-beer di atas icon-circle
</span>

Button/Tombol
Anda bisa gunakan Font Awesome ini pada penempatan button

• Reload
• Checkout
• Info
• Delete

<ul class="buttonx">
<li><a class="btnx1" href="#"><i class="icon-repeat"></i> Reload</a></li>
<li><a class="btnx2" href="#"><i class="icon-shopping-cart icon-large"></i> Checkout</a></li>
<li><a class="btnx2" href="#"><i class="icon-info-sign"></i> Info</a></li>
<li><a class="btnx1" href="#"><i class="icon-trash icon-large"></i> Delete</a></li>
</ul>

Bukan hanya untuk tombol saja , font awesome ini bisa anda gunakan pada berbagai tempat bisa itu menu,menu dropdown ,form dan masih banyak lainnya.

Penambahan Efek
Anda bisa kombinasikan pada efek lainnya seperti contoh rotation dibawah ini:

Silahkan anda bisa Edit sendiri CSS dan HTML untuk dipelajari. Dan semoga bermanfaat.

http://blog.kangismet.net/2013/06/cara-menggunakan-ikon-font-awesome-di.html