Daftar Lengkap Icon Font Awesome CSS + Value

Oleh. Kang Rian • 6 • Edit

Postingan Sebelumnya : Cara Pasang Icon Font Awesome di Blog

Pada postingan sebelumnya saya menjelaskan bagaimana cara pasang 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.

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"

Repost from : http://blog.kangismet.net/2013/06/daftar-icon-font-awesome-lengkap-dan-css-content-value.html

Resource : http://astronautweb.co/snippet/font-awesome/ - http://fortawesome.github.io/Font-Awesome/icons/

Bagikan! Sent Share Tweet Pin it!

Kang Rian Ikuti

Web & Graphic Designer - Berpengalaman sejak 2010, fokus membantu Perusahaan / UMKM agar dikenal secara Global melalui Website Profesional & Desain yg Menjual.

Cek. Jasa-Design.web.id

6 komentar

Ridho Muhammad Firdaus7/23/2013 10:59 PM
tiap saya gentos icon, pasti we muka postingan ieu gan. hahahah.
nuhun gan tos mempermudah. hihih. :ngakak :ngakak
BalasHapus
Balasan
Beben Koben2/19/2014 10:39 AM
kurang lengkap, ah paingan ti kang ismet sourcena oge ^_^
BalasHapus
Balasan