List Icon Font Awesome dan CSS Value Content V4.0.3 sedikit mau berbagi setelah lama tidak menjamah dunia blogging dan mengupdate blog ini. Pada artikel ini bagi yang suka bermain main dengan desain blog maka pilihan tepat untuk menambah pernak-pernik pada elemen-elemen tertentu hingga sampai yang mendetail dengan menggunakan Font Awesome untuk melengkapi maupun mempercantik blog. Font Awesome versi 4.0.3 merupakan update dari versi sebelumnya, dan terdapat 11 icon baru pada Font Awesome V4.0.3 dan juga pembaharuan nama icon. Font Awesome merupakan font web yang mengagumkan dan mengandung semua ikon dari kerangka Twitter Bootstrap, dan sekarang lebih banyak lagi icon-icon lain hanya dengan menambah satu styleshet pada template maka anda bisa menggunakan 369 icon.Agar bisa menggunakan Font Awesome, maka anda 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-html5Untuk 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
Gunakan class
<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>
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
Gunakan class
<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>
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.
Gunakan class
<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.
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.Untuk memutar atau membalik icon, gunakan class
<i class="fa fa-spinner fa-spin"></i>
<i class="fa fa-refresh fa-spin"></i>
<i class="fa fa-cog fa-spin"></i>
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
Diatas adalah cara dimana untuk menuliskan Font Awesome didalam sebuah markup HTML, masih banyak lagi tips trik lainnya yang bisa digunakan didalam Font Awesome. Untuk lebih jelasnya 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
<i class="fa fa-shield"></i> normal<br>
<i class="fa fa-shield fa-rotate-90"></i> fa-rotate-90<br>
<i class="fa fa-shield fa-rotate-180"></i> fa-rotate-180<br>
<i class="fa fa-shield fa-rotate-270"></i> fa-rotate-270<br>
<i class="fa fa-shield fa-flip-horizontal"></i> fa-flip-horizontal<br>
<i class="fa fa-shield fa-flip-vertical"></i> icon-flip-vertical
:before dengan menuliskan value content dari icon tersebut. Berikut skema penggunaan Font Awesome pada pseudo elemen CSS: 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.
.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;
}
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"
Demikian mengenai List Icon Font Awesome dan CSS Value Content V4.0.3 selanjutnya silahkan bereksperimen seperti yang sedang ngetrend saat ini. Sweet greetings and congratulations from http://mas-andes.blogspot.com welcome coming new year 2014.
