بِسْــــــــــــــــمِ اﷲِالرَّØْÙ…َÙ†ِ اارَّØِيم
Blog Mas Rifky - Pada artikel kali ini bagi yang suka bermain main dengan design blog maka pilihan tepat untuk menambah pernak pernik pada blog tertentu hingga sampai yang mendetail dengan menggunakan Font Awesome. Jumlah icon Font Awesome ini ada 369.
Nah, bagi kalian yang penasaran langsung aja.
Agar bisa menggunakan Font Awesome ini, kalian perlu meletakan JavaScript dibawah ini tepat diatas kode
</head>
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet"></link>
Cara penggunaan di HTML kalian hanya perlu menambahkan tag
<i> kemudian class dari nama icon yang dipilih. Contoh:
fa-html5
<i class="fa fa-html5"></i> fa-html5
Untuk memperbesar ukuran 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 ini
pull-right atau
pull-left untuk membuat icon berada di sebelah kanan ataupun sebelah kiri, sedangkan
fa-border
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 agar membuat icon bisa berputar. Ini biasa dikombinasikan pada icon fa-spiner, fa-refresh dan fa-gigi agar bisa berputar dengan baik. CSS3 ini tidak disupport oeh IE8 dan 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 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.4
-
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"
Sekian dulu tutorial ini saya berikan.. Semoga Bermanfaat bagi sobat sekalian :D . Jangan lupa terus kunjungi ya :)
Source: http://mas-andes.blogspot.com/2013/12/list-icon-font-awesome-dan-css-value.html
