Tutorial Blog Mas Andes Official - Tips Blogging | Trik Blogger | Tutorial Blogger | Widget Blogger | Blog Design | Taktik SEO (Search Engine Optimization)

List Icon Font Awesome dan CSS Value Content V4.0.3

List Icon Font Awesome dan CSS Value Content V4.0.3 List Icon Font Awesome dan CSS Value Content V4.0.3 sedikit mau berbagi setelah lama tidak menjamah dunia blogging dan mengupdate blog ini. Pada artikel ini bagi yang suka bermain main dengan desain blog maka pilihan tepat untuk menambah pernak-pernik pada elemen-elemen tertentu hingga sampai yang mendetail dengan menggunakan Font Awesome untuk melengkapi maupun mempercantik blog. Font Awesome versi 4.0.3 merupakan update dari versi sebelumnya, dan terdapat 11 icon baru pada Font Awesome V4.0.3 dan juga pembaharuan nama icon. Font Awesome merupakan font web yang mengagumkan dan mengandung semua ikon dari kerangka Twitter Bootstrap, dan sekarang lebih banyak lagi icon-icon lain hanya dengan menambah satu styleshet pada template maka anda bisa menggunakan 369 icon.

Agar bisa menggunakan Font Awesome, maka anda perlu menambahkan styleshet dibawah ini kemudian menyimpannya di atas kode </head>
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet"/>
Cara penggunaanya didalam HTML anda hanya perlu menambahkan tag <i> kemudian class dari nama icon yang dipilih. Misal untuk cara penulisannya seperti dibawah ini:

fa-html5
<i class="fa fa-html5"></i> fa-html5
Untuk memperbesar ukuran, maka anda hanya perlu menambahkan class fa-lg, fa-1x, fa-2x, fa-3x, fa-4x, fa-5x dan berikut contohnya:

fa-html5

fa-html5

fa-html5

fa-html5

fa-html5

<p><i class="fa fa-html5 fa-lg"></i> fa-html5</p>
<p><i class="fa fa-html5 fa-2x"></i> fa-html5</p>
<p><i class="fa fa-html5 fa-3x"></i> fa-html5</p>
<p><i class="fa fa-html5 fa-4x"></i> fa-html5</p>
<p><i class="fa fa-html5 fa-5x"></i> fa-html5</p>
Gunakan class fa-ul dan fa-li untuk mempermudah dalam membuat daftar list dan menentukan nama icon.
  • fa-check-square
  • fa-check-square
  • fa-spinner fa-spin
  • fa-square
<ul class="fa-ul">
  <li><i class="fa-li fa fa-check-square"></i>fa-check-square</li>
  <li><i class="fa-li fa fa-check-square"></i>fa-check-square</li>
  <li><i class="fa-li fa fa-spinner fa-spin"></i>fa-spinner fa-spin</li>
  <li><i class="fa-li fa fa-square"></i>fa-square</li>
</ul>
Gunakan class pull-right atau pull-left untuk membuat icon berada di sebelah kanan atau sebelah kiri, sedangkan fa-border adalah untuk membuat border pada icon tersebut.

Ini adalah contoh agar icon berada disebelah kiri, agar berada disebelah kanan maka ganti pull-left dengan pull-right.
<i class="fa fa-info-circle fa-2x pull-left fa-border"></i>
Ini adalah contoh agar icon berada disebelah kiri, agar berada disebelah kanan maka ganti pull-left dengan pull-right.
Gunakan class fa-spin untuk membuat icon agar bisa berputar. Ini biasa di kombinasikan pada icon fa-spinner, fa-refresh, dan fa-gigi agar bisa berputar dengan baik. Namun sayangnya animasi CSS3 ini tidak support di IE8 - IE9.




<i class="fa fa-spinner fa-spin"></i>
<i class="fa fa-refresh fa-spin"></i>
<i class="fa fa-cog fa-spin"></i>
Untuk memutar atau membalik icon, gunakan class fa-rotate-* dan fa-flip-*. Ganti tanda bintang (*) dengan nilai berapa derajat icon tersebut akan di rotate.

  normal
  fa-rotate-90
  fa-rotate-180
  fa-rotate-270
  fa-flip-horizontal
  icon-flip-vertical
