A list of Font Awesome icons and their CSS content values

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:

See also: a tutorial about how to build static sites with React.

  • 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"

315 Responses to “A list of Font Awesome icons and their CSS content values”

  1. hemant says:

    how can we use this type of css ?

    • Tim says:

      I have not detailed how to implement Font Awesome css; this is covered on their site. If you give me specific scenario in which you want to implement this CSS, I will add it to this snippet.

    • Arun says:

      assign css declaration like –
      .class_name:before{content:”\f156″; color:#f00}

      the rupees [ code ] symbol appear before your content/text under block with .class_name

  2. jen says:

    Thanks, this is helpful. I have a question. in your page, how did you specify that you want the icons to appear grey?

    • Tim says:

      Hi Jen,
      It is beautifully simple. Since the icons are generated by a font, you can apply CSS the same way as for regular text, eg: color: #999. In my snippet I have a bunch of rules below the comment ‘adjust as necessary’, including a color rule.
      – Tim.

    • Aury says:

      On your css stylesheet you should add:

      color: grey;

      jusst like you are setting a font color.

  3. DesignNewbie says:

    Simply amazing. I were using Ligature symbols, but now moved to this one. This has more symbols. Do you know if its compatible with all desktop browsers? especially IE8?

  4. helloman2 says:

    hey it would be nice of you to add on the content values for the extra font awesome set called “font awesome more” if at all possible.

    Thanks for the article.

  5. Rizwan Khan says:

    Thank you so much!!! your help is really appreciated.

  6. Brian says:

    What about adding conditional icons to form input values?

    Say like on success, you have ‘input.success’

    I can manually create ::before and ::after instances of the icon-ok with :

    color: #339900;
    content: “\f00c”;
    font-family: FontAwesome;

    after loading the font with @font-face, but I can’t get it to show up. Ideally, I would have the input padded left (from right), with the icon on the far right positioned absolutely using ::after.

    Any ideas on this?

    Thanks – Brian

  7. Brian says:

    I ended up using the label:after for my needs. However, I am still curious as to other options. I know the pseudo classes are not allowed on input elements, but there are surely some other ways around this. 😉

    The following gets me where I need to be in my case:

    input.success{border:1px solid #339900;padding-right: 30px;}
    label.success:after {
    color: #339900;
    content: “\f00c”;
    font-family: FontAwesome;
    position: absolute;
    right: 10px;
    top: 25px;

  8. Nico Knaepen says:

    Thanks! This was really helpfull to me.

  9. Danut says:

    How i can add for a:visited icon

    .book-navigation .menu a:visited {
    color: #FF7C00;
    content: “\f00c”;
    font-family: FontAwesome;
    text-decoration: none;

    this is my class in css

    • Tim says:

      Hi Danut,
      You simply string the pseudo classes together as a:visited:before so you complete code would be

      .book-navigation .menu a:visited:before {
      color: #FF7C00;
      content: "\f00c";
      font-family: FontAwesome;
      text-decoration: none;

  10. Ronnie says:

    How do you get space after the icon.

    • Tim says:

      Since the icon has position absolute, you can adjust the left or right values. You would likely need to also apply some padding or margin to the parent element to accommodate for this.

  11. Alex says:

    I cant find icon for vimeo. Why?

    • Tim says:

      Hi Alex,

      FontAwesome does not yet have a Vimeo icon. I’m sure it will be added soon in a future version, however in the meantime you can use the font icon from IcoMoon which includes a Vimeo icon. IcoMoon is a really great tool for combining icons from different fonts which can then be downloaded as a new font file. This helps reduce the overall size of a site, as in most cases, you will only want to use a handful of the available icons.

    • Tim says:

      Vimeo is now included in version 4.0!

  12. accept says:

    good done

  13. For those wanting a way to filter & search font awesome icons, I put together this tool ( which is open sourced )


  14. Brian says:

    Thanks, you made my Friday.

  15. William T says:

    Hi Tim,

    I want to use these icons as a big background image in different pages, let’s say in the or #wrap, but can’t find how. Do you know how to accomplish it?

    Thanks in advance,

    • Tim says:

      Hi William,
      You can do this by adding the Font Awesome icon style to the #wrap:after pseudo element. You then use absolute positioning to place the icon where you need it; if you want it in the center, then you can combine left: 50%; with margin-left: -(half the icon size); Since you want it to be a background image, you’ll need to wrap the content of the div#wrap in another div and apply a z-index higher than the icon. I have made a demo of this to best explain what I mean. See here: http://codepen.io/astrotim/pen/IjJzL

      Hope that works for you!

  16. William T says:

    Great Tim!

    I really appreciate the clear example, thanks a lot!

  17. Ibnu says:

    Oh I see now, So I must add awesome font from third party inside the site… Thank you very much

  18. JP DeVries says:

    This is awesome. Has anyone got this working on input (type=”text”) elements?

  19. Suresh Katke says:

    Hello Tim,

    Really awesome Is this free fonts OR there any license.


  20. srinu says:

    i am using this font in my wordpress site but it will show the code only .how to display this icon in my wordpress website

    plz help…….

  21. Bill says:

    Thank you for taking the time to do this. Big help.

  22. mapsv4 says:

    how to change font awesome icon replace below website folder, if I using code below, the + – label will be missing.
    Please advice, many thanks.

    .css-treeview label::before
    content: “\f07c” !important;
    font-family: FontAwesome;
    color: #FFCC00;
    /* background: url(“icons.png”) no-repeat; */


    • Tim says:

      Since Treeview is already using the .css-treeview label::before selector, I suggest using the .css-treeview label::after selector for your Font Awesome icon. You may need to adjust the positioning to account to it being after, not before the element, but it should work.

  23. […] for all of this and I managed to find a reference guide that was off-site for Font Awesome. So, check out the reference tool on this site. It should hopefully tide us all over until PageLines updates the font awesome system in PageLines […]

  24. Dan says:

    Thank you for this page – it is the most visited website in my workflow…

  25. Faisal Khan says:

    I want to put my own image, there is no suitable icons for Java, Google Glass & Web 2.0 etc
    so I want to design my own and put in the page..

  26. sadiaiftikhar says:

    I had paste this element code it html file using style tag in head. but, there is no result!!!

  27. jeff szuc says:

    I love it when I think something is going to take me hours to figure out and then I discover that someone’s already done all the work for me. Thanks for doing this, and thanks for sharing. you’re awesome.

  28. Dap says:

    this was the only resource showing the old version of A.F.
    Now you update to last version.

    Is still available the previous version of A.F List? 🙂


  29. Great post out there (Y).. btw which theme are you using?

  30. Can you do a High Heel shoe Icon?

  31. 9KD says:

    This is very powerful if you know how to use it. Good for button makers 😉

  32. Teri says:

    Just a HUGE THANK YOU, Tim, for this article. I now have this bookmarked so as not to lose it!

    I’ve spent way too much time researching so many of these things that LOOK so easy, but really, every little new thing is a challenge for me. And I’ve been doing this a while now, so it is frustrating.

    Specifically, I needed an FA icon screened back to use as a BG image and not only did you provide PRECISELY what I was looking for, you also provided a CodePen sample. THAT is going the extra mile, my friend and I thank you!

    • Tim says:

      You’re welcome Teri, and thank you for the feedback! I have been helped by many articles on other websites, so it is good to repay the community whenever possible.

  33. anand says:

    really nice share….I too have customized to add Social links in my blog footer………..using cool font awesome icons……..

  34. Ichsany says:

    I have installed this font on Bootstrap framework but I can’t find “Blackberry” icon… but it’s amazing and really complete stuff!

  35. Oemar says:

    great usefull post, very complete 🙂

  36. Ryan says:

    I tried adding color to the .fa-twitter: before class in the font awesome css and the color still would not change. Any suggestions?

    .fa-twitter:before: {
    content: “\f099”;
    font-family: FontAwesome;
    color: #fff;

    Also, how would you change the color of an icon whenever you hover over it?

  37. Sush says:

    Thanks a looooooooooooot… 🙂 I really wanted this…
    Keep up the good work 🙂

  38. cân ô tô says:

    Thank so much, this post is very useful for me.

  39. Yashwanth says:

    Can i use this Font Awesome Icons in Asp:menu..??

  40. Yashwanth says:

    Thanks for the link its really helpful. Cheers..!!

  41. Just visited this site and I want to thanks Tim for sharing this info. I have use some it 🙂

  42. Tushar says:

    Awesome list for reference. Thanks 🙂

  43. […] A list of Font Awesome icons and their CSS content values […]

  44. Jorge says:

    For some reason sometimes displays the icon and somtimes displays a code … any help on this ??

    Thanks a lot !

  45. sreelal says:

    thanks its very useful..

  46. Nicolas M says:

    you can also try to convert font awesome with http://iconion.com/

  47. This is very helpfull, Thanks a lot 🙂

  48. peter saurus says:

    it’s really odd, can you explain where the .gif .jpg .png of the images are? instead you get something such as content: “\f115”; anyway great explanation!!

  49. sulaman says:

    Just visit this site http://www.uiplayground.in/css3-icons/ and I have use some it 🙂

  50. Praveen says:

    Can I have a color on hover for each icons and a color for visited.

    • Tim says:

      Hi Praveen. Yes, you can style the icon font the same way you style text. When combining :before with the :hover and :visited pseudo selectors, you need to chain them together, with hover or visited listed first, example:

          .element:hover:before {/*style*/}

  51. Ivan says:

    Thank you

  52. Praveen says:

    Thanks Tim. I tried your solution. It works on the icon, not the div that have the icon. The :after pseudo selector does not work for me.

  53. Praveen says:

    Hi Tim, I want to remove the white border from the icons outer circle. I tried but am unable to so I gave this css
    .fa-stack {color: #ffe300}
    .fa-circle {background-color:#ffe300}
    after changing the section background color to #ffe300. Now I see a 1 px height 12px width white line on 3 corners. How to get rid of it.

  54. Rian says:

    Great post!!! Thanks for the information.

  55. Rajkumar Khandelwal says:

    Hi, Tim Holt
    Thanks for Great post!!
    its very useful

  56. tutorial89 says:

    thank’s for your share. i like it

  57. Oeurn Sophearith says:

    Hello Sir!
    I would like to ask you one question, I want to change color on icon code when mouse over, is not like that
    .element:hover {
    color: #0FF;
    is not change.

    Reply me please…., thank you

    • Tim says:

      Hi Oeurn,
      The icon is styled on the :before pseudo element, so to apply a hover style, you need to chain hover and before together, like:

      .element:hover:before {
        color: #0FF;
  58. Frank says:

    Great list, thank you. It would be even better if the list also contained the FA-class names… would make it faster to find a specific one (rather than eye-scanning all icons). I wonder why this extremely useful list is not on the official site.

  59. Ian Mustafa says:

    Hi Tim,
    Thank you for your post and your pen to use the icon as a background. It really helps!
    I have made a pen based on them –actually it’s my first pen– and you should take a look: http://codepen.io/cuplizian/pen/GCihx

    Keep up your good work, and thanks in advance!
    —Ian Mustafa

  60. Hiii,
    I want foot icon in font awesome style .

    • Tim says:

      Hi Nitesh, you will need to direct your request for a new Font Awesome icon to the developer. There are instructions for how to do this here.

  61. Despoina says:

    How can I use hover state?

  62. karene says:

    Hi, some of the icons works well, but some won’t appear. Any idea why?

  63. fontawersome Windows host problem!

  64. Joerel says:

    This is so awesome ^_^

  65. Nitesh says:


  66. Danish says:

    what is different between SVG and ICOMOON?

  67. RAMANAND YADAV says:

    Can I have a color on hover for each icons and a color for visited.

  68. Ankita says:

    Hi I need to put the calendar icon inside the input tag and not besides.The link I need to do this is: http://ankiita.com/ihm/reports.html
    Please help!!

    • Tim says:

      Hi Ankita,
      As noted below the code snippet, you can’t use before or after pseudo selectors on the input element, so you will need to wrap it in another element, such as a div. You can then style the wrapper div using the CSS in this snippet. I have created a CodePen here to demonstrate this in action.

  69. Patricia says:

    Can I upload this beautiful icons into the twenty ten theme from wordpress? Any guidance will be extremely appreciate it. THanks, Patricia

  70. Sydney Yo says:

    I think the html of my theme is a little different? (sorry, i’m a noob at html and coding) it’s more like:


    and i can’t seem to figure out how to replace the already-set ones?

  71. Sydney Yo says:

    sorry, i just realized the comment changed the whole html bit to TITLE TEXT, so i put some spaces in it (i think theres better ways to do it but again, i’m no pro at this)


  72. Sydney Yo says:

    im officially super embarrassed because of the recurring mistake, so i give up and would just like to say that the code says

    i class=”fa fa-pencil fa-lg”

    and every time i try to change it crap hits the fan

  73. Vladimir says:

    Hello, I’m trying to use your font:

    .icon-skype-sign:before { content: “\f17e”; }
    .icon-skype:before { content: “\f17e”; }

    But instead of icon of skype I see Л – icon(

  74. Ankita says:

    My issue is not resolved yet the way I want to 🙁

  75. Ruben says:

    Gret job


  76. crazyguy says:


  77. PuntoSex says:

    Great font. Really love the icons.
    Will apply to our site asap.
    Using this instead of images saves bandwith and resources loaded.

  78. Raffi says:

    This doesn’t work on firefox anymore, I’ve tried various versions.

    • Tim says:

      This is likely due to serving the Font Awesome files from a CDN. Firefox and IE now block web fonts served from a CDN due to CORS. David Walsh has a good explanation and solution in his Serving Fonts from a CDN article. Alternatively, you can serve the Font Awesome CSS and font files from the same server as the website, and they won’t be blocked due to CORS. This article serves the CSS and font files from the same server and thus works normally in Firefox and IE.

  79. alfredopacino says:

    You should really update this post with the new icons 🙂

  80. Daniele says:

    There is a fix for Firefox??

  81. alfredopacino says:

    well i find this page more fast to copy/paste then the official fontawesome one..
    so i always use this 🙂

  82. Daniele says:

    I have css and fonts file in the same server of the site, but in Firefox doesn’t work. Why??

    • Tim says:

      Hi Daniele,
      On closer inspection, it appears your style.css file includes Font Awesome version 3.0.2. This older version may be the source of your problems. I have made a quick demo of your homepage, removing the reference to version 3.0.2 from your stylesheet and including the stylesheet and font files for Font Awesome version 4.2.0. The demo page loads the fonts OK in Firefox – see here.
      I hope this helps, Tim.

  83. Anders says:

    Great resource, thanks!

  84. Dan says:

    Awesome. I found it very helpful today!

  85. Mohammed says:

    i have try to use font awesome in my site but not success need help this is url for where i used it http://www.best-download-free.com/2014/09/download-whatsapp-plus-2015.html


    • Tim says:

      Hi Mohammed, you have a lot of errors showing in the console when I inspect your page with Chrome developer tools. I would recommend trying to resolve each of those errors, as any one of them may be the source of your problem.

  86. seha says:

    Font Awesome are the best and I found it very helpful today!
    Great , thanks!

  87. Cyn4ck says:

    Hey, I wanted to know how you could apply font-awesome properties such as the resizing font once you charged the font with css ?

  88. down says:

    it very helpful, and i used in my websites when i build it ,thanks!

  89. Mohammed says:

    Thanks Tim, i am trying to fix all errors depend on your advice

  90. Rohit says:

    Hi,how can i use this font without bootstrap codeing, i mean i have implemented but need without bootstrap

  91. Perfect, just was I was looking for 🙂

  92. Emily says:

    Nice collection. But when I put the code for >> in CSS like ” content:’\f101′; ” it did not work.

  93. Simo Mrak says:

    so you write it this way:



  94. techaraby says:

    Grate job its Awesome exactly
    Thanks you man….

  95. Aristocrat says:

    Awesome work. Thanks.
    How to use this in my web page. I created an aspx page and copy paste the code but icons are not appearing. How to get icons in web sites?

  96. Aristocrat says:

    If I add the CSS link as
    href=”http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css”, font icons are appearing in page but if I download the css file and add local reference it’s not working, why? How can I solve this? Thanks

  97. Aristocrat says:

    Sorry I forgot to include fonts folder. Its working now. Thanks for this awesome fonts.

  98. Nicholai says:

    Is it possible to stack FA icons in css? can you provide a code snippit example?

  99. Rendra says:

    How to insert font awesome for offline user? i want to desaign a web..

  100. Scott Leone says:

    You might want to add to your table the code for a non-breaking space, which is …


  101. Dribbling says:

    Don’t work hover… Please help..
    .text ul li a:hover:before { color: #999; }

  102. Nazmul says:

    Font Awesome are the best and I found it very helpful today!
    Great , thanks!

  103. Gopal says:

    it works like a charm see my website http://www.techbrown.com/

  104. Alex says:

    Thank you so much!

  105. Den says:

    Thanks, been looking for this…

  106. Shiva ram says:

    i need fa fa manufacture or fa fa factory icon .something related to office icon for my business purpose. please respond 🙂 thank you for advance help

  107. Mr. OM says:

    Tim Hi. Wonderful post you have here. Been using it since I came across it. Thanks a lot.
    Font Awesome 4.3.0 came with lots of new icons. I’d so much love if you included the new icons in this post, that’s if you don’t mind.

  108. SEspider says:

    Can someone tell me the full link for these icons? For some weird reason, they are not showing up on my site when I use the shortcode.
    I’m hoping the entire link will help.

    • Tim says:

      You can find instructions on how to install the font on the official Font Awesome website here. I’m not sure what you mean by “when I use the shortcode”, this article refers to using CSS content values to reference the font characters directly.

  109. Opick Weblog says:

    thank you very much for the tutorial
    I will try it now

    if you have a moment, please check my site here http://wajahilmu.blogspot.com/

  110. Divdeep Singh says:

    Can i use my own icons in the shortcodes??
    Please help
    Thanks in Advance…

  111. Sudheer says:

    പൊളിച്ചു മച്ചാനെ

  112. Nik Phirke says:

    Awesome, it really enhances the look of website 🙂

  113. Oana says:

    There doesn’t seem to be a blogger icon…which is annoying because…well my blog’s on there.

    Any chance this might be updated in the future?

  114. Oana says:

    Any chance Blogger can be implemented somehow? It’s the one icon I’m missing.

  115. Mansoor says:


    use “Cloudflare” CDN: http://cdnjs.com/libraries/font-awesome

    Mansoor Ahmad

  116. imran says:

    I am not able to get the fonts as they are what are the files i need to add to my project
    to get the fonts

  117. vinayak pt says:

    Hi, How can I implement a progress image or Spinner image on button click and show the default mouse pointer after event finished.
    How can I use FontAwesome icons here.
    Thanks for the feedback.

  118. Sudheer says:

    Superb !!!!!!!

    പൊളിച്ചു മച്ചാനെ പൊളിച്ചു.

  119. eddy says:

    it works like a charm see my website http://www.anaarbah.com/

  120. cameron says:

    Thanks for this! It was really useful!

  121. Kaefa says:

    Thanks your post helped me a lote 😉

  122. sahilluqman says:

    Tim Hi. Wonderful post you have here. Been using it since I came across it. Thanks a lot.

  123. Tapas says:

    Not work properly what is the reason of it

  124. Rachid says:

    Hi, some icons are not displayed, like facebook, twitter and google plus. Why this happens. (you can see an example : search for persona blogger template and preview it.)

  125. Treatment says:

    Thanked the very wonderful site and set up and thank God Patoviq

  126. Addy says:

    Thanks 🙂 it’s very useful.

  127. Bijay Yadav says:

    I didnt know how to show font awesome icons from CSS. Today I searched it and found exactly what I was looking for. Thanks for sharing such awesome tricks and full lists.

  128. Kelly says:

    Wow really nice. I have used it as I am learning how to code in CSS3. It really improved my position and I would love to tell my friends about this lovely post. Thanks.

  129. Mr Kay says:

    Excellent resource, very kind of you to take the trouble to post these.

  130. Ankita says:

    I have been using the icons for long.
    I am stucked today with pie chart icon. Its code f200 just doesn’t work there. everything goes well if the code is changed for any other ison.
    The link is http://ueureka.com/
    Under Faq “Questions asked by company”
    1st tab Answer under has Measure block where the icon is not working.
    Can you help?

  131. Naser says:

    Hey Mate this is f@#cking Awesome!

  132. bootstrap says:

    Awesome solution!! Thank you..

  133. Yifeng says:

    Hi there. Can you share how you listed all the FA icons? Surely you did not type all the code by hand, right? I’m looking to do a similar list, but I can’t think of a way to do it. A loop? Maybe copy the source from the official site and make some modifications? Any help is much appreciated.

  134. manikandan says:

    i want hash(#) icon

  135. RESEPMASAK says:

    awesome icon, really nice.. thank you

  136. very easy to use and place it to the blog or any website 🙂
    thanks https://astronautweb.co/

  137. Edward says:

    SO-s0-s0 great for this is helpful to me

  138. ahmad says:

    how i can use these icons ?! what is the HTML code ? 🙂

  139. very very nice work! thanks a lot..

  140. nice list of icons , you reduced my work …. it helped for me

  141. leonardo says:

    Thaks guy, very usefull.

  142. faheem says:

    The site http://ueureka.com is using an older version of font awesome (4.0.3) in comparison to this site (4.2.0).
    Try upgrading the version and the new icons should work.

  143. djrlambert says:

    if you need the unicode of the newest FA icons, not listed here yet, you can go ti the FA website, display the icons list, and then use you Firefox element inspector to find it out.

  144. Instan says:

    Thanks 🙂 it’s very useful. Very very good.

  145. sugu says:

    Hi i want bathroom, Kitcheen, Laundray content values

  146. Manish says:

    This is really greats!!!

  147. nam says:

    his is really greats!!!

  148. Karthi says:

    Hi. When we use font_awesome, are the icons downloaded from the web? I want to use the font_awesome when the application runs offline

  149. Karthi says:

    Hi. I am using font-awesome. When we use these icons, is it downloaded from web?
    I need to use this icons in font-awesome when I am offline. Is it possible. Kindly guide me.
    Thanks in advance

  150. Thanks! This was really helpfull to me.

  151. Victoria says:

    This is awesome icon. Veru helful wih me ^.^

  152. Thank you very much…… !!
    This is very very good amazing infomation.

    고맙습니다. 정말 대단한 정보에요.


  153. afzal says:

    thanks it is helped me

  154. Its so awesome. It makes website fast as instead of using images, this code make more sense 🙂

  155. Camden cabs says:

    Hi, how to insert hover transition effect

  156. Thank you for sharing this awesome font.

  157. Diana Hooper says:

    Thank you – this helps a lot!

  158. Thanks. It works like a charm

  159. junge conge says:

    thank you very much for the tutorial
    I will try it now
    if you have a moment, please check my site here http://herdinprsty.blogspot.com/

  160. Arjun Kariyadan says:

    Really nice.

  161. movie tube says:

    Lol, I love these kinds of posts :D. One of my favorite ways to spend my spare time, I also like football and movies.
    You guys have any forums or something? PM me!

  162. ahwaz site says:

    icon is easy by this method

  163. Moh Mirzadeh says:

    Should be more complete

  164. Damjan says:

    Great work… Thank you!

  165. I use this very often. Thanks for sharing!


  166. Hero says:

    How can i get the link of Icomoon css file in order to use online same as font-awesome.

  167. Arun says:

    Really Cool – Every one need it for web.
    but for new symbol should be updated with code ….
    ie. Frame, Mementos, crystal, shower,male icon, girl icon, zebra crossing , design application icon, governments [ world ] main symbol like ‘3 lionin india’ and so on…..


  168. Imtiaz Khan says:

    Thanks for the good information and code that really helps us for designing.


  169. Stalyn says:

    Very nice work, thank you, 🙂

  170. Shpend says:

    How to create A Font icons ? (if it make sense)

  171. Mike says:

    thanks, I’ve been looking for a list like that!:)

  172. iman says:

    thx for the best site
    please add the carpet icon

  173. Jasmine Lavi says:

    I am not getting microwave icon. can you tell the uni code for micoroven

  174. Tom says:

    Thanks so much for these infos, absolute life savers 🙂

  175. jddnd says:


    Im trying to use your example but the hover functionality is not working. When I move the mouse over the icon, the element doesn’t react. Heres my code:

    Html code:


    {{#each categories}}


    {{#if promoted_articles}}

    {{t ‘promoted_articles’}}

    {{#each promoted_articles}}




    CSS code:

    /* Contacting Us Category */
    #category_id_202713678 {
    position: relative;

    #category_id_202713678:before {
    content: “\f003”;
    font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
    text-decoration: inherit;
    /*–adjust as necessary–*/
    padding-right: 0.5em;
    top: 10px;
    font-size: 66px;
    left: 120px;
    right: 200px;
    position: absolute;


  176. 火火 says:


  177. thanx alot you saved more time for searching about icon’s content name 😀

  178. Nakib says:

    How to use flip horizontal effect with the content.

  179. nasir says:

    font: 15px/1 fontawesome;

    What is means ?

  180. Abhijit Sarkar says:

    Problem with fa??? nah…
    I’ve got https://astronautweb.co/snippet/font-awesome/

  181. Naeem says:

    The link to use these icons doesn’t work anymore

  182. Chyke says:

    Can i add or generate a custom font using an ico image of my choice? I am developing a website where i need to use a map for the object instead of any of the images within the FA Code. Any Ideas?

  183. Surendra says:

    This is really great, thanks for the help

  184. SEOJOT says:

    Anyone share blogger Icons code here?

  185. Gyanendra says:

    thanks for icons list

  186. Cammy says:

    Really helpful cheat sheet for Font Awesome. Hoping you’d update it to its recent version once you have time. Thank you!

  187. JayB says:

    Do you have the updated list for 4.7.0 ?

  188. nice font i try to use it in my website

  189. Brody says:

    Thanks for the icons Tim.

    I want to stack a square fa icon “\f096” around the icon in my css. How would I do that with css?

    .section-about:before {
    font-family: FontAwesome;
    content: “\f1fd”;
    color: black;
    font-size: 4em;
    text-align: center;

  190. Caine Thanatos says:

    Thank for the icon list, it’s awesome and useful 🙂 !

  191. forhad says:

    Nice representation of all important icon in one place.
    thank you

  192. Thanks for your help, but my site http://trucvy.name.vn is not display with fa-facebook, fa-google-plus. I can’t fix this error, i show by press F12 tab, it has not ::before in tag, please help me?….

  193. jessica says:

    i got more ideas about responsive design. i am also doing and creating evergreen responsive which is take more quality your things are made some idea. keep share more about technical article.

  194. Rolando says:

    Here is a kid doing it with an element.

    I just don’t know how I think you need the .css file he has.

  195. Trichup says:

    it’s really odd, can you explain where the .gif .jpg .png of the images are? instead you get something such as content: “\f115”; anyway great explanation!!

  196. Atif ansari says:


  197. Hi, how can I use the new instagram icon? Thankss

  198. thank you bro. ( eyvallah reis)

  199. Jovin says:

    Many thanks for the list. Very helpful

  200. manoj says:

    there is no search option..

  201. raj says:

    i used my website “http://www.rgltricks.com”

  202. Dipak Thakur says:

    easy to use

  203. I have made a number of edits on your own site. Thank you so much. 🙂

  204. kannan v says:

    Why blogspot icon content not add in your website.

  205. Download says:

    Thanks for your help, but my site https://www.downloadsarab.com/ is not display with fa-facebook, fa-google-plus. I can’t fix this error, i show by press F12 tab, it has not ::before in tag, please help me?….

  206. Ravi says:

    Please give me fa-css classes to BBB icon logo

    please sir

  207. Great tutorial. This tutorial was really helpful to how to use font awesome in my business site. CSS very helpful to me. Thanks.

  208. Sushil says:

    Really light and awesome font. I have used both the way on my blog.
    .element:before {content: “\f01a”; font-family: FontAwesome;}
    .element:after {content: “\f01b”; font-family: FontAwesome;}

  209. djramc says:

    Many thanks for the list. Very helpful

  210. okapi says:

    Since the icons have descriptive names, Strg + f (Windows) or Cmd + f (Mac) should be enough for searching this list.

  211. Alex Morgan says:

    Thank you so much. You save my time. This post help one to choose right one.TechnewsThis post covers important topic. Much more..

  212. gfhfghgf says:

    Hii Good reviews and best Services

  213. Catherine says:

    Is it possible to put the links? Like for example, I used the Facebook icon and if I click it, it will direct to the Facebook page.

  214. John Peter says:

    Thanks for saving my time for providing entire list.

  215. John Peter says:

    Thanks for saving my time for providing entire list.

  216. Diana says:

    Hi, your list is very helpful for me.
    But do you also have the css code for the new 4.7 icon fa-handshake-o ?

  217. Complexad says:

    i got more ideas about responsive design. i am also doing and creating evergreen responsive which is take more quality your things are made some idea

  218. tudinilo says:

    Çok saol teşekkürler. işime yaradı heryerde bunu arıyordum. Blog için olmassa olmazı bu.

  219. Max Abraham says:

    this is something im looking to implement on my website http://imedia.ng for some days now.

    thanks a lot for sharing

  220. jamy says:

    I use this very often. Thanks for sharing!

  221. blog says:

    how can I use the new instagram icon? Thankss

  222. Michael says:

    thanks a lot for the time you took to make this available for us. I’ll love to have font-awesome myself. please where can i download this? i want to host the font myself.

  223. Sagar Sahni says:

    Thanks, you solved my problem.

  224. Jay Bryant says:

    Thank you for this list. I have used it to pull together a set of admonition icons for our guides.

    (I’m also glad to see someone using a math captcha. I wish more people would do so.)

  225. No! says:

    No! When you search via CTRL-F you’ll end op in the COMMENTS in stead of the icon list, very annoying! Remove the comments section.

  226. Shifa says:

    This is really great, thanks for the help

  227. bakayaro says:

    Thanks, this worked really well on my JAV site. 🙂

    I used the header method and it went fine.

  228. Amazing work ….. you are giving a amazing icon for all website ,,,

    I’m a website designer in Gujarat

  229. Mr Guru says:

    Thank you very much sir

  230. Awesome Cheat Sheet….

  231. AHmad says:

    Wonderful Collection !!
    Thanks Alot !

  232. Buy and Sell says:

    I upgraded to Fontawesome 5 and it seems this not working. Any update for Fontawesome 5?

  233. Font says:

    very good

  234. hello
    i applied css on my website but showing rectangle box

  235. Sule says:

    Nice collection

  236. Ohh, great, thank you bro

  237. 狗哈德森 says:

    nice to know 很高兴知道

  238. Ketoan.biz says:

    Thank you for this list. It very helpful for me!

  239. drakogemini2 says:

    Thanks bro

  240. Marina says:

    Very helpful, thank you for FA codes, i have found this info only on your blog!
    I cant use “fa-play-circle-o (\f01d)” in font awesome latest version v5.6.3
    Its worked fine before i update, can you help?

  241. Kumar says:

    Thank you sir, I a planning to use it in my current assignment.

  242. Nick says:

    Thanks for this awesome collection. I am a huge fan of font awesome, I use in virtually all my projects. It just make web applications look cool, modern and awesome. I will bookmark this page for reference purposes. Thanks again.

  243. really a very good list..many important things ive learn in your blog,,very informative,thanks a lot

  244. thanks for the info. i’ll check it one by one.

  245. 카지노 says:

    very good collection of blog list. thanks for saving my time in searching.i really like it..

  246. Thanks for sharing this awesome list.your blog is one of the best ive seen,i love it,kindly visit my site..