Sekedar berbagi pengetahuan Apa itu font awesome? - Font Awesome merupakan kumpulan icon dan tombol yang berbasis font. yang artinya, ketika kalian membutuhkan ikon di blog, tidak lagi menggunakan gambar / image melainkan diganti dengan menggunakan Css Value Content dari Font Awesome itu sendiri, yang tentunya akan lebih mempercepat proses loading blog anda.
Jika anda sudah jelas tentang apa itu Font Awesome, selanjutnya ashamod akan memberikan list lengkap icon Fon Awesome beserta Value Contentnya. Font Awesome icon bisa disisipkan dengan pseudo elemen :after dan juga :before.
Untuk menambahkan icon Font Awesome pada pseudo elemen :before, tentunya kalian 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"
Sekian tentang List Icon Font Awesome Lengkap dan CSS Value Content, semoga berguna...
Post a Comment