<i class="fa fa-shield"></i>&nbsp; normal<br>
<i class="fa fa-shield fa-rotate-90"></i>&nbsp; fa-rotate-90<br>
<i class="fa fa-shield fa-rotate-180"></i>&nbsp; fa-rotate-180<br>
<i class="fa fa-shield fa-rotate-270"></i>&nbsp; fa-rotate-270<br>
<i class="fa fa-shield fa-flip-horizontal"></i>&nbsp; fa-flip-horizontal<br>
<i class="fa fa-shield fa-flip-vertical"></i>&nbsp; icon-flip-vertical
Diatas adalah cara dimana untuk menuliskan Font Awesome didalam sebuah markup HTML, masih banyak lagi tips trik lainnya yang bisa digunakan didalam Font Awesome. Untuk lebih jelasnya bisa mencoba dan berkreasi sendiri agar bisa lebih memahami bermain-main dengan berbagai komponen Bootstrap. Bahkan dengan cara lain anda juga bisa untuk menambahkan icon Font Awesome didalam CSS pada pseudo elemen :before dengan menuliskan value content dari icon tersebut. Berikut skema penggunaan Font Awesome pada pseudo elemen CSS:
.element{
    position: relative;
}
/* ganti tulisan berwarna merah pada value content */ 
.element:before {
    content: "\f000"; 
    font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
    text-decoration: inherit;
/*--custom pada CSS--*/
    color: #000;
    font-size: 18px;
    padding-right: 0.5em;
    position: absolute;
    top: 10px;
    left: 0;
}
Setelah mengetahui cara penggunaan dari Font Awesome baik itu pada CSS maupun HTML maka berikut adalah list dari icon Font Awesome versi 4.0.3 beserta CSS value content.

