Icon Font Awesome dan CSS Value Content

Selamat malam sobat Share Pengetahuan
malam ini saya ingin sedikit berbagi tentang Icon Font Awesome dan CSS Value Content. Postingan kali ini cocok sekali buat sobat yang suka mendesain blog dengan menambah pernak-pernik pada elemen-elemen tertentu sampai yang mendetail dengan menggunakan Font Awesome untuk melengkapi maupun mempercantik blog.
Tapi sebelumnya supaya sobat bisa menggunakan Font Awesome, maka sobat perlu menambahkan styleshet dibawah ini kemudian menyimpannya di atas kode </head>

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

Cara penggunaanya didalam HTML anda hanya perlu menambahkan tag <i> kemudian class dari nama icon yang dipilih. Misal untuk cara penulisannya seperti dibawah ini:

fa-html5

<i class="fa fa-html5"></i> fa-html5

Untuk memperbesar ukuran, maka anda hanya perlu menambahkan class fa-lg, fa-1x, fa-2x, fa-3x, fa-4x, fa-5x dan berikut contohnya:
fa-html5
fa-html5
fa-html5
fa-html5
fa-html5

<p><i class="fa fa-html5 fa-lg"></i> fa-html5</p>
<p><i class="fa fa-html5 fa-2x"></i> fa-html5</p>
<p><i class="fa fa-html5 fa-3x"></i> fa-html5</p>
<p><i class="fa fa-html5 fa-4x"></i> fa-html5</p>
<p><i class="fa fa-html5 fa-5x"></i> fa-html5</p>

Gunakan class fa-ul dan fa-li untuk mempermudah dalam membuat daftar list dan menentukan nama icon.

• fa-check-square
• fa-check-square
• fa-spinner fa-spin
• fa-square

<ul class="fa-ul">
  <li><i class="fa-li fa fa-check-square"></i>fa-check-square</li>
  <li><i class="fa-li fa fa-check-square"></i>fa-check-square</li>
  <li><i class="fa-li fa fa-spinner fa-spin"></i>fa-spinner fa-spin</li>
  <li><i class="fa-li fa fa-square"></i>fa-square</li>
</ul>

Gunakan class pull-right atau pull-left untuk membuat icon berada di sebelah kanan atau sebelah kiri, sedangkan fa-border adalah untuk membuat border pada icon tersebut.

Ini adalah contoh agar icon berada disebelah kiri, agar berada disebelah kanan maka ganti pull-left dengan pull-right.

<i class="fa fa-info-circle fa-2x pull-left fa-border"></i>
Ini adalah contoh agar icon berada disebelah kiri, agar berada disebelah kanan maka ganti pull-left dengan pull-right.

Gunakan class fa-spin untuk membuat icon agar bisa berputar. Ini biasa di kombinasikan pada icon fa-spinner, fa-refresh, dan fa-gigi agar bisa berputar dengan baik. Namun sayangnya animasi CSS3 ini tidak support di IE8 - IE9.

<i class="fa fa-spinner fa-spin"></i>
<i class="fa fa-refresh fa-spin"></i>
<i class="fa fa-cog fa-spin"></i>

Untuk memutar atau membalik icon, gunakan class fa-rotate-* dan fa-flip-*. Ganti tanda bintang (*) dengan nilai berapa derajat icon tersebut akan di rotate.

  normal
  fa-rotate-90
  fa-rotate-180
  fa-rotate-270
  fa-flip-horizontal
  icon-flip-vertical

<i class="fa fa-shield"></i>&nbsp; normal<br>
<i class="fa fa-shield fa-rotate-90"></i>&nbsp; fa-rotate-90<br>
<i class="fa fa-shield fa-rotate-180"></i>&nbsp; fa-rotate-180<br>
<i class="fa fa-shield fa-rotate-270"></i>&nbsp; fa-rotate-270<br>
<i class="fa fa-shield fa-flip-horizontal"></i>&nbsp; fa-flip-horizontal<br>
<i class="fa fa-shield fa-flip-vertical"></i>&nbsp; icon-flip-vertical

