Cara Menambahkan Icon Font Awesome Pada Elemen :before


Halo sobat blogger sebelumnya saya sudah mengulas tentangCara Mendapat Penghasilan Dari Blog Tanpa Google Adsense pada kesempatan kali ini saya akan mengajak anda untuk belajar Cara Menambahkan Icon Font Awesome Pada Elemen :before

Untuk bisa menggunakan Font Awesome ini, sobat harus menyimpan CSSnya di atas </head>
<link href="//netdna.bootstrapcdn.com/font-awesome/3.1.1/css/font-awesome.min.css" rel="stylesheet"></link>

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"

Cukup sekian dulu posting saya tentang Cara Menambahkan Icon Font Awesome Pada Elemen :before semoga bermanfaat.


Cara Menambahkan Icon Font Awesome Pada Elemen :before Cara Menambahkan Icon Font Awesome Pada Elemen :before Reviewed by Laros on Sabtu, Oktober 01, 2016 Rating: 5
Rekomendasi Untuk Anda × +
Add Comments

Tidak ada komentar:

Diberdayakan oleh Blogger.