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

List Lengkap Icon Font Awesome dan CSS Value Content

Daftar icon Font Awesome lengkap beserta CSS value content.
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/

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

99 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. iya listnya super lengkap.. ada penunjuk arah segala :D ..
    .
    1. lumayan.. mostingnya pegel :D
  2. perlu pisan ieu, ty ty ty |o|
    1. sami2 kang ben :)
    2. 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
  3. CSS icon itu bisa di pasang di blog gak ?
    1. kaya obrolan saya sama kang beben, bisa aja sebagian, tapi tetep harus embed font
  4. 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 :)
    1. waduh... saya blom pernah buka di opmin sob... nanti saya coba cari tau masalahnya
  5. Wih, keren kang :-d, kalau boleh tau bagaimana ya cara buat emoticon seperti di komentar blog ini kang? salam www.tuliskan.com
    1. sebenernya sama aja sama yang lain, cuman ganti smileynya aja
  6. 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?
    1. Cukup 2 langkah aja sbnrnya...
      1. Tambah meta tag (rel author)
      2. Di Google plus, tambahkan kontributor di
  7. izin copas yah kang ismet ^_^ .. buat dokumentasi .. gak akan lupa nempel sumber kok .. thanks for sharing kang ismet .. sukses terus yaah
    1. mangga kang..... :)
  8. terimakasih banyak mas sudah berbagi icon nya keren2 loh mas , mantab
    1. hehehe... sama2 sob
  9. Banyak dan lengkap Kang,maaf Kang belum bisa pakai icont fontnya :)
    1. kenapa harus meminta maaf... ini bukan kewajiba ko :)
  10. Lengkap dan keren2 iconnya...tapi, sayangnya belum mudeng cara pakenya :(
    1. hehee.. kan udah ada caranya disini http://blog.kangismet.net/2013/06/cara-menggunakan-ikon-font-awesome-di.html
  11. kang, kunjungan baliknya dan komentar balik ya :D Salam Blogger Indonesia http://zoolshare.blogspot.com/
    1. ditunggu aja sob
  12. 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
    1. sama2 sob... dipelajari aja.. nanti juga terbiasa ko :)
  13. keren-keren kang fontnya =D |o|
    1. buatan orang ko :)
  14. wah kang ismett, muaknyoss iki !!
    pegel ora ? :p

    tengkyuu :) ini yang tak bingung, eh udah di post disini toh hehe
    1. ga pegel ko.. cuman puegeeeelllll.... :D
  15. 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. :)
    1. xixixix.... silahkan sob.. jadi malu dibilang handsome :D
  16. makasih ya pak admin dah share tips dan ilmunya.
    maklum baru nih.
    semoga manfaat
    sekalian saya klik iklan ppcnya
    1. sama2 sob....
  17. komplit..kang hahahay..
  18. kang, cara memakai ikon tsb di editor blog bagaimana ???
    1. Kunjungi link ini sob http://blog.kangismet.net/2013/06/cara-menggunakan-ikon-font-awesome-di.html
  19. thanks mas, jadi nambah keren diliat..

    http://dedy-suna.blogspot.com/
  20. izin repost nya kang , hehe ! mangfaat pisan .. :-d , sing sering kang update siga nu karieu !! nuju ngoleksi simkuring .. haha
  21. 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
    1. ga bisa sob... itu kan udah ada format dari sananya :)
  22. Akhirnya, setelah berusaha sekian lama berhasil juga saya pasang di blogku.
    makasih Kang Ismet.
  23. wow komplit keren kang :)
  24. awalnya, mau ngeposting juga Kang, tapi buset capeeek aku... :D baru sampai setengah jalan, jadi nggak jadi deh ^_^
  25. widih, ane kira listnya itu gambar, ternyata dengan tulisan sendiri.
    awesome :D
  26. Thx Kang Is~ Akhirnya bisa pertamax juga di blog gw ._.
    1. ???
  27. Sangat banyak dan lengkap iconya yah Kang.?
    Menarik perlu di simak nih, untuk menghias di blog saya
    Terima kasih Kang sudah berbagi artikel ini
  28. maaf nih kang OOT :) mau nanya semua warna yang ada di blog kang ismet ini dapet dari mana ya :)
    1. cari aja di gugel sob dgn kata kunci "flat UI design color"
  29. do you know what codes i can use for instagram or flickr? i'm trying to add them to the zikazev template. thanks!
  30. hatur nuhun kang :)
    1. ehh kang ismet ternyata orang sunda juga to :D
  31. halaman ini benar- benar sangat membantu kang, sukses selalu... ijin bookmark.. :)
    1. sama2 sob.. makasih :)
  32. wah kang .. banyak bener wkwkwk tinggal milih milih nih :v
    btw kang kalo pake before gabisa pake hover ya kang ?
  33. masih bingung nich kang cara masangnya.
  34. 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 :(
  35. wihihi.. terimakasih, kang. kunjungan perdana. :)
  36. setelah saya pasang font awesome kok blog saya di CSS3 nya langsung banyak error dan warning yah ?
    ada solusi nya gak kang
  37. coba tex :D
  38. kang mohon ijin pasang artikel ini di static page blog saya ya kang buat referensi pengunjung blog saya.
  39. makasih kang, tutorial bermanfaat sekali :D

    mampir yuk 9cups.blogspot.com
  40. Kang.. anda juga membuka jasa untuk membuat tamplate blog kan kang?
  41. terima kasih kang. Perlu icoba nih
  42. Complete gan :D
    http://p4ndoo.blogspot.com
  43. :-bd
  44. icon yang sangat lengkap
  45. Keren kang visit trikterbaruseo.blogspot.com/
  46. Tedi Arif
    Komentar ini telah dihapus oleh pengarang.
  47. Kode htmlnya kyak gimana ? saya kurang ngerti
  48. diantos Kangis tentang Validasi CSS Font Awesome.
  49. hatur nuhun kang!!
  50. kurang ngerti nih kang
  51. Numpang nanya mas saya ini kan newbie blogger...
    Pseudo itu apa sih mas... ??

    Maaf, klo mengganggu :D :)
  52. kang ismet ini template blognya saya minta kang boleh gk... ?? klo bisa free ya kang :) :D =D
  53. update tutoril donk kaya navigasi mas.
  54. Keren bang, ini yang ane cari-cari... Thanks banget infonya :D
  55. TQ kang :)
    akang ismet memang cakep :p
  56. Faiz A
    Komentar ini telah dihapus oleh pengarang.
  57. Saya Nulis OOT Langsung Dihapus wkwkwkwk
  58. Ikon awesome nya lengkap banget, cocok buat Blog Berita
  59. kang ismet klw icon-nya gx tampil gmn ya sollusinya??
  60. 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..
  61. icon bbm gimana caranya ya
  62. kang, mau nanya donk. itu cara ngebuat garis2 warna warni itu gmana sih?
Cookie Consent
We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.
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.