ONLINE

Font Awesome Animation

More

 Getting started

Does not work with < IE10...

Download

Manually

The files can be downloaded from:

  • Minified CSS for production usage
  • Un-minified CSS for development

With Bower

<link rel="stylesheet" href="https://raw.githubusercontent.com/l-lin/font-awesome-animation/master/dist/font-awesome-animation.min.css">

Installation

Include the JS and CSS file in your index.html file:

<link rel="stylesheet" href="https://raw.githubusercontent.com/l-lin/font-awesome-animation/master/dist/font-awesome-animation.css">

Font Awesome Actions

More

Loading example (with fa-spinner icon) Loading (with fa-circle-o-notch icon) Loading example (with fa-refresh icon) Loading example (with fa-cog icon) Loading example (with fa-spinner icon)

<i class="fa fa-spinner fa-spin fa-3x fa-fw"></i>
<span class="sr-only">Loading...</span>

<i class="fa fa-circle-o-notch fa-spin fa-3x fa-fw"></i>
<span class="sr-only">Loading...</span>

<i class="fa fa-refresh fa-spin fa-3x fa-fw"></i>
<span class="sr-only">Loading...</span>

<i class="fa fa-cog fa-spin fa-3x fa-fw"></i>
<span class="sr-only">Loading...</span>

<i class="fa fa-spinner fa-pulse fa-3x fa-fw"></i>
<span class="sr-only">Loading...</span>

Font Awesome icons

More
April 2017 Updated to Font-Awesome 4.7.0
Font Awesome is a web font containing all the icons from the Twitter Bootstrap framework, and now many more. Whilst the implementation in Bootstrap is designed to be used with the <i> element (Bootstrap v2), you may find yourself wanting to use these icons on other elements. To do so, you'll need to use the following CSS on the desired element, and then substitute in the content value for the relevant icon.


.element {
    position: relative;
}

/*replace the content value with the
corresponding value from the list below*/

.element:before {
    content: "\f000";
    font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
    text-decoration: inherit;
/*--adjust as necessary--*/
    color: #000;
    font-size: 18px;
    padding-right: 0.5em;
    position: absolute;
    top: 10px;
    left: 0;
}

