Kunjungi Blog terbaru saya corkismet - Coretan Kang Ismet - dan tinggalkan jejak sobat disana.
Beranda
CSS

Cara Menggunakan Ikon Font Awesome di Blog

Cara menggunakan icon Font Awesome di Bloggger / Blogspot.
How to add and use Font Awesome icons on Blogger Blog - Font Awesome merupakan kumpulan icon dan  tombol yang berbasis font. Artinya, ketika sobat membutuhkan ikon di blog, tidak lagi menggunakan gambar / image yang tentunya akan lebih mempercepat loading blog sobat.font awesome

Untuk bisa menggunakan Font Awesome ini, sobat harus menyimpan CSSnya di atas </head>
<link href='//netdna.bootstrapcdn.com/font-awesome/3.1.1/css/font-awesome.min.css' rel='stylesheet'/>

Cara Menggunakan Font Awesome

Untuk menggunakan Font Awesome, sobat harus menambahkan tag <i> kemudian class nya gunakan nama icon.



cara penulisannya :
<i class="icon-google-plus-sign"></i>
cara penulisannya :
<i class="icon-html5"></i>

Memperbesar Ukuran





<i class="icon-google-plus-sign"></i>
<i class="icon-google-plus-sign icon-large"></i>
<i class="icon-google-plus-sign icon-2x"></i>
<i class="icon-google-plus-sign icon-3x"></i>
<i class="icon-google-plus-sign 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-flag icon-3x pull-left icon-border"></i>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.
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 pull-right atau pull-left 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

Ikon juga dapat diputar dengan menentukan derajat putaran, juga bisa dibalik secara vertikal atau horizontal.

  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-shield"></i>&nbsp; ikon normal
<i class="icon-shield icon-rotate-90"></i>&nbsp; ikon diputar 90 derajat
<i class="icon-shield icon-rotate-180"></i>&nbsp; ikon diputar 180 derajat
<i class="icon-shield icon-rotate-270"></i>&nbsp; ikon diputar 270 derajat
<i class="icon-shield icon-flip-horizontal"></i>&nbsp; ikon dibalik secara horizontal
<i class="icon-shield 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-twitter"></i></span><span style="margin-left: 8px;">icon-twitter di atas icon-check-empty
</span>
<span class="icon-stack">
<i class="icon-circle icon-stack-base"></i><i class="icon-flag icon-light"></i></span><span style="margin-left: 8px;">icon-flag di atas icon-circle
</span>

Button

Icon juga dapat diterapkan pada button / tombol.


<ul class="button">
<li><a class="btn1" href="#"><i class="icon-repeat"></i> Reload</a></li>
<li><a class="btn2" href="#"><i class="icon-shopping-cart icon-large"></i> Checkout</a></li>
<li><a class="btn2" href="#"><i class="icon-info-sign"></i> Info</a></li>
<li><a class="btn1" href="#"><i class="icon-trash icon-large"></i> Delete</a></li>
</ul>
Bukan hanya pada button, icon Font Awesome ini bisa disimpan di berbagai tempat, seperti menu, menu dropdown, form, dan-lain-lain...

Penambahan Efek

Ikon Font Awesome juga bisa dikombinasikan dengan efek yang lainnya, seperti rotation pada contoh di bawah, silahkan arahkan mouse pada logo twitter :



Untuk CSS dan HTMLnya silahkan diacak2 sendiri sob.... Semoga bermanfaat, dan slamat berkreasi....

#CSS

Untuk mendapatkan update terbaru di Dasbor Blogger, silahkan ikuti Blog ini

66 komentar

1. Komentar ini, diurutkan dari yang terbaru
2. Tinggalkan komentar sesuai topik tulisan
3. Apabila ada pertanyaan diluar artikel silahkan kunjungi Ruang Obrolan.
4. Centang Beri tahu saya untuk mendapatkan notifikasi via Email ketika ada balasan
Masukkan URL Gambar atau Potongan Kode, atau Quote, lalu klik tombol yang kamu inginkan untuk di-parse. Salin hasil parse lalu paste ke kolom komentar.


