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 :before.font awesome icons

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/

102 komentar

iya listnya super lengkap.. ada penunjuk arah segala :D ..
.

Balas

lumayan.. mostingnya pegel :D

Balas

wakkakaka iya tuh banyak juga kodenya repot bener didalam mode HTML nya :D

Balas

perlu pisan ieu, ty ty ty |o|

Balas

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

Balas

CSSna we copy kang ben... :)

Balas

moal bisa teuh, embed file fonts harus ada, kan eta icon di renderna via embed font
gituh :)
kirain teh manual geus jadi Ex: \2620 <-- kode tangkorak, tanpa embed font :-d

Balas

acan mang... pake @font-face keneh :)

Balas

CSS icon itu bisa di pasang di blog gak ?

Balas

heheu..
mupeng banget ya pasti bikinnya, kang..
@@,

Balas

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

Balas

Wih, keren kang :-d, kalau boleh tau bagaimana ya cara buat emoticon seperti di komentar blog ini kang? salam www.tuliskan.com

Balas

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?

Balas

kaya obrolan saya sama kang beben, bisa aja sebagian, tapi tetep harus embed font

Balas

waduh... saya blom pernah buka di opmin sob... nanti saya coba cari tau masalahnya

Balas

sebenernya sama aja sama yang lain, cuman ganti smileynya aja

Balas

Cukup 2 langkah aja sbnrnya...
1. Tambah meta tag (rel author)
2. Di Google plus, tambahkan kontributor di

Balas

izin copas yah kang ismet ^_^ .. buat dokumentasi .. gak akan lupa nempel sumber kok .. thanks for sharing kang ismet .. sukses terus yaah

Balas

terimakasih banyak mas sudah berbagi icon nya keren2 loh mas , mantab

Balas

Banyak dan lengkap Kang,maaf Kang belum bisa pakai icont fontnya :)

Balas

buset sampe mupeng segala :D

Balas

Lengkap dan keren2 iconnya...tapi, sayangnya belum mudeng cara pakenya :(

Balas

kang, kunjungan baliknya dan komentar balik ya :D Salam Blogger Indonesia http://zoolshare.blogspot.com/

Balas

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

Balas

teu nyaho artina abdi mh...

Balas

keren-keren kang fontnya =D |o|

Balas

wah kang ismett, muaknyoss iki !!
pegel ora ? :p

tengkyuu :) ini yang tak bingung, eh udah di post disini toh hehe

Balas

kenapa harus meminta maaf... ini bukan kewajiba ko :)

Balas

hehee.. kan udah ada caranya disini http://blog.kangismet.net/2013/06/cara-menggunakan-ikon-font-awesome-di.html

Balas

sama2 sob... dipelajari aja.. nanti juga terbiasa ko :)

Balas

ga pegel ko.. cuman puegeeeelllll.... :D

Balas

masih pusing cari artikel apa gimn ni belum update2 jg :D

Balas

Tau aja... kehabisan ide.. sudah diambil sama master2, jadi ga ada bahan postingan deh :P

Balas

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

Balas

@@, hehehe masih banyak bang tutorial mengenai coding, coba explor blogg luar :D

Balas

xixixix.... silahkan sob.. jadi malu dibilang handsome :D

Balas

makasih ya pak admin dah share tips dan ilmunya.
maklum baru nih.
semoga manfaat
sekalian saya klik iklan ppcnya

Balas

kang, cara memakai ikon tsb di editor blog bagaimana ???

Balas

Kunjungi link ini sob http://blog.kangismet.net/2013/06/cara-menggunakan-ikon-font-awesome-di.html

Balas

thanks mas, jadi nambah keren diliat..

http://dedy-suna.blogspot.com/

Balas

izin repost nya kang , hehe ! mangfaat pisan .. :-d , sing sering kang update siga nu karieu !! nuju ngoleksi simkuring .. haha

Balas

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

Balas

ga bisa sob... itu kan udah ada format dari sananya :)

Balas

Akhirnya, setelah berusaha sekian lama berhasil juga saya pasang di blogku.
makasih Kang Ismet.

Balas

wow komplit keren kang :)

Balas

awalnya, mau ngeposting juga Kang, tapi buset capeeek aku... :D baru sampai setengah jalan, jadi nggak jadi deh ^_^

Balas

widih, ane kira listnya itu gambar, ternyata dengan tulisan sendiri.
awesome :D

