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

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

COMMENTS

BLOGGER: 17
Loading...
Name

Adsense,5,CSS,8,Font,1,HTML,5,Javascript,5,Jquery,1,Lain-lain,5,PHP,1,SEO,3,Template,45,Tips,2,Tutorial,50,Widget,1,
ltr
item
HBT Blog: Memasang Plugin Font Awesome di Blogger
Memasang Plugin Font Awesome di Blogger
http://2.bp.blogspot.com/-5C51u2S59AI/UbAl5Ms0blI/AAAAAAAAEWI/KVP6PyOLLHk/s320/font-awesome-icons.jpg
http://2.bp.blogspot.com/-5C51u2S59AI/UbAl5Ms0blI/AAAAAAAAEWI/KVP6PyOLLHk/s72-c/font-awesome-icons.jpg
HBT Blog
http://hollabacktexas.blogspot.com/2014/04/memasang-plugin-font-awesome-di-blogger.html
http://hollabacktexas.blogspot.com/
http://hollabacktexas.blogspot.com/
http://hollabacktexas.blogspot.com/2014/04/memasang-plugin-font-awesome-di-blogger.html
true
4727374246882403435
UTF-8
Loaded All Posts Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS CONTENT IS PREMIUM Please share to unlock Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy