List Lengkap Icon Font Awesome dan CSS Value Content
Kang Ismet
Complete list of Font Awesome icons and their CSS content values - Pada postingang sebelumnya saya menjelaskan bagaimana cara menambahkan icon Font Awesome di Blog. Saat ini saya akan memberikan list lengkap icon Fon Awesome beserta Value Contentnya. Selain cara yang telah saya sebutkan sebelumnya, Font Awesome icon juga bisa disisipkan dengan pseudo elemen 
Untuk menambahkan icon Font Awesome pada pseudo elemen
Berikut ini list lengkap icon Font Awesome dan CSS value content
:before.Untuk menambahkan icon Font Awesome pada pseudo elemen
:before, tentunya sobat harus mengetahui value content dari icon tersebut. Contoh penggunaan :.element {
position: relative;
}
/*ganti conten value sesuai
dengan icon yang diperlukan*/
.element:before {
content: "\f000";
font-family: FontAwesome;
font-style: normal;
font-weight: normal;
text-decoration: inherit;
/*--sesuaikan sebagai tambahan--*/
color: #000;
font-size: 18px;
padding-right: 0.5em;
position: absolute;
top: 10px;
left: 0;
}Berikut ini list lengkap icon Font Awesome dan CSS value content
Icon Aplikasi Website
- icon-adjust "\f042"
- icon-anchor "\f13d"
- icon-asterisk "\f069"
- icon-ban-circle "\f05e"
- icon-bar-chart "\f080"
- icon-barcode "\f02a"
- icon-beaker "\f0c3"
- icon-beer "\f0fc"
- icon-bell "\f0a2"
- icon-bell-alt "\f0f3"
- icon-bolt "\f0e7"
- icon-book "\f02d"
- icon-bookmark "\f02e"
- icon-bookmark-empty "\f097"
- icon-briefcase "\f0b1"
- icon-bullhorn "\f0a1"
- icon-bullseye "\f140"
- icon-calendar "\f073"
- icon-calendar-empty "\f133"
- icon-camera "\f030"
- icon-camera-retro "\f083"
- icon-certificate "\f0a3"
- icon-check-empty "\f096"
- icon-check-minus "\f147"
- icon-check-sign "\f14a"
- icon-check "\f046"
- icon-circle "\f111"
- icon-circle-blank "\f10c"
- icon-cloud "\f0c2"
- icon-cloud-download "\f0ed"
- icon-cloud-upload "\f0ee"
- icon-code "\f121"
- icon-code-fork "\f126"
- icon-coffee "\f0f4"
- icon-cog "\f013"
- icon-cogs "\f085"
- icon-collapse-alt "\f117"
- icon-comment "\f075"
- icon-comments "\f086"
- icon-comments-alt "\f0e6"
- icon-credit-card "\f09d"
- icon-crop "\f125"
- icon-dashboard "\f0e4"
- icon-desktop "\f108"
- icon-download "\f01a"
- icon-download-alt "\f019"
- icon-edit "\f044"
- icon-edit-sign "\f14b"
- icon-ellipsis-horizontal "\f141"
- icon-ellipsis-vertical "\f142"
- icon-envelope "\f003"
- icon-envelope-alt "\f0e0"
- icon-eraser "\f12d"
- icon-exchange "\f0ec"
- icon-exclamation "\f12a"
- icon-exclamation-sign "\f06a"
- icon-expand-alt "\f116"
- icon-external-link "\f08e"
- icon-external-link-sign "\f14c"
- icon-eye-open "\f06e"
- icon-eye-close "\f070"
- icon-facetime-video "\f03d"
- icon-fighter-jet "\f0fb"
- icon-film "\f008"
- icon-filter "\f0b0"
- icon-fire-extinguisher "\f134"
- icon-fire "\f06d"
- icon-flag-alt "\f11d"
- icon-flag-checkered "\f11e"
- icon-folder-close "\f07b"
- icon-folder-open "\f07c"
- icon-folder-close-alt "\f114"
- icon-folder-open-alt "\f115"
- icon-food "\f0f5"
- icon-frown "\f119"
- icon-gamepad "\f11b"
- icon-gift "\f06b"
- icon-glass "\f000"
- icon-globe "\f0ac"
- icon-group "\f0c0"
- icon-hdd "\f0a0"
- icon-headphones "\f025"
- icon-heart-empty "\f08a"
- icon-heart "\f004"
- icon-home "\f015"
- icon-inbox "\f01c"
- icon-info-sign "\f05a"
- icon-info "\f129"
- icon-key "\f084"
- icon-keyboard "\f11c"
- icon-laptop "\f109"
- icon-leaf "\f06c"
- icon-legal "\f0e3"
- icon-lemon "\f094"
- icon-level-up "\f148"
- icon-level-down "\f149"
- icon-lightbulb "\f0eb"
- icon-location-arrow "\f124"
- icon-lock "\f023"
- icon-magic "\f0d0"
- icon-magnet "\f076"
- icon-mail-reply "\f112"
- icon-mail-reply-all "\f122"
- icon-mail-forward "\ff064"
- icon-map-marker "\f041"
- icon-meh "\f11a"
- icon-microphone "\f130"
- icon-microphone-off "\f131"
- icon-minus "\f068"
- icon-minus-sign "\f056"
- icon-minus-sign-alt "\f146"
- icon-mobile-phone "\f10b"
- icon-money "\f0d6"
- icon-move "\f047"
- icon-music "\f001"
- icon-off "\f011"
- icon-ok "\f00c"
- icon-ok-sign "\f058"
- icon-ok-circle "\f05d"
- icon-pencil "\f040"
- icon-phone "\f095"
- icon-phone-sign "\f098"
- icon-picture "\f03e"
- icon-plane "\f072"
- icon-google-plus-sign "\f0d4"
- icon-google-plus "\f0d5"
- icon-print "\f02f"
- icon-pushpin "\f08d"
- icon-puzzle-piece "\f12e"
- icon-qrcode "\f029"
- icon-question-sign "\f059"
- icon-question "\f128"
- icon-quote-left "\f10d"
- icon-quote-right "\f10e"
- icon-random "\f074"
- icon-refresh "\f021"
- icon-remove-sign "\f057"
- icon-remove-circle "\f05c"
- icon-remove "\f00d"
- icon-reorder "\f0c9"
- icon-reply "\f112"
- icon-reply-all "\f122"
- icon-resize-vertical "\f07d"
- icon-resize-horizontal "\f07e"
- icon-retweet "\f079"
- icon-road "\f018"
- icon-rocket "\f135"
- rotate-left "\f0e2"
- rotate-right "\f01e"
- icon-rss "\f09e"
- icon-rss-sign "\f143"
- icon-screenshot "\f05b"
- icon-search "\f002"
- icon-share "\f045"
- icon-share-alt "\f064"
- icon-share-sign "\f14d"
- icon-shield "\f132"
- icon-shopping-cart "\f07a"
- icon-sign-blank "\f0c8"
- icon-signal "\f012"
- icon-signin "\f090"
- icon-signout "\f08b"
- icon-sitemap "\f0e8"
- icon-smile "\f118"
- icon-sort "\f0dc"
- icon-sort-down "\f0dd"
- icon-sort-up "\f0de"
- icon-spinner "\f110"
- icon-star "\f005"
- icon-star-empty "\f006"
- icon-star-half-full "\f123"
- icon-star-half-empty "\f123"
- icon-suitcase "\f0f2"
- icon-tablet "\f10a"
- icon-tag "\f02b"
- icon-tags "\f02c"
- icon-tasks "\f0ae"
- icon-terminal "\f120"
- icon-thumbs-up "\f087"
- icon-thumbs-down "\f088"
- icon-ticket "\f145"
- icon-time "\f017"
- icon-tint "\f043"
- icon-trash "\f014"
- icon-trophy "\f091"
- icon-truck "\f0d1"
- icon-umbrella "\f0e9"
- icon-unlock "\f09c"
- icon-unlock-alt "\f13e"
- icon-upload "\f01b"
- icon-upload-alt "\f093"
- icon-user-md "\f0f0"
- icon-user "\f007"
- icon-volume-off "\f026"
- icon-volume-down "\f027"
- icon-volume-up "\f028"
- icon-warning-sign "\f071"
- icon-wrench "\f0ad"
- icon-zoom-in "\f00e"
- icon-zoom-out "\f010"
Icon Teks Editor
- icon-file "\f016"
- icon-file-alt "\f0f6"
- icon-cut "\f0c4"
- icon-copy "\f0c5"
- icon-paste "\f0ea"
- icon-save "\f0c7"
- icon-undo "\f0e2"
- icon-repeat "\f01e"
- icon-text-height "\f034"
- icon-text-width "\f035"
- icon-align-left "\f036"
- icon-align-center "\f037"
- icon-align-right "\f038"
- icon-align-justify "\f039"
- icon-indent-left "\f03b"
- icon-indent-right "\f03c"
- icon-font "\f031"
- icon-bold "\f032"
- icon-italic "\f033"
- icon-strikethrough "\f0cc"
- icon-underline "\f0cd"
- icon-superscript "\f12b"
- icon-subscript "\f12c"
- icon-link "\f0c1"
- icon-unlink "\f127"
- icon-paper-clip "\f0c6"
- icon-eraser "\f12d"
- icon-columns "\f0db"
- icon-table "\f0ce"
- icon-th "\f00a"
- icon-th-list "\f00b"
- icon-th-large "\f009"
- icon-list "\f03a"
- icon-list-ul "\f0ca"
- icon-list-ol "\f0cb"
- icon-list-alt "\f022"
Icon Penunjuk
- icon-angle-left "\f104"
- icon-angle-right "\f105"
- icon-angle-up "\f106"
- icon-angle-down "\f107"
- icon-arrow-left "\f060"
- icon-arrow-right "\f061"
- icon-arrow-up "\f062"
- icon-arrow-down "\f063"
- icon-caret-down "\f0d7"
- icon-caret-up "\f0d8"
- icon-caret-left "\f0d9"
- icon-caret-right "\f0da"
- icon-chevron-left "\f053"
- icon-chevron-right "\f054"
- icon-chevron-up "\f077"
- icon-chevron-down "\f078"
- icon-chevron-sign-left "\f137"
- icon-chevron-sign-right "\f138"
- icon-chevron-sign-up "\f139"
- icon-chevron-sign-down "\f13a"
- icon-circle-arrow-left "\f0a8"
- icon-circle-arrow-right "\f0a9"
- icon-circle-arrow-up "\f0aa"
- icon-circle-arrow-down "\f0ab"
- icon-double-angle-left "\f100"
- icon-double-angle-right "\f101"
- icon-double-angle-up "\f102"
- icon-double-angle-down "\f103"
- icon-hand-right "\f0a4"
- icon-hand-left "\f0a5"
- icon-hand-up "\f0a6"
- icon-hand-down "\f0a7"
Icon Video Player
- icon-play "\f04b"
- icon-play-sign "\f144"
- icon-play-circle "\f01d"
- icon-pause "\f04c"
- icon-stop "\f04d"
- icon-eject "\f052"
- icon-forward "\f04e"
- icon-fast-forward "\f050"
- icon-step-backward "\f048"
- icon-step-forward "\f051"
- icon-fullscreen "\f0b2"
- icon-resize-full "\f065"
- icon-resize-small "\f066"
Icon Merk
- icon-css3 "\f13c"
- icon-facebook-sign "\f082"
- icon-facebook "\f09a"
- icon-twitter-sign "\f081"
- icon-twitter "\f099"
- icon-github "\f09b"
- icon-github-sign "\f092"
- icon-html5 "\f13b"
- icon-linkedin "\f0e1"
- icon-linkedin-sign "\f08c"
- icon-maxcdn "\f136"
- icon-pinterest "\f0d2"
- icon-pinterest-sign "\f0d3"
- icon-google-plus "\f0d5"
- icon-google-plus-sign "\f0d4"
Icon Kedokteran
- icon-ambulance "\f0f9"
- icon-beaker "\f0c3"
- icon-h-sign "\f0fd"
- icon-hospital "\f0f8"
- icon-medkit "\f0fa"
- icon-plus-sign-alt "\f0fe"
- icon-stethoscope "\f0f1"
- icon-user-md "\f0f0"
Resource : http://astronautweb.co/snippet/font-awesome/ - http://fortawesome.github.io/Font-Awesome/icons/
iya listnya super lengkap.. ada penunjuk arah segala :D ..
.
lumayan.. mostingnya pegel :D
perlu pisan ieu, ty ty ty |o|
sami2 kang ben :)
kudu make link CSS Font Awesome!!!
<link href='//netdna.bootstrapcdn.com/font-awesome/3.1.1/css/font-awesome.min.css' rel='stylesheet'/>
Kirain teh dah jadi kek gitu, gak jadi deh zz..z.zzz :D
CSS icon itu bisa di pasang di blog gak ?
kaya obrolan saya sama kang beben, bisa aja sebagian, tapi tetep harus embed font
Lengkap and complette !!!
daftar/list nya lengkap kang, saya bookmark dulu :)
owh ya, formulir komentarnya kenapa nggk mau muncul saat dibuka via opera mini mobile (hp) ???
thanks before :)
waduh... saya blom pernah buka di opmin sob... nanti saya coba cari tau masalahnya
Wih, keren kang :-d, kalau boleh tau bagaimana ya cara buat emoticon seperti di komentar blog ini kang? salam www.tuliskan.com
sebenernya sama aja sama yang lain, cuman ganti smileynya aja
Oh iya kang, cara memunculkan foto profil Google+ di hasil pencarian google yang benar bagaimana kang, apakah dengan rel author, halaman About, atau apa kang?
Cukup 2 langkah aja sbnrnya...
1. Tambah meta tag (rel author)
2. Di Google plus, tambahkan kontributor di
izin copas yah kang ismet ^_^ .. buat dokumentasi .. gak akan lupa nempel sumber kok .. thanks for sharing kang ismet .. sukses terus yaah
mangga kang..... :)
terimakasih banyak mas sudah berbagi icon nya keren2 loh mas , mantab
hehehe... sama2 sob
Banyak dan lengkap Kang,maaf Kang belum bisa pakai icont fontnya :)
kenapa harus meminta maaf... ini bukan kewajiba ko :)
Lengkap dan keren2 iconnya...tapi, sayangnya belum mudeng cara pakenya :(
hehee.. kan udah ada caranya disini http://blog.kangismet.net/2013/06/cara-menggunakan-ikon-font-awesome-di.html
kang, kunjungan baliknya dan komentar balik ya :D Salam Blogger Indonesia http://zoolshare.blogspot.com/
ditunggu aja sob
btw masangnya agak susah om, harus diatur lagi nyesuain dengan elemen nya,, :D tapi udah ada beberapa yang berhasil ane terapin di blog ane,, thanks,, :D
sama2 sob... dipelajari aja.. nanti juga terbiasa ko :)
keren-keren kang fontnya =D |o|
buatan orang ko :)
wah kang ismett, muaknyoss iki !!
pegel ora ? :p
tengkyuu :) ini yang tak bingung, eh udah di post disini toh hehe
ga pegel ko.. cuman puegeeeelllll.... :D
Keren-keren euy icon nya kang. Persis seperti julukan nya 'AWESOME', apalagi yang mosting ini 'HANDSOME'. Lengkap lah pokona mah! :D
Btw, tadi lihat sekilas dari beberapa icon di atas, ada 'icon-microphone'.. jadi terbayang-bayang feature voice control nya Google Chrome nih saya. Saya copas diam-diam ya koleksi icon nya kang, lumayan buat koleksi pribadi. :)
xixixix.... silahkan sob.. jadi malu dibilang handsome :D
makasih ya pak admin dah share tips dan ilmunya.
maklum baru nih.
semoga manfaat
sekalian saya klik iklan ppcnya
sama2 sob....
komplit..kang hahahay..
kang, cara memakai ikon tsb di editor blog bagaimana ???
Kunjungi link ini sob http://blog.kangismet.net/2013/06/cara-menggunakan-ikon-font-awesome-di.html
thanks mas, jadi nambah keren diliat..
http://dedy-suna.blogspot.com/
izin repost nya kang , hehe ! mangfaat pisan .. :-d , sing sering kang update siga nu karieu !! nuju ngoleksi simkuring .. haha
Kira-kira ngerubah gambar di atas bisa ga yah ? jadi pengen ambil icon yang dipake aja,kan enak bisa tinggal taruh embed code aja,simple lagi :-d
ga bisa sob... itu kan udah ada format dari sananya :)
Akhirnya, setelah berusaha sekian lama berhasil juga saya pasang di blogku.
makasih Kang Ismet.
wow komplit keren kang :)
awalnya, mau ngeposting juga Kang, tapi buset capeeek aku... :D baru sampai setengah jalan, jadi nggak jadi deh ^_^
widih, ane kira listnya itu gambar, ternyata dengan tulisan sendiri.
awesome :D
Thx Kang Is~ Akhirnya bisa pertamax juga di blog gw ._.
???
Sangat banyak dan lengkap iconya yah Kang.?
Menarik perlu di simak nih, untuk menghias di blog saya
Terima kasih Kang sudah berbagi artikel ini
maaf nih kang OOT :) mau nanya semua warna yang ada di blog kang ismet ini dapet dari mana ya :)
cari aja di gugel sob dgn kata kunci "flat UI design color"
do you know what codes i can use for instagram or flickr? i'm trying to add them to the zikazev template. thanks!
hatur nuhun kang :)
ehh kang ismet ternyata orang sunda juga to :D
halaman ini benar- benar sangat membantu kang, sukses selalu... ijin bookmark.. :)
sama2 sob.. makasih :)
wah kang .. banyak bener wkwkwk tinggal milih milih nih :v
btw kang kalo pake before gabisa pake hover ya kang ?
masih bingung nich kang cara masangnya.
kang , font awesome udah update versi 4 :D
de5ain.blogspot.com/2013/12/font-awesome-icon-403.html
mungkin hanya penambahan icon,tapi pemanggilannya lebih rumit sekarang :(
wihihi.. terimakasih, kang. kunjungan perdana. :)
coba tex :D
kang mohon ijin pasang artikel ini di static page blog saya ya kang buat referensi pengunjung blog saya.
makasih kang, tutorial bermanfaat sekali :D
mampir yuk 9cups.blogspot.com
Kang.. anda juga membuka jasa untuk membuat tamplate blog kan kang?
Complete gan :D
http://p4ndoo.blogspot.com
:-bd
icon yang sangat lengkap
Keren kang visit trikterbaruseo.blogspot.com/
Komentar ini telah dihapus oleh Tedi Arif sebagai penulis.
Kode htmlnya kyak gimana ? saya kurang ngerti
diantos Kangis tentang Validasi CSS Font Awesome.
hatur nuhun kang!!
kurang ngerti nih kang
Numpang nanya mas saya ini kan newbie blogger...
Pseudo itu apa sih mas... ??
Maaf, klo mengganggu :D :)
kang ismet ini template blognya saya minta kang boleh gk... ?? klo bisa free ya kang :) :D =D
update tutoril donk kaya navigasi mas.
Keren bang, ini yang ane cari-cari... Thanks banget infonya :D
TQ kang :)
akang ismet memang cakep :p
Komentar ini telah dihapus oleh Faiz A sebagai penulis.
Saya Nulis OOT Langsung Dihapus wkwkwkwk
Ikon awesome nya lengkap banget, cocok buat Blog Berita
kang ismet klw icon-nya gx tampil gmn ya sollusinya??
saya make icon ini dijoomla, pas di localhost gak ada masalah eh pas diupload ke hosting jadi berulah, alias icon2nya gak nongol, baik difrontend maupun di back end. MUmmet..
icon bbm gimana caranya ya
kang, mau nanya donk. itu cara ngebuat garis2 warna warni itu gmana sih?