List Icon Font Awesome dan CSS Value Content V4.0.3


  • fa-glass "\f000"
  • fa-music "\f001"
  • fa-search "\f002"
  • fa-envelope-o "\f003"
  • fa-heart "\f004"
  • fa-star "\f005"
  • fa-star-o "\f006"
  • fa-user "\f007"
  • fa-film "\f008"
  • fa-th-large "\f009"
  • fa-th "\f00a"
  • fa-th-list "\f00b"
  • fa-check "\f00c"
  • fa-times "\f00d"
  • fa-search-plus "\f00e"
  • fa-search-minus "\f010"
  • fa-power-off "\f011"
  • fa-signal "\f012"
  • fa-cog "\f013"
  • fa-trash-o "\f014"
  • fa-home "\f015"
  • fa-file-o "\f016"
  • fa-clock-o "\f017"
  • fa-road "\f018"
  • fa-download "\f019"
  • fa-arrow-circle-o-down "\f01a"
  • fa-arrow-circle-o-up "\f01b"
  • fa-inbox "\f01c"
  • fa-play-circle-o "\f01d"
  • fa-repeat "\f01e"
  • fa-refresh "\f021"
  • fa-list-alt "\f022"
  • fa-lock "\f023"
  • fa-flag "\f024"
  • fa-headphones "\f025"
  • fa-volume-off "\f026"
  • fa-volume-down "\f027"
  • fa-volume-up "\f028"
  • fa-qrcode "\f029"
  • fa-barcode "\f02a"
  • fa-tag "\f02b"
  • fa-tags "\f02c"
  • fa-book "\f02d"
  • fa-bookmark "\f02e"
  • fa-print "\f02f"
  • fa-camera "\f030"
  • fa-font "\f031"
  • fa-bold "\f032"
  • fa-italic "\f033"
  • fa-text-height "\f034"
  • fa-text-width "\f035"
  • fa-align-left "\f036"
  • fa-align-center "\f037"
  • fa-align-right "\f038"
  • fa-align-justify "\f039"
  • fa-list "\f03a"
  • fa-outdent "\f03b"
  • fa-indent "\f03c"
  • fa-video-camera "\f03d"
  • fa-picture-o "\f03e"
  • fa-pencil "\f040"
  • fa-map-marker "\f041"
  • fa-adjust "\f042"
  • fa-tint "\f043"
  • fa-pencil-square-o "\f044"
  • fa-share-square-o "\f045"
  • fa-check-square-o "\f046"
  • fa-arrows "\f047"
  • fa-step-backward "\f048"
  • fa-fast-backward "\f049"
  • fa-backward "\f04a"
  • fa-play "\f04b"
  • fa-pause "\f04c"
  • fa-stop "\f04d"
  • fa-forward "\f04e"
  • fa-fast-forward "\f050"
  • fa-step-forward "\f051"
  • fa-eject "\f052"
  • fa-chevron-left "\f053"
  • fa-chevron-right "\f054"
  • fa-plus-circle "\f055"
  • fa-minus-circle "\f056"
  • fa-times-circle "\f057"
  • fa-check-circle "\f058"
  • fa-question-circle "\f059"
  • fa-info-circle "\f05a"
  • fa-crosshairs "\f05b"
  • fa-times-circle-o "\f05c"
  • fa-check-circle-o "\f05d"
  • fa-ban "\f05e"
  • fa-arrow-left "\f060"
  • fa-arrow-right "\f061"
  • fa-arrow-up "\f062"
  • fa-arrow-down "\f063"
  • fa-share "\f064"
  • fa-expand "\f065"
  • fa-compress "\f066"
  • fa-plus "\f067"
  • fa-minus "\f068"
  • fa-asterisk "\f069"
  • fa-exclamation-circle "\f06a"
  • fa-gift "\f06b"
  • fa-leaf "\f06c"
  • fa-fire "\f06d"
  • fa-eye "\f06e"
  • fa-eye-slash "\f070"
  • fa-exclamation-triangle "\f071"
  • fa-plane "\f072"
  • fa-calendar "\f073"
  • fa-random "\f074"
  • fa-comment "\f075"
  • fa-magnet "\f076"
  • fa-chevron-up "\f077"
  • fa-chevron-down "\f078"
  • fa-retweet "\f079"
  • fa-shopping-cart "\f07a"
  • fa-folder "\f07b"
  • fa-folder-open "\f07c"
  • fa-arrows-v "\f07d"
  • fa-arrows-h "\f07e"
  • fa-bar-chart-o "\f080"
  • fa-twitter-square "\f081"
  • fa-facebook-square "\f082"
  • fa-camera-retro "\f083"
  • fa-key "\f084"
  • fa-cogs "\f085"
  • fa-comments "\f086"
  • fa-thumbs-o-up "\f087"
  • fa-thumbs-o-down "\f088"
  • fa-star-half "\f089"
  • fa-heart-o "\f08a"
  • fa-sign-out "\f08b"
  • fa-linkedin-square "\f08c"
  • fa-thumb-tack "\f08d"
  • fa-external-link "\f08e"
  • fa-sign-in "\f090"
  • fa-trophy "\f091"
  • fa-github-square "\f092"
  • fa-upload "\f093"
  • fa-lemon-o "\f094"
  • fa-phone "\f095"
  • fa-square-o "\f096"
  • fa-bookmark-o "\f097"
  • fa-phone-square "\f098"
  • fa-twitter "\f099"
  • fa-facebook "\f09a"
  • fa-github "\f09b"
  • fa-unlock "\f09c"
  • fa-credit-card "\f09d"
  • fa-rss "\f09e"
  • fa-hdd-o "\f0a0"
  • fa-bullhorn "\f0a1"
  • fa-bell "\f0f3"
  • fa-certificate "\f0a3"
  • fa-hand-o-right "\f0a4"
  • fa-hand-o-left "\f0a5"
  • fa-hand-o-up "\f0a6"
  • fa-hand-o-down "\f0a7"
  • fa-arrow-circle-left "\f0a8"
  • fa-arrow-circle-right "\f0a9"
  • fa-arrow-circle-up "\f0aa"
  • fa-arrow-circle-down "\f0ab"
  • fa-globe "\f0ac"
  • fa-wrench "\f0ad"
  • fa-tasks "\f0ae"
  • fa-filter "\f0b0"
  • fa-briefcase "\f0b1"
  • fa-arrows-alt "\f0b2"
  • fa-users "\f0c0"
  • fa-link "\f0c1"
  • fa-cloud "\f0c2"
  • fa-flask "\f0c3"
  • fa-scissors "\f0c4"
  • fa-files-o "\f0c5"
  • fa-paperclip "\f0c6"
  • fa-floppy-o "\f0c7"
  • fa-square "\f0c8"
  • fa-bars "\f0c9"
  • fa-list-ul "\f0ca"
  • fa-list-ol "\f0cb"
  • fa-strikethrough "\f0cc"
  • fa-underline "\f0cd"
  • fa-table "\f0ce"
  • fa-magic "\f0d0"
  • fa-truck "\f0d1"
  • fa-pinterest "\f0d2"
  • fa-pinterest-square "\f0d3"
  • fa-google-plus-square "\f0d4"
  • fa-google-plus "\f0d5"
  • fa-money "\f0d6"
  • fa-caret-down "\f0d7"
  • fa-caret-up "\f0d8"
  • fa-caret-left "\f0d9"
  • fa-caret-right "\f0da"
  • fa-columns "\f0db"
  • fa-sort "\f0dc"
  • fa-sort-asc "\f0dd"
  • fa-sort-desc "\f0de"
  • fa-envelope "\f0e0"
  • fa-linkedin "\f0e1"
  • fa-undo "\f0e2"
  • fa-gavel "\f0e3"
  • fa-tachometer "\f0e4"
  • fa-comment-o "\f0e5"
  • fa-comments-o "\f0e6"
  • fa-bolt "\f0e7"
  • fa-sitemap "\f0e8"
  • fa-umbrella "\f0e9"
  • fa-clipboard "\f0ea"
  • fa-lightbulb-o "\f0eb"
  • fa-exchange "\f0ec"
  • fa-cloud-download "\f0ed"
  • fa-cloud-upload "\f0ee"
  • fa-user-md "\f0f0"
  • fa-stethoscope "\f0f1"
  • fa-suitcase "\f0f2"
  • fa-bell-o "\f0a2"
  • fa-coffee "\f0f4"
  • fa-cutlery "\f0f5"
  • fa-file-text-o "\f0f6"
  • fa-building-o "\f0f7"
  • fa-hospital-o "\f0f8"
  • fa-ambulance "\f0f9"
  • fa-medkit "\f0fa"
  • fa-fighter-jet "\f0fb"
  • fa-beer "\f0fc"
  • fa-h-square "\f0fd"
  • fa-plus-square "\f0fe"
  • fa-angle-double-left "\f100"
  • fa-angle-double-right "\f101"
  • fa-angle-double-up "\f102"
  • fa-angle-double-down "\f103"
  • fa-angle-left "\f104"
  • fa-angle-right "\f105"
  • fa-angle-up "\f106"
  • fa-angle-down "\f107"
  • fa-desktop "\f108"
  • fa-laptop "\f109"
  • fa-tablet "\f10a"
  • fa-mobile "\f10b"
  • fa-circle-o "\f10c"
  • fa-quote-left "\f10d"
  • fa-quote-right "\f10e"
  • fa-spinner "\f110"
  • fa-circle "\f111"
  • fa-reply "\f112"
  • fa-github-alt "\f113"
  • fa-folder-o "\f114"
  • fa-folder-open-o "\f115"
  • fa-smile-o "\f118"
  • fa-frown-o "\f119"
  • fa-meh-o "\f11a"
  • fa-gamepad "\f11b"
  • fa-keyboard-o "\f11c"
  • fa-flag-o "\f11d"
  • fa-flag-checkered "\f11e"
  • fa-terminal "\f120"
  • fa-code "\f121"
  • fa-reply-all "\f122"
  • fa-mail-reply-all "\f122"
  • fa-star-half-o "\f123"
  • fa-location-arrow "\f124"
  • fa-crop "\f125"
  • fa-code-fork "\f126"
  • fa-chain-broken "\f127"
  • fa-question "\f128"
  • fa-info "\f129"
  • fa-exclamation "\f12a"
  • fa-superscript "\f12b"
  • fa-subscript "\f12c"
  • fa-eraser "\f12d"
  • fa-puzzle-piece "\f12e"
  • fa-microphone "\f130"
  • fa-microphone-slash "\f131"
  • fa-shield "\f132"
  • fa-calendar-o "\f133"
  • fa-fire-extinguisher "\f134"
  • fa-rocket "\f135"
  • fa-maxcdn "\f136"
  • fa-chevron-circle-left "\f137"
  • fa-chevron-circle-right "\f138"
  • fa-chevron-circle-up "\f139"
  • fa-chevron-circle-down "\f13a"
  • fa-html5 "\f13b"
  • fa-css3 "\f13c"
  • fa-anchor "\f13d"
  • fa-unlock-alt "\f13e"
  • fa-bullseye "\f140"
  • fa-ellipsis-h "\f141"
  • fa-ellipsis-v "\f142"
  • fa-rss-square "\f143"
  • fa-play-circle "\f144"
  • fa-ticket "\f145"
  • fa-minus-square "\f146"
  • fa-minus-square-o "\f147"
  • fa-level-up "\f148"
  • fa-level-down "\f149"
  • fa-check-square "\f14a"
  • fa-pencil-square "\f14b"
  • fa-external-link-square "\f14c"
  • fa-share-square "\f14d"
  • fa-compass "\f14e"
  • fa-caret-square-o-down "\f150"
  • fa-caret-square-o-up "\f151"
  • fa-caret-square-o-right "\f152"
  • fa-eur "\f153"
  • fa-gbp "\f154"
  • fa-usd "\f155"
  • fa-inr "\f156"
  • fa-jpy "\f157"
  • fa-rub "\f158"
  • fa-krw "\f159"
  • fa-btc "\f15a"
  • fa-file "\f15b"
  • fa-file-text "\f15c"
  • fa-sort-alpha-asc "\f15d"
  • fa-sort-alpha-desc "\f15e"
  • fa-sort-amount-asc "\f160"
  • fa-sort-amount-desc "\f161"
  • fa-sort-numeric-asc "\f162"
  • fa-sort-numeric-desc "\f163"
  • fa-thumbs-up "\f164"
  • fa-thumbs-down "\f165"
  • fa-youtube-square "\f166"
  • fa-youtube "\f167"
  • fa-xing "\f168"
  • fa-xing-square "\f169"
  • fa-youtube-play "\f16a"
  • fa-dropbox "\f16b"
  • fa-stack-overflow "\f16c"
  • fa-instagram "\f16d"
  • fa-flickr "\f16e"
  • fa-adn "\f170"
  • fa-bitbucket "\f171"
  • fa-bitbucket-square "\f172"
  • fa-tumblr "\f173"
  • fa-tumblr-square "\f174"
  • fa-long-arrow-down "\f175"
  • fa-long-arrow-up "\f176"
  • fa-long-arrow-left "\f177"
  • fa-long-arrow-right "\f178"
  • fa-apple "\f179"
  • fa-windows "\f17a"
  • fa-android "\f17b"
  • fa-linux "\f17c"
  • fa-dribbble "\f17d"
  • fa-skype "\f17e"
  • fa-foursquare "\f180"
  • fa-trello "\f181"
  • fa-female "\f182"
  • fa-male "\f183"
  • fa-gittip "\f184"
  • fa-sun-o "\f185"
  • fa-moon-o "\f186"
  • fa-archive "\f187"
  • fa-bug "\f188"
  • fa-vk "\f189"
  • fa-weibo "\f18a"
  • fa-renren "\f18b"
  • fa-pagelines "\f18c"
  • fa-stack-exchange "\f18d"
  • fa-arrow-circle-o-right "\f18e"
  • fa-arrow-circle-o-left "\f190"
  • fa-caret-square-o-left "\f191"
  • fa-dot-circle-o "\f192"
  • fa-wheelchair "\f193"
  • fa-vimeo-square "\f194"
  • fa-try "\f195"
  • fa-plus-square-o "\f196"


