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”
how can we use this type of css ?
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.
assign css declaration like –
.class_name{property:value,Property:value……}
.class_name:before{content:”\f156″; color:#f00}
the rupees [ code ] symbol appear before your content/text under block with .class_name
Thanks, this is helpful. I have a question. in your page, how did you specify that you want the icons to appear grey?
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 acolorrule.– Tim.
On your css stylesheet you should add:
color: grey;
jusst like you are setting a font color.
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?
It works by loading the icons via @font-face CSS property, so you can check out the browser support here: http://caniuse.com/#feat=fontface. Font Awesome includes the EOT file format, which is supported by IE8 – see here: http://caniuse.com/#feat=eot
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.
Thank you so much!!! your help is really appreciated.
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
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:
label.success{color:#339900;}
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;
}
Thanks! This was really helpfull to me.
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
Hi Danut,
You simply string the pseudo classes together as
a:visited:beforeso you complete code would be.book-navigation .menu a:visited:before {
color: #FF7C00;
content: "\f00c";
font-family: FontAwesome;
text-decoration: none;
}
How do you get space after the icon.
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.
I cant find icon for vimeo. Why?
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.
Vimeo is now included in version 4.0!
good done
For those wanting a way to filter & search font awesome icons, I put together this tool ( which is open sourced )
http://lab.peterschmalfeldt.com/fontawesome/
If you add the CSS content values to the display on your search tool, I’d find yours more useful than my own!
Thanks, you made my Friday.
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,
W
Hi William,
You can do this by adding the Font Awesome icon style to the
#wrap:afterpseudo element. You then use absolute positioning to place the icon where you need it; if you want it in the center, then you can combineleft: 50%;withmargin-left: -(half the icon size); Since you want it to be a background image, you’ll need to wrap the content of thediv#wrapin another div and apply az-indexhigher than the icon. I have made a demo of this to best explain what I mean. See here: http://codepen.io/astrotim/pen/IjJzLHope that works for you!
Tim.
Great Tim!
I really appreciate the clear example, thanks a lot!
Oh I see now, So I must add awesome font from third party inside the site… Thank you very much
This is awesome. Has anyone got this working on input (type=”text”) elements?
Hi JP,
To my knowledge, it is not possible to use the
:beforeor:afterpseudo-selectors on the<input>element. I would suggest looking at the Bootstrap approach using prepended components under the heading ‘Extending Form Controls’. If you add another element like this, then you’ll be able to style it with a Font Awesome icon.Hello Tim,
Really awesome Is this free fonts OR there any license.
Thanks,
Hi Suresh,
Font Awesome is an open source project. See http://fortawesome.github.io/Font-Awesome/license/ for full details.
hi
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…….
I’d guess that the font definition is incorrect. The snippet above declares
FontAwesomeas thefont-family, so this requires the presence of an@font-facerule which defines'FontAwesome'with the relevant paths to the font files. See this CDN version of the CSS, or read the Get Started page on the Font Awesome site for more help.Thank you for taking the time to do this. Big help.
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; */
}
http://acidmartin.wordpress.com/2011/09/26/css3-treevew-no-javascript/
Since Treeview is already using the
.css-treeview label::beforeselector, I suggest using the.css-treeview label::afterselector 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.[…] 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 […]
Thank you for this page – it is the most visited website in my workflow…
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..
I had paste this element code it html file using style tag in head. but, there is no result!!!
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.
Hi,
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? 🙂
tnks
dap
Hi Dap,
I have created another post with the version 3 Font Awesome icons here: https://astronautweb.co/snippet/font-awesome-icons-v3/
Great post out there (Y).. btw which theme are you using?
Can you do a High Heel shoe Icon?
I did not create these icons, you will need to submit a request to http://fontawesome.io/. You can also try looking a the many different icon fonts available through http://icomoon.io/
This is very powerful if you know how to use it. Good for button makers 😉
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!
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.
really nice share….I too have customized to add Social links in my blog footer………..using cool font awesome icons……..
I have installed this font on Bootstrap framework but I can’t find “Blackberry” icon… but it’s amazing and really complete stuff!
great usefull post, very complete 🙂
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?
[…] https://astronautweb.co/snippet/font-awesome/ […]
[…] Reference: https://astronautweb.co/snippet/font-awesome/ […]
hy thank you very much
Thanks a looooooooooooot… 🙂 I really wanted this…
Keep up the good work 🙂
Thank so much, this post is very useful for me.
[…] https://astronautweb.co/snippet/font-awesome/ […]
Can i use this Font Awesome Icons in Asp:menu..??
I am not familiar with Asp:menu, but I can say that you can use Font Awesome where ever you can use CSS. It is also possible to save out individual icons as SVG or PNG via http://icomoon.io/
Thanks for the link its really helpful. Cheers..!!
Just visited this site and I want to thanks Tim for sharing this info. I have use some it 🙂
Awesome list for reference. Thanks 🙂
[…] ? […]
[…] A list of Font Awesome icons and their CSS content values […]
[…] https://astronautweb.co/snippet/font-awesome/ […]
[…] View list of icons […]
For some reason sometimes displays the icon and somtimes displays a code … any help on this ??
Thanks a lot !
[…] See the full list: https://astronautweb.co/snippet/font-awesome/ […]
thanks its very useful..
you can also try to convert font awesome with http://iconion.com/
This is very helpfull, Thanks a lot 🙂
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!!
Just visit this site http://www.uiplayground.in/css3-icons/ and I have use some it 🙂
Can I have a color on hover for each icons and a color for visited.
Hi Praveen. Yes, you can style the icon font the same way you style text. When combining
:beforewith the:hoverand:visitedpseudo selectors, you need to chain them together, with hover or visited listed first, example:.element:hover:before {/*style*/}Thank you
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.
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.
Thanks
Great post!!! Thanks for the information.
Hi, Tim Holt
Thanks for Great post!!
its very useful
thank’s for your share. i like it
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
Hi Oeurn,
The icon is styled on the
:beforepseudo element, so to apply a hover style, you need to chain hover and before together, like: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.
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
Hiii,
I want foot icon in font awesome style .
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.
How can I use hover state?
Hi, see the comment above here. This should answer your question.
Hi, some of the icons works well, but some won’t appear. Any idea why?
Hi Karene, I suggest checking the ‘Get Started’ documentation on the official Font Awesome site.
fontawersome Windows host problem!
This is so awesome ^_^
Awesome.
what is different between SVG and ICOMOON?
Hi Danish,
SVG is an image file format, such as JPEG or PNG. IcoMoon is a webapp for creating custom icon font libraries. I recommend watching this excellent presentation from Chris Coyier which talks about the difference between icon fonts and SVG.
Can I have a color on hover for each icons and a color for visited.
You sure can! This was answered here. For visited, change the selector to
.element:visited:before {/*styles*/}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!!
Hi Ankita,
As noted below the code snippet, you can’t use
beforeorafterpseudo selectors on theinputelement, so you will need to wrap it in another element, such as adiv. You can then style the wrapper div using the CSS in this snippet. I have created a CodePen here to demonstrate this in action.HI,
Can I upload this beautiful icons into the twenty ten theme from wordpress? Any guidance will be extremely appreciate it. THanks, Patricia
Hi Patricia,
Yes, you can use Font Awesome on any web page, including the Twenty Ten theme. You need to include the font files in your theme files and then reference the fonts in your HTML or CSS. I recommend reading the Get Started Guide on the official Font Awesome website to learn more about how it works.
I think the html of my theme is a little different? (sorry, i’m a noob at html and coding) it’s more like:
TITLE
TEXT
and i can’t seem to figure out how to replace the already-set ones?
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)
TITLE
TEXT
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
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(
My issue is not resolved yet the way I want to 🙁
Gret job
Thanks….
HI CAN I USE THESE FOR MY COMMERCIAL PROJECTS FOR FREE
Great font. Really love the icons.
Will apply to our site asap.
Using this instead of images saves bandwith and resources loaded.
This doesn’t work on firefox anymore, I’ve tried various versions.
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.
You should really update this post with the new icons 🙂
Done! Updated to v4.2.0
There is a fix for Firefox??
See the comment above
well i find this page more fast to copy/paste then the official fontawesome one..
so i always use this 🙂
I have css and fonts file in the same server of the site, but in Firefox doesn’t work. Why??
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.
Great resource, thanks!
Awesome. I found it very helpful today!
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
thanks
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.
Font Awesome are the best and I found it very helpful today!
Great , thanks!
Hey, I wanted to know how you could apply font-awesome properties such as the resizing font once you charged the font with css ?
Since it is a font, you simply use the
font-sizeCSS property to control the size.it very helpful, and i used in my websites when i build it ,thanks!
Thanks Tim, i am trying to fix all errors depend on your advice
Hi,how can i use this font without bootstrap codeing, i mean i have implemented but need without bootstrap
Perfect, just was I was looking for 🙂
Nice collection. But when I put the code for >> in CSS like ” content:’\f101′; ” it did not work.
very nice. Thanks.
so you write it this way:
content:’\f101′;
font-family:FontAwesome
cheers
yes
Thanks for this informative post.
Grate job its Awesome exactly
Thanks you man….
Hi
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?
Hi
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
HI
Sorry I forgot to include fonts folder. Its working now. Thanks for this awesome fonts.
Is it possible to stack FA icons in css? can you provide a code snippit example?
How to insert font awesome for offline user? i want to desaign a web..
You might want to add to your table the code for a non-breaking space, which is …
/00a0Hello!
Don’t work hover… Please help..
.text ul li a:hover:before { color: #999; }
HI
Font Awesome are the best and I found it very helpful today!
Great , thanks!
it works like a charm see my website http://www.techbrown.com/
Thank you so much!
Thanks, been looking for this…
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
You can request new icons via the Font Awesome community page here: http://fortawesome.github.io/Font-Awesome/community/#requesting-new-icons
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.
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.
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.
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/
Hii…
Can i use my own icons in the shortcodes??
Please help
Thanks in Advance…
പൊളിച്ചു മച്ചാനെ
Awesome, it really enhances the look of website 🙂
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?
Any chance Blogger can be implemented somehow? It’s the one icon I’m missing.
Salam,
use “Cloudflare” CDN: http://cdnjs.com/libraries/font-awesome
Wassalam,
Mansoor Ahmad
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
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.
Superb !!!!!!!
പൊളിച്ചു മച്ചാനെ പൊളിച്ചു.
it works like a charm see my website http://www.anaarbah.com/
Thanks for this! It was really useful!
Amaaaaazing…
Thanks your post helped me a lote 😉
Tim Hi. Wonderful post you have here. Been using it since I came across it. Thanks a lot.
Not work properly what is the reason of it
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.)
Thanked the very wonderful site and set up and thank God Patoviq
Thanks 🙂 it’s very useful.
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.
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.
Excellent resource, very kind of you to take the trouble to post these.
Hi
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?
Hey Mate this is f@#cking Awesome!
Awesome solution!! Thank you..
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.
i want hash(#) icon
fa-hashtag
awesome icon, really nice.. thank you
very easy to use and place it to the blog or any website 🙂
thanks https://astronautweb.co/
SO-s0-s0 great for this is helpful to me
how i can use these icons ?! what is the HTML code ? 🙂
very very nice work! thanks a lot..
nice list of icons , you reduced my work …. it helped for me
Thaks guy, very usefull.
@Ankita
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.
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.
Thanks 🙂 it’s very useful. Very very good.
Hi i want bathroom, Kitcheen, Laundray content values
This is really greats!!!
his is really greats!!!
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
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
Thanks! This was really helpfull to me.
This is awesome icon. Veru helful wih me ^.^
Thank you very much…… !!
This is very very good amazing infomation.
고맙습니다. 정말 대단한 정보에요.
本当にありがとうございます。
これはすごくすばらしい情報です。
thanks it is helped me
Its so awesome. It makes website fast as instead of using images, this code make more sense 🙂
Hi, how to insert hover transition effect
Thank you for sharing this awesome font.
Thank you – this helps a lot!
you are the best
Thanks. It works like a charm
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/
Really nice.
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!
icon is easy by this method
Should be more complete
Thx
Great work… Thank you!
This is really greats!!! http://www.kol7sry.com/
http://www.kol7sry.com/p/2015.html
Thanks Dudhu
I use this very often. Thanks for sharing!
http://BryanBarrera.com
How can i get the link of Icomoon css file in order to use online same as font-awesome.
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…..
Thanks
Arun
Gooood. Thanks
Thanks for the good information and code that really helps us for designing.
Regards,
http://www.imediasolutions.in
Very nice work, thank you, 🙂
great code
good…
How to create A Font icons ? (if it make sense)
thanks, I’ve been looking for a list like that!:)
thx for the best site
please add the carpet icon
http://tamir.asia/ecu-repair-training/
I am not getting microwave icon. can you tell the uni code for micoroven
Thanks so much for these infos, absolute life savers 🙂
Hi,
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:
{{help_center.name}}
{{#each categories}}
{{name}}
{{/each}}
{{pagination}}
{{#if promoted_articles}}
{{t ‘promoted_articles’}}
{{#each promoted_articles}}
{{title}}
{{/each}}
{{/if}}
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;
}
excellent
thanx alot you saved more time for searching about icon’s content name 😀
How to use flip horizontal effect with the content.
Thanks amazing icon, actually good
font: 15px/1 fontawesome;
What is means ?
Problem with fa??? nah…
I’ve got https://astronautweb.co/snippet/font-awesome/
The link to use these icons doesn’t work anymore
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?
This is really great, thanks for the help
Anyone share blogger Icons code here?
thanks for icons list
Really helpful cheat sheet for Font Awesome. Hoping you’d update it to its recent version once you have time. Thank you!
Do you have the updated list for 4.7.0 ?
Hi Jay,
I have now updated this page with the v4.7.0 icons.
nice font i try to use it in my website
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;
thanks for the icons
Thank for the icon list, it’s awesome and useful 🙂 !
thanks for icons list
Nice representation of all important icon in one place.
thank you
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?….
Thanks, I just used it my own site. Regards.
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.
Here is a kid doing it with an element.
https://www.youtube.com/watch?v=pmXtNHLx9fc
I just don’t know how I think you need the .css file he has.
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!!
THANK YOU.VERY GOOD.
AWESOME
Hi, how can I use the new instagram icon? Thankss
thank you bro. ( eyvallah reis)
Many thanks for the list. Very helpful
there is no search option..
nice,
i used my website “http://www.rgltricks.com”
Thanks a lot
easy to use
I have made a number of edits on your own site. Thank you so much. 🙂
Why blogspot icon content not add in your website.
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?….
Please give me fa-css classes to BBB icon logo
please sir
Great tutorial. This tutorial was really helpful to how to use font awesome in my business site. CSS very helpful to me. Thanks.
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;}
Many thanks for the list. Very helpful
Since the icons have descriptive names, Strg + f (Windows) or Cmd + f (Mac) should be enough for searching this list.
Thank you so much. You save my time. This post help one to choose right one.TechnewsThis post covers important topic. Much more..
so good
Hii Good reviews and best Services
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.
Thanks for saving my time for providing entire list.
Thanks for saving my time for providing entire list.
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 ?
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
Çok saol teşekkürler. işime yaradı heryerde bunu arıyordum. Blog için olmassa olmazı bu.
this is something im looking to implement on my website http://imedia.ng for some days now.
thanks a lot for sharing
I use this very often. Thanks for sharing!
https://ar-radi.blogspot.com
Thanks
how can I use the new instagram icon? Thankss
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.
Thanks, you solved my problem.
it was greate…
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.)
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.
This is really great, thanks for the help
Best icon solutions! Thanks
http://koditvepg.com
Nice article
Thanks, this worked really well on my JAV site. 🙂
I used the header method and it went fine.
Amazing work ….. you are giving a amazing icon for all website ,,,
I’m a website designer in Gujarat
Thank you very much sir
Awesome Cheat Sheet….
Wonderful Collection !!
Thanks Alot !
thank you bro
I upgraded to Fontawesome 5 and it seems this not working. Any update for Fontawesome 5?
very good
hello
i applied css on my website but showing rectangle box
Nice collection
Ohh, great, thank you bro
nice to know 很高兴知道
Thank you for this list. It very helpful for me!
Thanks bro
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?
Thank you sir, I a planning to use it in my current assignment.
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.
really a very good list..many important things ive learn in your blog,,very informative,thanks a lot
thanks for the info. i’ll check it one by one.
very good collection of blog list. thanks for saving my time in searching.i really like it..
Thanks for sharing this awesome list.your blog is one of the best ive seen,i love it,kindly visit my site..
Nice Bro
thanks dude