Diatas adalah cara untuk menuliskan Font Awesome didalam sebuah markup HTML, dan masih banyak lagi tips trik lainnya yang bisa sobat gunakan didalam Font Awesome ini. Untuk lebih jelasnya sobat bisa mencoba dan berkreasi sendiri agar bisa lebih memahami bermain-main dengan berbagai komponen Bootstrap. Bahkan dengan cara lain anda juga bisa untuk menambahkan icon Font Awesome didalam CSS pada pseudo elemen :before dengan menuliskan value content dari icon tersebut. Berikut skema penggunaan Font Awesome pada pseudo elemen CSS:

.element{
    position: relative;
}
/* ganti tulisan berwarna merah pada value content */ 
.element:before {
    content: "\f000"; 
    font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
    text-decoration: inherit;
/*--custom pada CSS--*/
    color: #000;
    font-size: 18px;
    padding-right: 0.5em;
    position: absolute;
    top: 10px;
    left: 0;
}

Setelah mengetahui cara penggunaan dari Font Awesome baik itu pada CSS maupun HTML maka berikut adalah list dari icon Font Awesome versi 4.0.3 beserta CSS value content.

List Icon Font Awesome dan CSS Value Content V4.0.3

•  fa-glass "\f000"
•  fa-music "\f001"
•  fa-search "\f002"
•  fa-envelope-o "\f003"
•  fa-heart "\f004"
•  fa-star "\f005"
•  fa-star-o "\f006"
•  fa-user "\f007"
•  fa-film "\f008"
•  fa-th-large "\f009"
•  fa-th "\f00a"
•  fa-th-list "\f00b"
•  fa-check "\f00c"
•  fa-times "\f00d"
•  fa-search-plus "\f00e"
•  fa-search-minus "\f010"
•  fa-power-off "\f011"
•  fa-signal "\f012"
•  fa-cog "\f013"
•  fa-trash-o "\f014"
•  fa-home "\f015"
•  fa-file-o "\f016"
•  fa-clock-o "\f017"
•  fa-road "\f018"
•  fa-download "\f019"
•  fa-arrow-circle-o-down "\f01a"
•  fa-arrow-circle-o-up "\f01b"
•  fa-inbox "\f01c"
•  fa-play-circle-o "\f01d"
•  fa-repeat "\f01e"
•  fa-refresh "\f021"
•  fa-list-alt "\f022"
•  fa-lock "\f023"
•  fa-flag "\f024"
•  fa-headphones "\f025"
•  fa-volume-off "\f026"
•  fa-volume-down "\f027"
•  fa-volume-up "\f028"
•  fa-qrcode "\f029"
•  fa-barcode "\f02a"
•  fa-tag "\f02b"
•  fa-tags "\f02c"
•  fa-book "\f02d"
•  fa-bookmark "\f02e"
•  fa-print "\f02f"
•  fa-camera "\f030"
•  fa-font "\f031"
•  fa-bold "\f032"
•  fa-italic "\f033"
•  fa-text-height "\f034"
•  fa-text-width "\f035"
•  fa-align-left "\f036"
•  fa-align-center "\f037"
•  fa-align-right "\f038"
•  fa-align-justify "\f039"
•  fa-list "\f03a"
•  fa-outdent "\f03b"
•  fa-indent "\f03c"
•  fa-video-camera "\f03d"
•  fa-picture-o "\f03e"
•  fa-pencil "\f040"
•  fa-map-marker "\f041"
•  fa-adjust "\f042"
•  fa-tint "\f043"
•  fa-pencil-square-o "\f044"
•  fa-share-square-o "\f045"
•  fa-check-square-o "\f046"
•  fa-arrows "\f047"
•  fa-step-backward "\f048"
•  fa-fast-backward "\f049"
•  fa-backward "\f04a"
•  fa-play "\f04b"
•  fa-pause "\f04c"
•  fa-stop "\f04d"
•  fa-forward "\f04e"
•  fa-fast-forward "\f050"
•  fa-step-forward "\f051"
•  fa-eject "\f052"
•  fa-chevron-left "\f053"
•  fa-chevron-right "\f054"
•  fa-plus-circle "\f055"
•  fa-minus-circle "\f056"
•  fa-times-circle "\f057"
•  fa-check-circle "\f058"
•  fa-question-circle "\f059"
•  fa-info-circle "\f05a"
•  fa-crosshairs "\f05b"
•  fa-times-circle-o "\f05c"
•  fa-check-circle-o "\f05d"
•  fa-ban "\f05e"
•  fa-arrow-left "\f060"
•  fa-arrow-right "\f061"
•  fa-arrow-up "\f062"
•  fa-arrow-down "\f063"
•  fa-share "\f064"
•  fa-expand "\f065"
•  fa-compress "\f066"
•  fa-plus "\f067"
•  fa-minus "\f068"
•  fa-asterisk "\f069"
•  fa-exclamation-circle "\f06a"
•  fa-gift "\f06b"
•  fa-leaf "\f06c"
•  fa-fire "\f06d"
•  fa-eye "\f06e"
•  fa-eye-slash "\f070"
•  fa-exclamation-triangle "\f071"
•  fa-plane "\f072"
•  fa-calendar "\f073"
•  fa-random "\f074"
•  fa-comment "\f075"
•  fa-magnet "\f076"
•  fa-chevron-up "\f077"
•  fa-chevron-down "\f078"
•  fa-retweet "\f079"
•  fa-shopping-cart "\f07a"
•  fa-folder "\f07b"
•  fa-folder-open "\f07c"
•  fa-arrows-v "\f07d"
•  fa-arrows-h "\f07e"
•  fa-bar-chart-o "\f080"
•  fa-twitter-square "\f081"
•  fa-facebook-square "\f082"
•  fa-camera-retro "\f083"
•  fa-key "\f084"
•  fa-cogs "\f085"
•  fa-comments "\f086"
•  fa-thumbs-o-up "\f087"
•  fa-thumbs-o-down "\f088"
•  fa-star-half "\f089"
•  fa-heart-o "\f08a"
•  fa-sign-out "\f08b"
•  fa-linkedin-square "\f08c"
•  fa-thumb-tack "\f08d"
•  fa-external-link "\f08e"
•  fa-sign-in "\f090"
•  fa-trophy "\f091"
•  fa-github-square "\f092"
•  fa-upload "\f093"
•  fa-lemon-o "\f094"
•  fa-phone "\f095"
•  fa-square-o "\f096"
•  fa-bookmark-o "\f097"
•  fa-phone-square "\f098"
•  fa-twitter "\f099"
•  fa-facebook "\f09a"
•  fa-github "\f09b"
•  fa-unlock "\f09c"
•  fa-credit-card "\f09d"
•  fa-rss "\f09e"
•  fa-hdd-o "\f0a0"
•  fa-bullhorn "\f0a1"
•  fa-bell "\f0f3"
•  fa-certificate "\f0a3"
•  fa-hand-o-right "\f0a4"
•  fa-hand-o-left "\f0a5"
•  fa-hand-o-up "\f0a6"
•  fa-hand-o-down "\f0a7"
•  fa-arrow-circle-left "\f0a8"
•  fa-arrow-circle-right "\f0a9"
•  fa-arrow-circle-up "\f0aa"
•  fa-arrow-circle-down "\f0ab"
•  fa-globe "\f0ac"
•  fa-wrench "\f0ad"
•  fa-tasks "\f0ae"
•  fa-filter "\f0b0"
•  fa-briefcase "\f0b1"
•  fa-arrows-alt "\f0b2"
•  fa-users "\f0c0"
•  fa-link "\f0c1"
•  fa-cloud "\f0c2"
•  fa-flask "\f0c3"
•  fa-scissors "\f0c4"
•  fa-files-o "\f0c5"
•  fa-paperclip "\f0c6"
•  fa-floppy-o "\f0c7"
•  fa-square "\f0c8"
•  fa-bars "\f0c9"
•  fa-list-ul "\f0ca"
•  fa-list-ol "\f0cb"
•  fa-strikethrough "\f0cc"
•  fa-underline "\f0cd"
•  fa-table "\f0ce"
•  fa-magic "\f0d0"
•  fa-truck "\f0d1"
•  fa-pinterest "\f0d2"
•  fa-pinterest-square "\f0d3"
•  fa-google-plus-square "\f0d4"
•  fa-google-plus "\f0d5"
•  fa-money "\f0d6"
•  fa-caret-down "\f0d7"
•  fa-caret-up "\f0d8"
•  fa-caret-left "\f0d9"
•  fa-caret-right "\f0da"
•  fa-columns "\f0db"
•  fa-sort "\f0dc"
•  fa-sort-asc "\f0dd"
•  fa-sort-desc "\f0de"
•  fa-envelope "\f0e0"
•  fa-linkedin "\f0e1"
•  fa-undo "\f0e2"
•  fa-gavel "\f0e3"
•  fa-tachometer "\f0e4"
•  fa-comment-o "\f0e5"
•  fa-comments-o "\f0e6"
•  fa-bolt "\f0e7"
•  fa-sitemap "\f0e8"
•  fa-umbrella "\f0e9"
•  fa-clipboard "\f0ea"
•  fa-lightbulb-o "\f0eb"
•  fa-exchange "\f0ec"
•  fa-cloud-download "\f0ed"
•  fa-cloud-upload "\f0ee"
•  fa-user-md "\f0f0"
•  fa-stethoscope "\f0f1"
•  fa-suitcase "\f0f2"
•  fa-bell-o "\f0a2"
•  fa-coffee "\f0f4"
•  fa-cutlery "\f0f5"
•  fa-file-text-o "\f0f6"
•  fa-building-o "\f0f7"
•  fa-hospital-o "\f0f8"
•  fa-ambulance "\f0f9"
•  fa-medkit "\f0fa"
•  fa-fighter-jet "\f0fb"
•  fa-beer "\f0fc"
•  fa-h-square "\f0fd"
•  fa-plus-square "\f0fe"
•  fa-angle-double-left "\f100"
•  fa-angle-double-right "\f101"
•  fa-angle-double-up "\f102"
•  fa-angle-double-down "\f103"
•  fa-angle-left "\f104"
•  fa-angle-right "\f105"
•  fa-angle-up "\f106"
•  fa-angle-down "\f107"
•  fa-desktop "\f108"
•  fa-laptop "\f109"
•  fa-tablet "\f10a"
•  fa-mobile "\f10b"
•  fa-circle-o "\f10c"
•  fa-quote-left "\f10d"
•  fa-quote-right "\f10e"
•  fa-spinner "\f110"
•  fa-circle "\f111"
•  fa-reply "\f112"
•  fa-github-alt "\f113"
•  fa-folder-o "\f114"
•  fa-folder-open-o "\f115"
•  fa-smile-o "\f118"
•  fa-frown-o "\f119"
•  fa-meh-o "\f11a"
•  fa-gamepad "\f11b"
•  fa-keyboard-o "\f11c"
•  fa-flag-o "\f11d"
•  fa-flag-checkered "\f11e"
•  fa-terminal "\f120"
•  fa-code "\f121"
•  fa-reply-all "\f122"
•  fa-mail-reply-all "\f122"
•  fa-star-half-o "\f123"
•  fa-location-arrow "\f124"
•  fa-crop "\f125"
•  fa-code-fork "\f126"
•  fa-chain-broken "\f127"
•  fa-question "\f128"
•  fa-info "\f129"
•  fa-exclamation "\f12a"
•  fa-superscript "\f12b"
•  fa-subscript "\f12c"
•  fa-eraser "\f12d"
•  fa-puzzle-piece "\f12e"
•  fa-microphone "\f130"
•  fa-microphone-slash "\f131"
•  fa-shield "\f132"
•  fa-calendar-o "\f133"
•  fa-fire-extinguisher "\f134"
•  fa-rocket "\f135"
•  fa-maxcdn "\f136"
•  fa-chevron-circle-left "\f137"
•  fa-chevron-circle-right "\f138"
•  fa-chevron-circle-up "\f139"
•  fa-chevron-circle-down "\f13a"
•  fa-html5 "\f13b"
•  fa-css3 "\f13c"
•  fa-anchor "\f13d"
•  fa-unlock-alt "\f13e"
•  fa-bullseye "\f140"
•  fa-ellipsis-h "\f141"
•  fa-ellipsis-v "\f142"
•  fa-rss-square "\f143"
•  fa-play-circle "\f144"
•  fa-ticket "\f145"
•  fa-minus-square "\f146"
•  fa-minus-square-o "\f147"
•  fa-level-up "\f148"
•  fa-level-down "\f149"
•  fa-check-square "\f14a"
•  fa-pencil-square "\f14b"
•  fa-external-link-square "\f14c"
•  fa-share-square "\f14d"
•  fa-compass "\f14e"
•  fa-caret-square-o-down "\f150"
•  fa-caret-square-o-up "\f151"
•  fa-caret-square-o-right "\f152"
•  fa-eur "\f153"
•  fa-gbp "\f154"
•  fa-usd "\f155"
•  fa-inr "\f156"
•  fa-jpy "\f157"
•  fa-rub "\f158"
•  fa-krw "\f159"
•  fa-btc "\f15a"
•  fa-file "\f15b"
•  fa-file-text "\f15c"
•  fa-sort-alpha-asc "\f15d"
•  fa-sort-alpha-desc "\f15e"
•  fa-sort-amount-asc "\f160"
•  fa-sort-amount-desc "\f161"
•  fa-sort-numeric-asc "\f162"
•  fa-sort-numeric-desc "\f163"
•  fa-thumbs-up "\f164"
•  fa-thumbs-down "\f165"
•  fa-youtube-square "\f166"
•  fa-youtube "\f167"
•  fa-xing "\f168"
•  fa-xing-square "\f169"
•  fa-youtube-play "\f16a"
•  fa-dropbox "\f16b"
•  fa-stack-overflow "\f16c"
•  fa-instagram "\f16d"
•  fa-flickr "\f16e"
•  fa-adn "\f170"
•  fa-bitbucket "\f171"
•  fa-bitbucket-square "\f172"
•  fa-tumblr "\f173"
•  fa-tumblr-square "\f174"
•  fa-long-arrow-down "\f175"
•  fa-long-arrow-up "\f176"
•  fa-long-arrow-left "\f177"
•  fa-long-arrow-right "\f178"
•  fa-apple "\f179"
•  fa-windows "\f17a"
•  fa-android "\f17b"
•  fa-linux "\f17c"
•  fa-dribbble "\f17d"
•  fa-skype "\f17e"
•  fa-foursquare "\f180"
•  fa-trello "\f181"
•  fa-female "\f182"
•  fa-male "\f183"
•  fa-gittip "\f184"
•  fa-sun-o "\f185"
•  fa-moon-o "\f186"
•  fa-archive "\f187"
•  fa-bug "\f188"
•  fa-vk "\f189"
•  fa-weibo "\f18a"
•  fa-renren "\f18b"
•  fa-pagelines "\f18c"
•  fa-stack-exchange "\f18d"
•  fa-arrow-circle-o-right "\f18e"
•  fa-arrow-circle-o-left "\f190"
•  fa-caret-square-o-left "\f191"
•  fa-dot-circle-o "\f192"
•  fa-wheelchair "\f193"
•  fa-vimeo-square "\f194"
•  fa-try "\f195"
•  fa-plus-square-o "\f196"

Bagai mana sob, cukup menarik kan?? saya kira cukup sekian dulu ya sob postingan saya kali ini tentang Icon Font Awesome dan CSS Value Content semoga berguna dan bisa membantu sobat semua. trimakasih