Demikian mengenai List Icon Font Awesome dan CSS Value Content V4.0.3 selanjutnya silahkan bereksperimen seperti yang sedang ngetrend saat ini. Sweet greetings and congratulations from http://mas-andes.blogspot.com welcome coming new year 2014.

Berlangganan artikel via email

74 Response to "List Icon Font Awesome dan CSS Value Content V4.0.3"

selamat pagi mas
ijin untuk mempraktikkan ya mas
makasih bnyak atas tutorialnya

Balas

Sya sudah pakai Mas tap ngak tau versi yang berapa.
Lengkap banget, pasti gempor ngetiknya he...

Balas

keren mas, saya pelajari dulu. sepertinya harus dibaca berulang ulang bagi saya supaya bisa paham :)

Balas

Saya pernah menerapkanya ni mas hehe, dengan cara kangsimet

Balas

Wah .. lengkap banget Mas ...

Balas

keren mas Andes,,,,,mau nyoba ach ,,,,ok Mas HAPPY NEW YEAR succes selalu,,

Balas

Selamat malam Mas Andes. Duuuh Maaf nih Mas Baru bisa hadir di blog
Hijau nan sejuknya Mas Andes. simak List icon font nya Mas buat saya
Belajar dengan artikel Mas ini terima kasih. selamat tahun baru 2014
Semoga Mas Andes lebih sukses dan sejahtera sekeluarga :)