Balas

Thx Kang Is~ Akhirnya bisa pertamax juga di blog gw ._.

Balas

Sangat banyak dan lengkap iconya yah Kang.?
Menarik perlu di simak nih, untuk menghias di blog saya
Terima kasih Kang sudah berbagi artikel ini

Balas

Saya yang baca, dan nyimak segini puyeng nya apa lagi Kang Ismet yang Posting, sangat terima Kasih dengan susah payah Telah posting artikel bermanfaat ini.

Balas

maaf nih kang OOT :) mau nanya semua warna yang ada di blog kang ismet ini dapet dari mana ya :)

Balas

cari aja di gugel sob dgn kata kunci "flat UI design color"

Balas

do you know what codes i can use for instagram or flickr? i'm trying to add them to the zikazev template. thanks!

Balas

ehh kang ismet ternyata orang sunda juga to :D

Balas

sok ah ngumpul bari ngopi hideung...

Balas

halaman ini benar- benar sangat membantu kang, sukses selalu... ijin bookmark.. :)

Balas

wah kang .. banyak bener wkwkwk tinggal milih milih nih :v
btw kang kalo pake before gabisa pake hover ya kang ?

Balas

masih bingung nich kang cara masangnya.

Balas

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

Balas

wihihi.. terimakasih, kang. kunjungan perdana. :)

Balas

setelah saya pasang font awesome kok blog saya di CSS3 nya langsung banyak error dan warning yah ?
ada solusi nya gak kang

Balas

kang mohon ijin pasang artikel ini di static page blog saya ya kang buat referensi pengunjung blog saya.

Balas

makasih kang, tutorial bermanfaat sekali :D

mampir yuk 9cups.blogspot.com

Balas

Kang.. anda juga membuka jasa untuk membuat tamplate blog kan kang?

Balas

terima kasih kang. Perlu icoba nih

Balas

untuk di gunakan seperti akang ini gmna yah caranya ?
apakah dengan menambahkan element:before ini bisa di pasang di tiap tempat seperti sebelh judul , dan sidebar gtu ?
<i class="icon-html5"></i>

trus penulisn kode ny seperti itu saja ata gmn ? tolong donk kasih contoh simple ny ...
seperti gambar di soutbox ny akang ismet ini .. penulisan kode harus nya seperti apa ?

Balas

Complete gan :D
http://p4ndoo.blogspot.com

Balas

Keren kang visit trikterbaruseo.blogspot.com/

Balas
Komentar ini telah dihapus oleh pengarang.

Kode htmlnya kyak gimana ? saya kurang ngerti

Balas

diantos Kangis tentang Validasi CSS Font Awesome.

Balas

Numpang nanya mas saya ini kan newbie blogger...
Pseudo itu apa sih mas... ??

Maaf, klo mengganggu :D :)

Balas

kang ismet ini template blognya saya minta kang boleh gk... ?? klo bisa free ya kang :) :D =D

Balas

Iya....di awali before contoh untuk sidebar

.sidebar h2:before {
content: "\f02c";
font-family: fontAwesome;
font-size: 11px;
font-style: normal;
background: none repeat scroll 0% 0% #35404D;
color: #BF5F5F;
top: 0px;
left: 0px;
padding: 25px;
position: absolute;
text-shadow:1px 0px 1px #000000;
}
.sidebar h2:before {
font-size: 11px;
font-style: normal;
background: none repeat scroll 0% 0% #35404D;
color: #BF5F5F;
top: 0px;
left: 0px;
padding: 7px;
position: absolute;
text-shadow:1px 0px 1px #000000;
}
element {
}

Balas

update tutoril donk kaya navigasi mas.

Balas

Keren bang, ini yang ane cari-cari... Thanks banget infonya :D

Balas

TQ kang :)
akang ismet memang cakep :p

Balas
Komentar ini telah dihapus oleh pengarang.

Saya Nulis OOT Langsung Dihapus wkwkwkwk

Balas

Ikon awesome nya lengkap banget, cocok buat Blog Berita

Balas

kang ismet klw icon-nya gx tampil gmn ya sollusinya??

Balas

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

Balas

icon bbm gimana caranya ya

Balas

kang, mau nanya donk. itu cara ngebuat garis2 warna warni itu gmana sih?

Balas
Komentar ini telah dihapus oleh pengarang.

Poskan Komentar


×
Chat