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.
font awesome icons
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
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
<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

17 Responses to Memasang Plugin Font Awesome di Blogger

  1. mantap sekali nich informasinya sob...ane bookmark dulu nich..kali aja mau ganti font awewek some one :D

    ReplyDelete
    Replies
    1. Maksudnya Font Awesome. :)

      Delete
    2. hehe, bisa aja nih kang zul, iya silahkan di BM dulu :D

      Delete
    3. This comment has been removed by a blog administrator.

      Delete
  2. keren bangeet gan, saya suka saya suka...
    semogaaa menjadi bermanfaat gan :)

    ReplyDelete
    Replies
    1. iya mas , semoga begitu yah :) makasih udah mampir :yes

      Delete
  3. wah sayang hanya untuk blogger saja mas plugin font nya ;)

    ReplyDelete
    Replies
    1. buat selain blogger juga bisa kok mbak, :)

      Delete
  4. Kapaaaan inih ada waktunya? Pengen banget nyoba.. Ihik :(

    ReplyDelete
    Replies
    1. sibuk sidang yah :D kapan bisanya sist beby yang bisa nentuin :mn

      Delete
  5. Sangat bermanfaat gan, visit back http://endblogg.blogspot.com/

    ReplyDelete

Note:
► Silahkan Berkomentar Sesuai Tema.✔
► No LINK. SPAM & PROMOSI ✘
► Segala Komentar Yang Masuk tidak Saya Moderasi ✔
► Dilarang Promosi (kecuali Ijin Admin ) ✔
► Link Hidup = Hapus.✔