Note: it is not possible to use :before or :after pseudo content on <input> elements, however if you instead use <button>Label</button>, it will work as desired.
Below is a Font Awesome cheat sheet of all the content values for each icon:
  • 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"\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-desc"\f0dd"
  • fa-sort-asc"\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-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-gratipay"\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"
  • fa-space-shuttle"\f197"
  • fa-slack"\f198"
  • fa-envelope-square"\f199"
  • fa-wordpress"\f19a"
  • fa-openid"\f19b"
  • fa-university"\f19c"
  • fa-graduation-cap"\f19d"
  • fa-yahoo"\f19e"
  • fa-google"\f1a0"
  • fa-reddit"\f1a1"
  • fa-reddit-square"\f1a2"
  • fa-stumbleupon-circle"\f1a3"
  • fa-stumbleupon"\f1a4"
  • fa-delicious"\f1a5"
  • fa-digg"\f1a6"
  • fa-pied-piper"\f1a7"
  • fa-pied-piper-alt"\f1a8"
  • fa-drupal"\f1a9"
  • fa-joomla"\f1aa"
  • fa-language"\f1ab"
  • fa-fax"\f1ac"
  • fa-building"\f1ad"
  • fa-child"\f1ae"
  • fa-paw"\f1b0"
  • fa-spoon"\f1b1"
  • fa-cube"\f1b2"
  • fa-cubes"\f1b3"
  • fa-behance"\f1b4"
  • fa-behance-square"\f1b5"
  • fa-steam"\f1b6"
  • fa-steam-square"\f1b7"
  • fa-recycle"\f1b8"
  • fa-car"\f1b9"
  • fa-taxi"\f1ba"
  • fa-tree"\f1bb"
  • fa-spotify"\f1bc"
  • fa-deviantart"\f1bd"
  • fa-soundcloud"\f1be"
  • fa-database"\f1c0"
  • fa-file-pdf-o"\f1c1"
  • fa-file-word-o"\f1c2"
  • fa-file-excel-o"\f1c3"
  • fa-file-powerpoint-o"\f1c4"
  • fa-file-image-o"\f1c5"
  • fa-file-archive-o"\f1c6"
  • fa-file-audio-o"\f1c7"
  • fa-file-video-o"\f1c8"
  • fa-file-code-o"\f1c9"
  • fa-vine"\f1ca"
  • fa-codepen"\f1cb"
  • fa-jsfiddle"\f1cc"
  • fa-life-ring"\f1cd"
  • fa-circle-o-notch"\f1ce"
  • fa-rebel"\f1d0"
  • fa-empire"\f1d1"
  • fa-git-square"\f1d2"
  • fa-git"\f1d3"
  • fa-hacker-news"\f1d4"
  • fa-tencent-weibo"\f1d5"
  • fa-qq"\f1d6"
  • fa-weixin"\f1d7"
  • fa-paper-plane"\f1d8"
  • fa-paper-plane-o"\f1d9"
  • fa-history"\f1da"
  • fa-circle-thin"\f1db"
  • fa-header"\f1dc"
  • fa-paragraph"\f1dd"
  • fa-sliders"\f1de"
  • fa-share-alt"\f1e0"
  • fa-share-alt-square"\f1e1"
  • fa-bomb"\f1e2"
  • fa-futbol-o"\f1e3"
  • fa-tty"\f1e4"
  • fa-binoculars"\f1e5"
  • fa-plug"\f1e6"
  • fa-slideshare"\f1e7"
  • fa-twitch"\f1e8"
  • fa-yelp"\f1e9"
  • fa-newspaper-o"\f1ea"
  • fa-wifi"\f1eb"
  • fa-calculator"\f1ec"
  • fa-paypal"\f1ed"
  • fa-google-wallet"\f1ee"
  • fa-cc-visa"\f1f0"
  • fa-cc-mastercard"\f1f1"
  • fa-cc-discover"\f1f2"
  • fa-cc-amex"\f1f3"
  • fa-cc-paypal"\f1f4"
  • fa-cc-stripe"\f1f5"
  • fa-bell-slash"\f1f6"
  • fa-bell-slash-o"\f1f7"
  • fa-trash"\f1f8"
  • fa-copyright"\f1f9"
  • fa-at"\f1fa"
  • fa-eyedropper"\f1fb"
  • fa-paint-brush"\f1fc"
  • fa-birthday-cake"\f1fd"
  • fa-area-chart"\f1fe"
  • fa-pie-chart"\f200"
  • fa-line-chart"\f201"
  • fa-lastfm"\f202"
  • fa-lastfm-square"\f203"
  • fa-toggle-off"\f204"
  • fa-toggle-on"\f205"
  • fa-bicycle"\f206"
  • fa-bus"\f207"
  • fa-ioxhost"\f208"
  • fa-angellist"\f209"
  • fa-cc"\f20a"
  • fa-ils"\f20b"
  • fa-meanpath"\f20c"
  • fa-buysellads"\f20d"
  • fa-connectdevelop"\f20e"
  • fa-dashcube"\f210"
  • fa-forumbee"\f211"
  • fa-leanpub"\f212"
  • fa-sellsy"\f213"
  • fa-shirtsinbulk"\f214"
  • fa-simplybuilt"\f215"
  • fa-skyatlas"\f216"
  • fa-cart-plus"\f217"
  • fa-cart-arrow-down"\f218"
  • fa-diamond"\f219"
  • fa-ship"\f21a"
  • fa-user-secret"\f21b"
  • fa-motorcycle"\f21c"
  • fa-street-view"\f21d"
  • fa-heartbeat"\f21e"
  • fa-venus"\f221"
  • fa-mars"\f222"
  • fa-mercury"\f223"
  • fa-transgender"\f224"
  • fa-transgender-alt"\f225"
  • fa-venus-double"\f226"
  • fa-mars-double"\f227"
  • fa-venus-mars"\f228"
  • fa-mars-stroke"\f229"
  • fa-mars-stroke-v"\f22a"
  • fa-mars-stroke-h"\f22b"
  • fa-neuter"\f22c"
  • fa-genderless"\f22d"
  • fa-facebook-official"\f230"
  • fa-pinterest-p"\f231"
  • fa-whatsapp"\f232"
  • fa-server"\f233"
  • fa-user-plus"\f234"
  • fa-user-times"\f235"
  • fa-bed"\f236"
  • fa-viacoin"\f237"
  • fa-train"\f238"
  • fa-subway"\f239"
  • fa-medium"\f23a"
  • fa-y-combinator"\f23b"
  • fa-optin-monster"\f23c"
  • fa-opencart"\f23d"
  • fa-expeditedssl"\f23e"
  • fa-battery-full"\f240"
  • fa-battery-three-quarters"\f241"
  • fa-battery-half"\f242"
  • fa-battery-quarter"\f243"
  • fa-battery-empty"\f244"
  • fa-mouse-pointer"\f245"
  • fa-i-cursor"\f246"
  • fa-object-group"\f247"
  • fa-object-ungroup"\f248"
  • fa-sticky-note"\f249"
  • fa-sticky-note-o"\f24a"
  • fa-cc-jcb"\f24b"
  • fa-cc-diners-club"\f24c"
  • fa-clone"\f24d"
  • fa-balance-scale"\f24e"
  • fa-hourglass-o"\f250"
  • fa-hourglass-start"\f251"
  • fa-hourglass-half"\f252"
  • fa-hourglass-end"\f253"
  • fa-hourglass"\f254"
  • fa-hand-rock-o"\f255"
  • fa-hand-paper-o"\f256"
  • fa-hand-scissors-o"\f257"
  • fa-hand-lizard-o"\f258"
  • fa-hand-spock-o"\f259"
  • fa-hand-pointer-o"\f25a"
  • fa-hand-peace-o"\f25b"
  • fa-trademark"\f25c"
  • fa-registered"\f25d"
  • fa-creative-commons"\f25e"
  • fa-gg"\f260"
  • fa-gg-circle"\f261"
  • fa-tripadvisor"\f262"
  • fa-odnoklassniki"\f263"
  • fa-odnoklassniki-square"\f264"
  • fa-get-pocket"\f265"
  • fa-wikipedia-w"\f266"
  • fa-safari"\f267"
  • fa-chrome"\f268"
  • fa-firefox"\f269"
  • fa-opera"\f26a"
  • fa-internet-explorer"\f26b"
  • fa-television"\f26c"
  • fa-contao"\f26d"
  • fa-500px"\f26e"
  • fa-amazon"\f270"
  • fa-calendar-plus-o"\f271"
  • fa-calendar-minus-o"\f272"
  • fa-calendar-times-o"\f273"
  • fa-calendar-check-o"\f274"
  • fa-industry"\f275"
  • fa-map-pin"\f276"
  • fa-map-signs"\f277"
  • fa-map-o"\f278"
  • fa-map"\f279"
  • fa-commenting"\f27a"
  • fa-commenting-o"\f27b"
  • fa-houzz"\f27c"
  • fa-vimeo"\f27d"
  • fa-black-tie"\f27e"
  • fa-fonticons"\f280"
Support Us :