List Icon Font Awesome dan CSS Value Content V4.0.3 pada artikel ini bagi Anda 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 sebelum, dan terdapat 11 ikon baru pada Font Awesome V4.0.3 dan juga pembaharuan nama icon. Font Awesome merupakan font yang mengagumkan dan mengandung semua icon 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. Bagaimana, lumayan banyak kan? icon-nya hehehe...Ayo, buruan Anda pasang diblog biar tidak ketinggalan tampilan Blog-nya...:)
Agar Anda bisa menggunakan Font Awesome di Blog/Website, 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 penggunaannya didalam HTML Anda hanya perlu menambahkan tag
<i> kemudian class dari mana icon yang dipilih. Misalnya cara penulisan seperti dibawah ini:
fa-html5
<i class="fa fa-html5"></i> fa-html5
Untuk memperbesar ukuran, maka Anda hanya perlu menambah class
fa-lg, fa-1x, fa-2x, fa-3x, fa-4x, fa-5x dan berikut contohnya fa-thumbs-o-up
fa-thumbs-o-up fa-lg
fa-thumbs-o-up fa-2x
fa-thumbs-o-up fa-3x
fa-thumbs-o-up fa-4x
fa-thumbs-o-up fa-5x
<p><i class="fa fa-thumbs-o-up fa-lg"></i> fa-thumbs-o-up fa-lg</p>
<p><i class="fa fa-thumbs-o-up fa-2x"></i> fa-thumbs-o-up fa-2x</p>
<p><i class="fa fa-thumbs-o-up fa-3x"></i> fa-thumbs-o-up fa-3x</p>
<p><i class="fa fa-thumbs-o-up fa-4x"></i> fa-thumbs-o-up fa-4x</p>
<p><i class="fa fa-thumbs-o-up fa-5x"></i> fa-thumbs-o-up fa-5x</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 Anda 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> 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
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 Anda 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
:before dengan menuliskan value content dari icon tersebut. berikut skema penggunaan Font Awesome pada pseudo elemen CSS:
.element{
position: relative;
}
/* ganti content f000 */
.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. Sekarang silahkan Anda acak-acak sendiri dan bila ingin mencoba dengan icon lain, dibawah ini daftar icon font awesome versi V4.0.3.
DAFTAR LIST IKON FONT AWESOME DAN CSS VALUE CONTENT V4.0.3
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"
Resource : http://astronautweb.co/snippet/font-awesome/
Semoga bermanfaat, dan selamat berkreasi...
Blogger
Google+
Facebook
Twitter