image quote pre code
  1. bertambah lagi nih ilmu nya .

    numpang berpromo mas , mari social bookmark an artikel anda di social bookmark terbaru punyaku di http://seplintir.com/
  2. Keren, Mas! |o| suatu hari insyaAllah ane terapin di blog ahh..
    1. mangga kang....
  3. Oh ternyata font ini sudah siap semua codingnya tinggal pake aja :)
    1. benul... eh betul sob... :)
  4. kaga ribet2 nyari gambar..
    1. iya sob.. makasih ya.. soalnya idenya dari postingan sobat :)
  5. Mantap Kang..
    1. ok sob.. :)
  6. Makin berkreasi saja Mas ikonnya, kalau untuk gambar bisa itu Mas macam gambar dipostingan ketika disorot berputar gitu atau ada efek membesar atau mengkilap gitu Mas.
    1. bisa sob, tinggal edit CSS sama tambah HTMLnya saja, saya udah update artikelnya di atas..
  7. cantik e. mantaplah mas terusin postingan gini ya :)
    1. tengkyu sob... ditunggu aja episode selanjutnya :)
  8. luar binasa kang..hahahay
    kumpulan kode icon lainnya carinya dimana kang..
    1. di artikel selanjutnya :D
  9. boleh juga nih..
    1. silahkan kalau boleh :)
  10. waawww keren kang...nanti kapan2 dicoba ah :)
    1. mangga kang... nyobiana sambil ngopi nya :)
  11. kalo untuk jarak icon dan tulisan begini bisa ga ya

    <i class="icon-folder-close" style="margin-right: 5px;"></i>
    1. dicoba aja sob :)
    2. Kalo menurut saya enak tambah kan CSS i.fa{margin-right: 10px;}
  12. Tinggalkan komentar dlu..aaah soalnya selalu mampir diblog ini nggak pernah komentar....
    Ada yg baru ni Kang, saya ijin nyoba dlu diblog ane...
    1. kenapa atuh cuma mampir aja :D
  13. Mas, tanya donk... apa rahasianya kamu rajin banget ngeblog... ga capek atau males gitu??
    1. ahaa :v boleh juga nih :D
  14. wah mantab kang saya terapin dulu ke blog saya kang deh kang :D
    1. hehe.. silahkan sob..
  15. kereeen mass !! mantaaapp nice infoo
  16. Izin saya share ulang kang :D
    1. silahkan sob.... :)
  17. wach keren nie mas izin cpot dul mas...
  18. kang kalo mengatur jarak antara icon dan nama textnya gimana ? saya pasang icon ini untuk navigasi, eh pas di pasang knapa icon dan textnya berdekatan ya ?
    1. tambah css aja sob contoh :
      <i class="icon-google-plus-sign" style="margin-right:10px"></i>
  19. kang ijin koreksi artiklenya, css nya kurang tag penutup "/" soalnya tadi pasang gk bisa. Kasian yang gk tahu kang. :)
    1. iya sob... lupa saya.. :-d
  20. Mantap :D

    Follbacknya gan :)

    WWW.AGIEL13.BLOGSPOT.com
  21. Udah keliling dunia masih gk ketemu, wah ternyata ada disini nih tutorialnya, ijin nyoba ya kang Ismet :D
    http://yoga-tc.blogspot.com/
    1. jauh amat keliling2 :)
  22. izin share ulang ya kang :)
  23. Mantap kang , langsung praktek aja deh wkwkwkw :D
  24. :( terus saja aku ketinggalan berita ....
    kang itu effect pada button twitter nya bisa digunain pada Judul blog kita gak kang. ^_^
    soal nya kalo bisa biar saya coba. @@,
    gmana kang ?? :P
  25. Saya tertarik dengan ikon font awesoe ini Kang Ismet
    Ikut simak dan belajar saya Kang. terima kasih :)
  26. wah bagus nie

    Follback Sbt

    galangs-blogspot.blogpsot.com
  27. wah bagus nie

    Follback Sbt

    galangs-blogspot.blogpsot.com
  28. , apa bisa coba dioffline ya mas ?
  29. Unknown
    Komentar ini telah dihapus oleh pengarang.
  30. Kagak work di blog ane bang :(
  31. Wihh.. kang tau dari mana?? kok si akang pinter... ihh.. keren dan juga work nihh.. walaupun masih dicoba tapi udh work koq.. tetap posting tentang ilmu blogger atau internet yaa kang.. =D :D :) :-d
  32. Gak bosan deh mantengin tutorial dari Kang Ismet |o| Tambah ilmu :-d
  33. Amin Yusuf
    Komentar ini telah dihapus oleh pengarang.
  34. keren bang ismet..
Cookie Consent
We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.
More Details
Oops!
It seems there is something wrong with your internet connection. Please connect to the internet and start browsing again.
AdBlock Detected!
We have detected that you are using adblocking plugin in your browser.
The revenue we earn by the advertisements is used to manage this website, we request you to whitelist our website in your adblocking plugin.
Site is Blocked
Sorry! This site is not available in your country.