internet marketing

List Lengkap Icon Font Awesome dan CSS Value Content

No comments
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/ - http://fortawesome.github.io/Font-Awesome/icons/

No comments :

Post a Comment