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-thumbs-o-upfa-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 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> 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-verticalDiatas 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 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 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"
Demikian mengenai List Icon Font Awesome dan CSS Value Content V4.0.3 silahkan sobat bereksperimen seperti yang sedang ngetrend saat ini.
Semoga artikel ini berguna untuk sobat semua.
bleh jga blognya,,, walaupun msih baru
ReplyDeleteYet, to make a complete and utilitarian arrangement, a business needs to employ backend engineer as well as a front end designer independent.
ReplyDeleteIn this aide, you'll track down all the data on the most proficient method to enlist independent frontend engineer, what abilities to search for, and what are the best enrollment valuable open doors. The primary advantage is a chance to make an interesting and bona fide web or portable application that offers a wonderful client experience. Nonetheless, there are different aces too, to be specific:
Admittance to the most recent innovations and high level practices;
Chance to make an exceptionally responsive and strong application;
Parttime joint effort implies saving financial plan contrasted with full-time commitment;
Accomplish better Google positioning for a site due to enhancement of the point of interaction;
Capacity to make a dynamic rendition of a stage;
Quicker delivery and post-discharge support.
Notwithstanding, there are likewise contemplations that one necessities to take ahead of time prior to marking an agreement with a specialist or an organization>> part time react front end developer
This article truly highlights the incredible benefits custom software development can bring to businesses. From increased efficiency and productivity to tailored solutions for specific needs, the advantages are endless. The expert insights provided shed light on the importance of investing in customized software for long-term success. A must-read for all business owners!
ReplyDelete