Balas

keren mas,
[ASK]ini bisa digunain untuk semua blog atau tidak

Balas

wah sepertinya menarik sekali mas daftar icon font awasome ini. Bisa dipelajari dulu ya mas :)

Balas

Udah lamA ndak bersua sama master mas Andes nih....
Makin keren blog sama tutorialnya :)

Balas

Mas memang master nya blogger,banyak trik hebat disini..keren2

Balas

mas andes blognya makin keren aja ya

Balas

iconnya banyak banget ya. kirain sudah satu paket sama blogger

Balas

coba mas andes :)

Balas

lengkap banget mas :) hehee makasih

saya udh pake, tapi ga tau versi berapa

Balas

berbagai peristiwa dan pengalaman di tahun 2013 telah kita lewati bersama. Kenangan dan pengalaman pahit maupun manis, kita rasakan semua nya. Semoga ditahun 2014 ini kita semua bisa meningkat dalam segala hal ya mas :)

Selamat tahun baru 2014 mas andes :)

Balas
avatar
Anonymous

sepertinya kalau mau saya praktekan harus membacanya berulang - ulang sampai paham

Balas

Perlu di bookmark dulu mas... ini sangat penting

Balas

lumayan buat melemaskan jari2 tangan mas haha

Balas

santai saja kang mudah dipahami :p

