List Lengkap Icon Font Awesome dan 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 
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/
99 komentar
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
5. Untuk menghapus komentar, geser kursor ke sebelah kanan komentar Anda.
image quote pre code
akang ismet memang cakep :p
Pseudo itu apa sih mas... ??
Maaf, klo mengganggu :D :)
http://p4ndoo.blogspot.com
mampir yuk 9cups.blogspot.com
ada solusi nya gak kang
de5ain.blogspot.com/2013/12/font-awesome-icon-403.html
mungkin hanya penambahan icon,tapi pemanggilannya lebih rumit sekarang :(
btw kang kalo pake before gabisa pake hover ya kang ?
Menarik perlu di simak nih, untuk menghias di blog saya
Terima kasih Kang sudah berbagi artikel ini
awesome :D
makasih Kang Ismet.
http://dedy-suna.blogspot.com/
maklum baru nih.
semoga manfaat
sekalian saya klik iklan ppcnya
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. :)
pegel ora ? :p
tengkyuu :) ini yang tak bingung, eh udah di post disini toh hehe
1. Tambah meta tag (rel author)
2. Di Google plus, tambahkan kontributor di
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 :)
<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
.