List icon font Awesome and 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.

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/