Balas

buat pedoman saya juga mas hehe

Balas

sukses juga kang dede ;)

Balas

sejahtera juga kang karrysta.. makin sipp ;)

Balas

kurang lebih seperti itu mbak ;) hehe

Balas

ga perlu pake master ah :) hehe

Balas

sama saja mbak ama yang laen :)

Balas

masih utuh mas dari dulu sama kaya gini doang

Balas

blogger ga punya paketan icon mas haha

Balas

monggo mas dicobi ;)

Balas

mungkin yang 3.2.1 mbak versi sebelumnya

Balas

selamat tahun baru juga mbak ririn ;)

Balas

sama seperti saya mang

Balas

Kalo saya udah keriting Mas ngetik sebanyak itu :)

Balas

keren mas saya praktekan dulu deh tutorial nya :D

Balas

mas andes pinter banget yaa. keren mas

Balas

iya kang kayaknya memang versi itu :)

Balas

muantap mas, ijijn bookmark dulu ya, jangan lupa kunjungi website kumuh ane :D
fahmyramdhani.blogspot.com

Balas

Sukses.. walaupun pertamanya gak muncul :D

Balas

Wah lengkap banget mas, bisa tak praktekin kapan-kapan...

Salam kenal dan semoga sukses selalu ya mas

Balas
avatar
Anonymous

Manteb nih kang, tutornya sangat bermanfaat
Tapi ane kok baru tau ya?

Balas

aku hadir menyapa sahabat di awal tahun 2014....,
keep happy blogging always...salam dari Makassar :-)

Balas

keren mas, tapi kira2 buat loading blog berat gk yaa ?
http://www.portalfilmterbaru.com/2014/01/film-million-dollar-arm-2014-bioskop.html

Balas

gak apa-apa mas sekalian olah raga biar jari-jarinya tambah ok hehe...

Balas

udah lama nih nggak mampir di blognya mas Andes, keren juga yah mas kalau menggunakan icon font awasome seperti ini, apalagi fontnya banyak banget, makasih mas :)
Oh iya selamat tahun baru yah mas Andes :)

Balas
avatar
Anonymous

