Februari 04, 2014

Font Awesome CSS Content List


Font Awesome CSS Content List - Font Awesome adalah salah satu webfont yang mempunyai character berupa simbol atau icon unik yang bisa digunakan sebagai property sebuah element pada halaman website. Font ini dapat digunakan sebagai icon pada sebuah element sebagai ganti dari icon dengan file gambar, font awesome ini dirancang untuk membantu para web design dalam mempercepat pekerjaannya dan satu kelebihan merancang design web dengan font ini adalah font awesome ini lebih ringan dibandingkan sobat menggunakan icon dengan file gambar.

Sebelum menggunakan Font Awesome CSS Content List ini sobat wajib meletakan CSS font awesome dibawah ini diatas kode </head>.CSS ini adalah CSS default dari CDN Font Awesome yang berfungsi untuk mengambil data - data font yang akan digunakan membuat element dengan Font Awesome tersebut.

<link href="//netdna.bootstrapcdn.com/font-awesome/3.1.1/css/font-awesome.min.css" rel="stylesheet"/>

Font Awesome CSS Content List

Untuk menambahkan icon Font Awesome pada pseudo elemen atau biasa kita lihat dengan  kode :before atau :after setelah kode element, sebelum membuat sebuah element dengan menggunakan Font Awesome sobat harus mengetahui content code dari icon tersebut. Contoh penggunaannya sebagai berikut :



.element {
    position: relative;

/*--tambahkan css element dibawah--*/
}
 
/*ganti conten value sesuai
dengan icon yang diperlukan*/
 
.element:before {
    content: "\f000"; 
    font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
    text-decoration: inherit;
/*--dibawah ini disesuaikan dengan element--*/
    color: #000;
    font-size: 18px;
    padding-right: 0.5em;
    position: absolute;
    top: 0;
    left: 0;
}


Font Awesome CSS Content List


CSS Content List 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"


CSS Content List 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"

CSS Content List 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"

CSS Content List 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"

CSS Content List 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"

CSS Content List 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"

Untuk tutorial penggunaan font awesome ini silahkan baca artikel "Membuat Download Button Dengan Font Awesome"

Source :
http://blog.kangismet.net/2013/06/daftar-icon-font-awesome-lengkap-dan-css-content-value.html - http://astronautweb.co/snippet/font-awesome/ - http://fortawesome.github.io/Font-Awesome/icons/

2 comments » Font Awesome CSS Content List

cara pembuatan tombol download kayak shiverian.com ini screenshotnya http://4.bp.blogspot.com/-wmwCy92A75s/UvIeYjHPEsI/AAAAAAAAAbw/O_Ol8lme7QU/s1600/tombol.jpg

Balas

Mohon maaf komentar pada blog ini kami moderasi dan tidak akan langsung ditampilkan. Silahkan berikan komentar sesuai judul dan isi artikel. Komentar yang mengandung link aktif / live link, iklan, pornografi, dan semacamnya akan dihapus atau kami masukan pada kategori SPAM.

Catatan :
1. Untuk menyisipkan kode gunakan  <i rel="code">kode yang akan disisipkan</i>
2. Untuk menyisipkan kode panjang gunakan <i rel="pre">kode yang akan disisipkan</i>
3. Untuk menyisipkan quote gunakan <b rel="quote">catatan anda</b>
4. Untuk menyisipkan gambar gunakan <i rel="image">URL gambar</i>
5. Untuk menyisipkan video gunakan <i rel="youtube">URL Video youtube</i>

Keterangan :
Gunakan HTML konverter sebelum menyisipkan kode.
Contoh link image : http://blablabla.com/image.jpg.

Profile yang mengandung broken link akan dihapus tanpa pemberitahuan terlebih dahulu.
Konversi Kode

Top