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

70 komentar

bertambah lagi nih ilmu nya .

numpang berpromo mas , mari social bookmark an artikel anda di social bookmark terbaru punyaku di http://seplintir.com/

Balas

Keren, Mas! |o| suatu hari insyaAllah ane terapin di blog ahh..

Balas

Oh ternyata font ini sudah siap semua codingnya tinggal pake aja :)

Balas

kaga ribet2 nyari gambar..

Balas

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.

Balas

cantik e. mantaplah mas terusin postingan gini ya :)

Balas

luar binasa kang..hahahay
kumpulan kode icon lainnya carinya dimana kang..

Balas

waawww keren kang...nanti kapan2 dicoba ah :)

Balas

benul... eh betul sob... :)

Balas

iya sob.. makasih ya.. soalnya idenya dari postingan sobat :)

Balas

bisa sob, tinggal edit CSS sama tambah HTMLnya saja, saya udah update artikelnya di atas..

Balas

tengkyu sob... ditunggu aja episode selanjutnya :)

Balas

di artikel selanjutnya :D

Balas

silahkan kalau boleh :)

Balas

mangga kang... nyobiana sambil ngopi nya :)

Balas

kayak di template yg dishare dte rupanya ^_^

Balas

kalo untuk jarak icon dan tulisan begini bisa ga ya

<i class="icon-folder-close" style="margin-right: 5px;"></i>

Balas

template yang mana ya... :P

Balas

kira2 itu font yang nampilin icon yang format fontnya apa?? .woof/.eot/.svg???

Balas

Tinggalkan komentar dlu..aaah soalnya selalu mampir diblog ini nggak pernah komentar....
Ada yg baru ni Kang, saya ijin nyoba dlu diblog ane...

Balas

Mas, tanya donk... apa rahasianya kamu rajin banget ngeblog... ga capek atau males gitu??

Balas

sama aja sob... kan ini font, .woof biasanya. kalau untuk mobile harus ditambah .eot

Balas

kenapa atuh cuma mampir aja :D

Balas

perasaan ga rajin... biasa aja.. diantaranya mungkin karena koneksiku pake speedy unlimited jadi sayag kala ga dipake :D

Balas

saya limited mas =( hahaa =D

Balas

wah mantab kang saya terapin dulu ke blog saya kang deh kang :D

Balas

Untuk alasan lainnya silahkan kunjungi artikel terbaru saya sob http://blog.kangismet.net/2013/06/kenapa-saya-rajin-ngeblog.html

Balas

kereeen mass !! mantaaapp nice infoo

Balas

soalnay saya coba di handphone itu font ga kluar bentuknya.. malah kaya huruf cina kaga danta gitu...

Balas

hehehe... ga punya android, jadi ga ngerti :) tapikayaknya aman ko sob, kalau penyedia tutorial, biasanya diakses dari desktop

Balas

loh kok komentar admin di blok juga kang? wkwkwkwk
kenapa ga difilter kang, agar komentar admin dapat tampil walau ada kata2 terlarang?

Balas

Izin saya share ulang kang :D

Balas

wach keren nie mas izin cpot dul mas...

Balas

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 ?

Balas

kang ijin koreksi artiklenya, css nya kurang tag penutup "/" soalnya tadi pasang gk bisa. Kasian yang gk tahu kang. :)

Balas

iya sob... lupa saya.. :-d

Balas

tambah css aja sob contoh :
<i class="icon-google-plus-sign" style="margin-right:10px"></i>

Balas

Mantap :D

Follbacknya gan :)

WWW.AGIEL13.BLOGSPOT.com

Balas

Daripada pakai style inline lebih baik pakai spaci di text :)

Balas

Udah keliling dunia masih gk ketemu, wah ternyata ada disini nih tutorialnya, ijin nyoba ya kang Ismet :D
http://yoga-tc.blogspot.com/

Balas

jauh amat keliling2 :)

Balas

Mantap kang , langsung praktek aja deh wkwkwkw :D

Balas

kayak nya bisa langsung digunakan meski tanpa awalan tag <i> ya kang misal kita langsung pasang pada kaya gini
<a class="icon-home" href=" "> tes </a>

Balas

kalo bgtu saya rasa ga bisa... v kalau gini kayanya bisa <a class="icon-home" data-icon="" href="" >tes </a> dengan css .icon-home:before{
content:"kode icon"
}

[data-icon]:before {
display: inline;
vertical-align: middle;
font-family: 'FontAwesome';
content: attr(data-icon);
speak: none;
font-weight: normal;
font-style: normal;
line-height: 1;
-webkit-font-smoothing: antialiased;
}

Balas

:( 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

Balas

Saya tertarik dengan ikon font awesoe ini Kang Ismet
Ikut simak dan belajar saya Kang. terima kasih :)

Balas

wah bagus nie

Follback Sbt

galangs-blogspot.blogpsot.com

Balas

wah bagus nie

Follback Sbt

galangs-blogspot.blogpsot.com

Balas

, apa bisa coba dioffline ya mas ?

Balas

FREE DOWNLOAD GAMES PC FULL VERSION % SOFTWARE FULL VERSION IN HERE : http://fvker-project321.blogspot.com !!!

Balas

Kalo menurut saya enak tambah kan CSS i.fa{margin-right: 10px;}

Balas

Kalo menurut saya enak tambah kan CSS i.fa{margin-right: 10px;}

Balas
Komentar ini telah dihapus oleh pengarang.

kang gmna caranya untuk nerapin icon ini pada menu blog saya ??? saya sudah coba tp g bisa?? ada yg salah atau mmg template sy yg tidak support ya kang ??
http://tobaccosarea.blogspot.com/

Balas

Kagak work di blog ane bang :(

Balas

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

Balas

Gak bosan deh mantengin tutorial dari Kang Ismet |o| Tambah ilmu :-d

Balas
Komentar ini telah dihapus oleh pengarang.

Poskan Komentar


×
Chat