dulu saya kira orang orang itu copas iconnya, ternyata begini caranya
saya ijin ambil dulu ya mas :3

Balas

banyak macem-macem ya mas tentang font ini. Bisa buat pilihan untuk pembuatan teks di artikel ya. Luar biasa mas andes share nya :)

Balas

Benerkan..ciri master
Jawabannya..yak kaya gono...hehe
Sukses trus ya mas

Balas

iconnya juga keren-keren yah mbak jadi gatel pengen nyoba nih hehe...

Balas

KUnjungan siank mas..

Balas

Keren Mas, complete list simbolnya

Balas

bagus bog nya.. gan

Balas

Kunjungan minggu siang yang panas poll..apa kabar mas andesnya hehehe lama saya ga nongol dengan sedikit kesibukan di dunia nyata , sampai2 harus vacum blogging hampir 1 bulan wkwkwk...tutornya makin up to date seiring perkembangan HTML saat ini

Balas

keren mas icon-iconnya pangen nyoba sih tapi masih belum sempat hehe...

Balas

Hadir kembali du artikel Mas Andes tentang list icon font
Banyaka sekalai List iconya yah Mas Andes :)

Balas

Baca dengan teliti artikel ini agar saya lebih paham
Terima kasih Mas Andes sudah berbagi salam hangat :)

Balas

pengen nyoba nerapin tp kok masih bingung. klo saya sering2 tanya tentang masalah font ini tolong jangan bosan ngejawabnya ya, mas.

Balas
avatar
Anonymous

akhirnya ketemu juga setelah lama udah cari-cari tpi gak tau namanya hehe;D

Balas

oh iya mas andes....
itu bisa dibuat gak.. icon nya berputar saat mouse menyentuh atau saat diklik aja dia berputar.
bukan berputar putar trus mas..
contoh nya pada button slider carousel nya mas andes, yang ada tanda - dan +
gitu.

TQ

Balas

pake CSS rotate & transitions mas

Balas

Saya pernah pakai ini Icon font aesome. namun setealh terpasang
Koq di cek W3C HTML dan CSS Koq jadi penyumbang Error
Kalau yang ini belum coba. karena saya gak hapal versinya :)
Mohon pencerahanya Mas Andes terima kasih :-bd

Balas

sama saja kang, bedanya versi ini dari versi sebelumnya adalah penambahan 11 icon baru dan pergantian nama icon.
kalo masalah validasi, supaya bisa valid bisa donlod filenya kemudian edit CSSnya dengan menghapus prefix yang menyebabkan error lalu uplod lagi ke host kang karrys ato bisa menggunakan layanan host gratisan.
ini link donlodnyahttp://fortawesome.github.io/Font-Awesome/assets/font-awesome-4.0.3.zip

Balas

cara memasang font awesome di salah satu menu gimana Mas.. seperti menu diatas blog ini.. dan pembuatan css rotate dan transition pada font awesome..

Balas

tinggal tambahin tag <i> didalam link menu, contoh<a href='#'><i class='fa fa-desktop/> Menu</a>
untuk mengatur rotate liat lagi di atas sudah ada caranya.
untuk membuat transistion tergantung dari element apa yang akan di kasih efek transition

Balas

Untuk transisinya mas di bagian html

Balas

kalo transisi menggunakan CSS mas

Balas

css transisinya apa mas...

Balas

hahaha... oke thanks mas.... bisa ...
Maaf baru bisa balas sekarang... soal nya sibuk kuliah ini....
ini aja baru bisa bebas, hahaha

Balas

misal pakai script <script type='text/javascript'>document.write(unescape('<link href="//netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.css" rel="stylesheet"/>');
</script>

Balas

Sudah saya coba terapkan.. terima kasih mas..

Balas

bang klok mau bikin iconnya mutar di footer tertentu g mn yaa bang... tolong di lihat di http://bulshitman.blogspot.com

Balas
  • Berkomentarlah dengan sopan dan bijak sesuai dengan isi konten.
  • Komentar yang tidak diperlukan oleh pembaca lain [spam] akan segera dihapus.
  • Apabila artikel yang berjudul "List Icon Font Awesome dan CSS Value Content V4.0.3" ini bermanfaat, share ke jejaring sosial.
Konversi Kode