List of Font Awesome Icons and Their CSS Content Values PDF

Menu Portfolio (/portfolio/) Articles (/blog/) Contact (/contact/)
Astronaut
A list of Font Awesome icons and their CSS content values (https://astronautweb.co/snippet/font-awesome/)
15 October 2012
by Tim Holt (https://plus.google.com/114633217422139538177) in Snippets (https://astronautweb.co/snippets/)
Tweet
Like
September 2014 Updated to Font-Awesome 4.2.0

Font Awesome (http://fortawesome.github.com/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.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
.element{
position:relative;
}
/*replacethecontentvaluewiththe
correspondingvaluefromthelistbelow*/
.element:before{
content:"\f000";
fontfamily:FontAwesome;
fontstyle:normal;
fontweight:normal;
textdecoration:inherit;
/*adjustasnecessary*/
color:#000;
fontsize:18px;
paddingright:0.5em;
position:absolute;
top:10px;
left:0;
}
(//srv.buysellads.com/ads/cli
segment=placement:astrona
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:
Takefullcontrolofyour
websitewithSitefinity
CMSandBootstrap.
(//srv.buysellads.com/ads/click/x/GTND
segment=placement:astronautwebco)
adsviaCarbon
(http://carbonads.com)
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-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-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-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-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-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-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-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-tumblr-square
"\f174"
fa-long-arrow-down
"\f175"
fa-long-arrow-up
"\f176"
fa-long-arrow-left
"\f177"
fa-long-arrow-right
"\f178"
fa-apple
"\f179"
fa-windows
"\f17a"
fa-android
"\f17b"
fa-linux
"\f17c"
fa-dribbble
"\f17d"
fa-skype
"\f17e"
fa-foursquare
"\f180"
fa-trello
"\f181"
fa-female
"\f182"
fa-male
"\f183"
fa-gittip
"\f184"
fa-sun-o
"\f185"
fa-moon-o
"\f186"
fa-archive
"\f187"
fa-bug
"\f188"
fa-vk
"\f189"
fa-weibo
"\f18a"
fa-renren
"\f18b"
fa-pagelines
"\f18c"
fa-stack-exchange
"\f18d"
fa-arrow-circle-o-right
"\f18e"
fa-arrow-circle-o-left
"\f190"
fa-caret-square-o-left
"\f191"
fa-dot-circle-o
"\f192"
fa-wheelchair
"\f193"
fa-vimeo-square
"\f194"
fa-try
"\f195"
fa-plus-square-o
"\f196"
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-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-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-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"
189 Responses to A list of Font Awesome icons and their CSS content
values
hemant says:
December 14, 2012 at 6:44 pm (https://astronautweb.co/snippet/fontawesome/#comment-110260)
how can we use this type of css ?
Reply(https://astronautweb.co/snippet/fontawesome/?replytocom=110260#respond)
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.
jen (http://googies) says:

March 5, 2013 at 9:02 am (https://astronautweb.co/snippet/fontawesome/#comment-133355)
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.
DesignNewbie says:
April 22, 2013 at 12:20 am (https://astronautweb.co/snippet/fontawesome/#comment-151758)
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?
Tim says:
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
(http://caniuse.com/#feat=fontface). Font Awesome includes the EOT file format,
which is supported by IE8 see here: http://caniuse.com/#feat=eot
(http://caniuse.com/#feat=eot)
helloman2 (http://[email protected]) says:

April 23, 2013 at 11:36 pm (https://astronautweb.co/snippet/fontawesome/#comment-152478)
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.
Rizwan Khan (http://www.devciti.com) says:

Thank you so much!!! your help is really appreciated.
Brian says:
May 3, 2013 at 5:01 am (https://astronautweb.co/snippet/fontawesome/#comment-154874)
What about adding conditional icons to form input values?
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 cant 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
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:
label.success{color:#339900;}
input.success{border:1px solid #339900;padding-right: 30px;}
label.success:after {
color: #339900;
content: \f00c;
position: absolute;
right: 10px;
top: 25px;
}
Nico Knaepen (http://www.appventure.be) says:

Thanks! This was really helpfull to me.
Danut (http://library720.com/) says:

June 5, 2013 at 8:03 am (https://astronautweb.co/snippet/fontawesome/#comment-164796)
How i can add for a:visited icon
.book-navigation .menu a:visited {
color: #FF7C00;
content: \f00c;
text-decoration: none;
}
this is my class in css
Tim says:
June 5, 2013 at 8:27 pm (https://astronautweb.co/snippet/fontawesome/#comment-165052)
Hi Danut,
You simply string the pseudo classes together as a:visited:before so you
complete code would be
.booknavigation.menua:visited:before{
color:#FF7C00;
content:"\f00c";
fontfamily:FontAwesome;
textdecoration:none;
}
Ronnie (http://roway13.com) says:

July 5, 2013 at 11:33 pm (https://astronautweb.co/snippet/fontawesome/#comment-173847)
How do you get space after the icon.
Tim says:
July 6, 2013 at 7:22 am (https://astronautweb.co/snippet/fontawesome/#comment-173910)
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.
Alex (http://www.ctrlshiftstudios.com) says:

I cant find icon for vimeo. Why?
Tim says:
Hi Alex,
FontAwesome does not yet have a Vimeo icon. Im sure it will be added soon in a
future version, however in the meantime you can use the font icon from IcoMoon
(http://icomoon.io/#preview-free) 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:
November 11, 2013 at 7:54 pm (https://astronautweb.co/snippet/fontawesome/#comment-261584)
Vimeo is now included in version 4.0!
accept says:
August 5, 2013 at 5:55 am (https://astronautweb.co/snippet/fontawesome/#comment-184656)
good done
Peter Schmalfeldt (http://peterschmalfeldt.com) says:

August 8, 2013 at 5:05 pm (https://astronautweb.co/snippet/fontawesome/#comment-187319)
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/
(http://lab.peterschmalfeldt.com/fontawesome/)
Tim says:
If you add the CSS content values to the display on your search tool, Id find yours
more useful than my own!
Brian (http://www.codesign.cc/) says:

Thanks, you made my Friday.
William T says:
Hi Tim,
I want to use these icons as a big background image in different pages, lets
say in the or #wrap, but cant find how. Do you know how to accomplish it?
Thanks in advance,
W
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
marginleft:(halftheiconsize) ; Since you want it to be a background
image, youll need to wrap the content of the div#wrap in another div and apply a
zindex 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
(http://codepen.io/astrotim/pen/IjJzL)
Hope that works for you!

Tim.
William T says:
Great Tim!
I really appreciate the clear example, thanks a lot!
Ibnu (http://www.threelas.com) says:

September 12, 2013 at 4:33 am (https://astronautweb.co/snippet/fontawesome/#comment-208736)
Oh I see now, So I must add awesome font from third party inside the site
Thank you very much
JP DeVries (http://devries.jp) says:

This is awesome. Has anyone got this working on input (type=text)
elements?
Tim says:
Hi JP,
To my knowledge, it is not possible to use the :before or :after pseudoselectors on the <input> element. I would suggest looking at the Bootstrap
approach using prepended components (http://getbootstrap.com/2.3.2/basecss.html#forms) under the heading Extending Form Controls. If you add another
element like this, then youll be able to style it with a Font Awesome icon.
Suresh Katke (http://[email protected]) says:

Hello Tim,
Really awesome Is this free fonts OR there any license.
Thanks,
Tim says:
September 26, 2013 at 3:12 pm (https://astronautweb.co/snippet/fontawesome/#comment-219263)
Hi Suresh,
Hi Suresh,
Font Awesome is an open source project. See http://fortawesome.github.io/FontAwesome/license/ (http://fortawesome.github.io/Font-Awesome/license/) for full
details.
srinu (http://www.media3.solutions) says:

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.
Tim says:
October 1, 2013 at 9:59 am (https://astronautweb.co/snippet/fontawesome/#comment-230275)
Id guess that the font definition is incorrect. The snippet above declares
FontAwesome as the fontfamily , so this requires the presence of an @fontface
rule which defines 'FontAwesome' with the relevant paths to the font files. See this
CDN version of the CSS (http://netdna.bootstrapcdn.com/fontawesome/3.2.1/css/font-awesome.css), or read the Get Started page on the Font
Awesome site (http://fortawesome.github.io/Font-Awesome/get-started/) for
more help.
Bill (http://cdm.depaul.edu) says:

Thank you for taking the time to do this. Big help.
mapsv4 (http://www.mapsv4.com) says:

October 22, 2013 at 6:29 pm (https://astronautweb.co/snippet/fontawesome/#comment-251139)
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;
color: #FFCC00;
/* background: url(icons.png) no-repeat; */
}
http://acidmartin.wordpress.com/2011/09/26/css3-treevew-no-javascript/
(http://acidmartin.wordpress.com/2011/09/26/css3-treevew-no-javascript/)
Tim says:
Since Treeview is already using the .csstreeviewlabel::before selector, I
Since Treeview is already using the .csstreeviewlabel::before selector, I

suggest using the .csstreeviewlabel::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.
PageLines Community | Font Awesome Reference Guide

(http://pagelinescommunity.com/font-awesome-reference-guide/) says:
[] 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 []
Dan (http://www.babajagas.com) says:

Thank you for this page it is the most visited website in my workflow
Faisal Khan says:

November 12, 2013 at 12:35 am (https://astronautweb.co/snippet/fontawesome/#comment-261724)
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..
sadiaiftikhar says:
I had paste this element code it html file using style tag in head. but, there is
no result!!!
jeff szuc (http://4thfloorstudio.com) says:

I love it when I think something is going to take me hours to figure out and
then I discover that someones already done all the work for me. Thanks for
doing this, and thanks for sharing. youre awesome.
Dap says:
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
tnks
dap
Tim says:
January 5, 2014 at 9:57 pm (https://astronautweb.co/snippet/fontawesome/#comment-302741)
Hi Dap,
I have created another post with the version 3 Font Awesome icons here:
http://astronautweb.co/snippet/font-awesome-icons-v3/
(http://astronautweb.co/snippet/font-awesome-icons-v3/)
Beekita Sharma (http://www.topkappers.com) says:

Great post out there (Y).. btw which theme are you using?
Cassandra Faye (http://PicassaShoes.com) says:

December 6, 2013 at 10:27 am (https://astronautweb.co/snippet/fontawesome/#comment-281514)
Can you do a High Heel shoe Icon?
Tim says:
I did not create these icons, you will need to submit a request to
http://fontawesome.io/ (http://fontawesome.io/). You can also try looking a the
many different icon fonts available through http://icomoon.io/
(http://fontawesome.io/)
9KD (http://www.9kdesigns.com) says:

This is very powerful if you know how to use it. Good for button makers
Teri (http://Inproduction) says:

Just a HUGE THANK YOU, Tim, for this article. I now have this bookmarked so
as not to lose it!
Ive 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 Ive 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:
Youre 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.
anand (http://www.wptub.com) says:

really nice share.I too have customized to add Social links in my blog
footer..using cool font awesome icons..
Ichsany (http://www.ichsany.com) says:

I have installed this font on Bootstrap framework but I cant find Blackberry
icon but its amazing and really complete stuff!
Oemar (http://oemar.tk) says:

great usefull post, very complete
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;
color: #fff;
}
Also, how would you change the color of an icon whenever you hover over it?
How to replace search button text with a icon font in Genesis - Sridhar
Katakam (http://sridharkatakam.com/replace-search-button-text-icon-fontgenesis/) says:
[] http://astronautweb.co/snippet/font-awesome/
(http://astronautweb.co/snippet/font-awesome/) []
Adding nav sub menu indicators in Genesis using Font Awesome - Sridhar
Katakam (http://sridharkatakam.com/adding-nav-sub-menu-indicatorsgenesis-using-font-awesome/) says:
[] Reference: http://astronautweb.co/snippet/font-awesome/
hai nusantara (http://hainusantara.com) says:

hy thank you very much
Sush says:
Thanks a looooooooooooot
Keep up the good work
I really wanted this
cn t (http://sonduong.vn/can-o-to-dien-tu.html) says:
Thank so much, this post is very useful for me.
Jquery Thmes et outils | BlogMRoot (http://mroot.calebirri.fr/wp/jquerythemes-et-outils/) says:

Yashwanth says:
February 6, 2014 at 10:32 pm (https://astronautweb.co/snippet/fontawesome/#comment-318355)
Can i use this Font Awesome Icons in Asp:menu..??
Tim says:
February 7, 2014 at 9:46 am (https://astronautweb.co/snippet/fontawesome/#comment-318524)
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/ (http://icomoon.io/)
Yashwanth says:
February 7, 2014 at 3:29 pm (https://astronautweb.co/snippet/font-

Thanks for the link its really helpful. Cheers..!!
arwel legaspi (http://www.alluc.to/) says:

Just visited this site and I want to thanks Tim for sharing this info. I have use
some it
Tushar (http://techzoom.org) says:

Awesome list for reference. Thanks
Liste des icons de Font Awesome et leur valeur content | Pixeline |

Intgration, dveloppement & Gestion de projet Web (http://pro.pixeline.fr/?
p=40) says:
[] ? []
A list of Font Awesome icons and their CSS content values - Bronson Quick
(http://bronsonquick.com.au/blog/2014/02/28/list-font-awesome-icons-csscontent-values/) says:
[] A list of Font Awesome icons and their CSS content values []
Iconos para webs como fuente y no como imagen | giltesa - Notas rapidas
(http://giltesa3.wordpress.com/2014/02/28/iconos-para-webs-como-fuentey-no-como-imagen/) says:
FontAwesome A font to provide you with icons to minimise filesize | My

Blog (http://starlett.co.za/wp/fontawesome-a-font-to-provide-you-with-iconsto-minimise-filesize/) says:
March 3, 2014 at 9:41 pm (https://astronautweb.co/snippet/fontawesome/#comment-327826)
[] View list of icons []
Jorge says:
For some reason sometimes displays the icon and somtimes displays a code
any help on this ??
Thanks a lot !
Font Awesome icons and their CSS content values | Vizergy Creative
(http://design.vizergy.com/designwp/2014/03/font-awesome-icons-and-theircss-content-values/) says:
[] See the full list: http://astronautweb.co/snippet/font-awesome/
sreelal (http://sreelalks.com/) says:

thanks its very useful..
Nicolas M says:
you can also try to convert font awesome with http://iconion.com/
(http://iconion.com/)
Suave Digital (http://www.suavedigital.com) says:

This is very helpfull, Thanks a lot
peter saurus (http://www.buscocolegio.com) says:

its 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!!
sulaman says:
Just visit this site http://www.uiplayground.in/css3-icons/
(http://www.uiplayground.in/css3-icons/) and I have use some it
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*/}
Ivan says:
Thank you
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.
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.
Thanks
Rian says:
Great post!!! Thanks for the information.
Rajkumar Khandelwal says:

May 6, 2014 at 3:23 pm (https://astronautweb.co/snippet/fontawesome/#comment-343055)
Hi, Tim Holt
Hi, Tim Holt

Thanks for Great post!!
its very useful
tutorial89 (http://tutorial89.blogspot.com/) says:

thanks for your share. i like it
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;
}
Frank says:
Great list, thank you. It would be even better if the list also contained the FAclass names would make it faster to find a specific one (rather than eyescanning all icons). I wonder why this extremely useful list is not on the
official site.
Ian Mustafa (http://ianmustafa.com) 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 its my first pen and you should
take a look: http://codepen.io/cuplizian/pen/GCihx
(http://codepen.io/cuplizian/pen/GCihx)
Keep up your good work, and thanks in advance!
Keep up your good work, and thanks in advance!

Ian Mustafa
Nitesh Suthar (http://www.mitraye.com) says:

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
(http://fortawesome.github.io/Font-Awesome/community/).
Despoina says:
How can I use hover state?
Tim says:
Hi, see the comment above here (http://astronautweb.co/snippet/fontawesome/#comment-339773). This should answer your question.
karene says:
Hi, some of the icons works well, but some wont appear. Any idea why?
Tim says:
Hi Karene, I suggest checking the Get Started documentation on the official Font
Awesome site (http://fortawesome.github.io/Font-Awesome/get-started/).
gece frsatlar (http://www.gecefirsatlari.com) says:

fontawersome Windows host problem!
Joerel says:
This is so awesome ^_^
Nitesh says:
Awesome.
Danish says:
what is different between SVG and ICOMOON?
Tim says:
Hi Danish,
SVG is an image file format, such as JPEG or PNG. IcoMoon (http://icomoon.io/) is a
webapp for creating custom icon font libraries. I recommend watching this
excellent presentation from Chris Coyier (http://vimeo.com/99828116) which talks
about the difference between icon fonts and SVG.
RAMANAND YADAV says:

Can I have a color on hover for each icons and a color for visited.
Tim says:
You sure can! This was answered here (http://astronautweb.co/snippet/fontawesome/#comment-339773). For visited, change the selector to
.element:visited:before{/*styles*/}
Ankita (http://www.ankiita.com) 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
(http://ankiita.com/ihm/reports.html)
Please help!!
Tim says:
Tim says:
Hi Ankita,
As noted below the code snippet, you cant 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 (http://codepen.io/astrotim/pen/Ddfvt) to demonstrate
this in action.
Patricia (http://www.eastbaybehaviortherapycenter.com) says:

HI,
Can I upload this beautiful icons into the twenty ten theme from wordpress?
Any guidance will be extremely appreciate it. THanks, Patricia
Tim says:
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 (http://fortawesome.github.io/Font-Awesome/getstarted/) to learn more about how it works.
Sydney Yo says:
I think the html of my theme is a little different? (sorry, im a noob at html
and coding) its more like:
TITLE
TEXT
and i cant seem to figure out how to replace the already-set ones?
Vladimir (http://webest.esy.es/) says:

Hello, Im 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(

awesome/#comment-352231)
My issue is not resolved yet the way I want to
Ruben (http://www.rubenroccodeluca.it) says:

Gret job
Thanks.
crazyguy says:
HI CAN I USE THESE FOR MY COMMERCIAL PROJECTS FOR FREE
PuntoSex (http://www.puntosex.es) says:

Great font. Really love the icons.
Will apply to our site asap.
Using this instead of images saves bandwith and resources loaded.
Raffi (http://www.reasonmediagroup.com) says:

This doesnt work on firefox anymore, Ive 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
(https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS).
David Walsh has a good explanation and solution in his Serving Fonts from a CDN
(http://davidwalsh.name/cdn-fonts) article. Alternatively, you can serve the Font
Awesome CSS and font files from the same server as the website, and they wont
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.
alfredopacino says:
You should really update this post with the new icons
Tim says:
September 18, 2014 at 8:51 am (https://astronautweb.co/snippet/font-

Done! Updated to v4.2.0
Daniele (http://www.espertomagento.it) says:

There is a fix for Firefox??
Tim says:
See the comment above (http://astronautweb.co/snippet/fontawesome/#comment-352247)
alfredopacino says:
well i find this page more fast to copy/paste then the official fontawesome
one..
so i always use this
Daniele (http://www.espertomagento.it) says:

I have css and fonts file in the same server of the site, but in Firefox doesnt
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
(http://demo.astronautweb.co/fa/).
I hope this helps, Tim.
Anders (http://www.andersnoren.se) says:

Great resource, thanks!
Dan (http://www.dan123.co.uk) says:

Awesome. I found it very helpful today!
Mohammed (http://www.best-download-free.com) 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/downloadwhatsapp-plus-2015.html (http://www.best-downloadfree.com/2014/09/download-whatsapp-plus-2015.html)
thanks
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.
seha (http://www.seha-3laj.com) says:

Font Awesome are the best and I found it very helpful today!
Great , thanks!
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 ?
Tim says:
Since it is a font, you simply use the fontsize CSS property to control the size.
down (http://www.best-download-free.com/) says:

it very helpful, and i used in my websites when i build it ,thanks!
Mohammed (http://www.best-download-free.com/) says:

Thanks Tim, i am trying to fix all errors depend on your advice
Rohit says:
Hi,how can i use this font without bootstrap codeing, i mean i have
implemented but need without bootstrap
Antonio Snchez (http://antsanchez.com) says:

Perfect, just was I was looking for
Emily (http://www.ilmiweb.com) says:

Nice collection. But when I put the code for >> in CSS like content:\f101; it
did not work.
ilmi web (http://www.ilmiweb.com) says:

very nice. Thanks.
Simo Mrak says:

so you write it this way:
content:\f101;
font-family:FontAwesome
cheers
dsd says:
yes
LabLance (http://www.lablance.com) says:

December 26, 2014 at 8:37 pm (https://astronautweb.co/snippet/font-

Thanks for this informative post. (http://www.lablance.com)
techaraby (http://www.tech-araby.com/) says:

Grate job its Awesome exactly
Thanks you man.
Aristocrat says:
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?
Aristocrat says:
Hi
If I add the CSS link as
href=http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/fontawesome.min.css, font icons are appearing in page but if I download the css
file and add local reference its not working, why? How can I solve this?
Thanks
Aristocrat says:
January 13, 2015 at 12:04 am (https://astronautweb.co/snippet/fontawesome/#comment-352283)
HI
Sorry I forgot to include fonts folder. Its working now. Thanks for this
awesome fonts.
Nicholai says:
January 15, 2015 at 9:35 am (https://astronautweb.co/snippet/fontawesome/#comment-352285)
Is it possible to stack FA icons in css? can you provide a code snippit
example?
Rendra (http://rendramh.blogpsot.com) says:

How to insert font awesome for offline user? i want to desaign a web..
Scott Leone (http://capcoddomains.cc) says:

You might want to add to your table the code for a non-breaking space,
which is
/00a0
Dribbling (http://dribbling.pro/) says:

Hello!
Dont work hover Please help..
.text ul li a:hover:before { color: #999; }
Nazmul says:
HI
Font Awesome are the best and I found it very helpful today!
Great , thanks!
Gopal (http://www.techbrown.com/) says:

it works like a charm see my website http://www.techbrown.com/
(http://www.techbrown.com/)
Alex (http://alexfalcucci.com) says:

Thank you so much!
Den (http://den-i.net) says:

Thanks, been looking for this
Shiva ram (http://www.derikgroup.com) 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
Tim says:
You can request new icons via the Font Awesome community page here:
http://fortawesome.github.io/Font-Awesome/community/#requesting-new-icons
(http://fortawesome.github.io/Font-Awesome/community/#requesting-new-icons)
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. Id so much love if you
included the new icons in this post, thats if you dont mind.
SEspider (http://www.sespider.com) 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.
Im 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 (http://fortawesome.github.io/Font-Awesome/get-started/). Im 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.
Opick Weblog (http://wajahilmu.blogspot.com/) 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/ (http://wajahilmu.blogspot.com/)
Divdeep Singh says:

Hii
Can i use my own icons in the shortcodes??
Please help
Thanks in Advance
Sudheer says:

Nik Phirke (http://etagnet.com) says:

Awesome, it really enhances the look of website
Oana says:
There doesnt seem to be a blogger iconwhich is annoying becausewell
my blogs on there.
Any chance this might be updated in the future?
Oana says:
Any chance Blogger can be implemented somehow? Its the one icon Im
missing.
Mansoor says:
Salam,
use Cloudflare CDN: http://cdnjs.com/libraries/font-awesome
(http://cdnjs.com/libraries/font-awesome)
Wassalam,
Mansoor Ahmad
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
vinayak pt says:
Hi, How can I implement a progress image or Spinner image on button click
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.
Sudheer says:
Superb !!!!!!!
.
eddy says:
it works like a charm see my website http://www.anaarbah.com/
(http://www.anaarbah.com/)
cameron (http://www.cameroneckelberry.com) says:

Thanks for this! It was really useful!
( http://www.absansanatco.com/) says:
Amaaaaazing
Kaefa (http://www.kaefa.com/) says:

Thanks your post helped me a lote
sahilluqman (http://forumblogindo.blogspot.com/) says:

Tim Hi. Wonderful post you have here. Been using it since I came across it.
Thanks a lot.
Tapas (http://www.sonsyengineers.com) says:

Not work properly what is the reason of it
Rachid (http://it-n-careerz.blogspot.com/) 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.)
Treatment (http://3laj.net/) says:

Thanked the very wonderful site and set up and thank God Patoviq
Addy says:
Thanks
its very useful.
Bijay Yadav (http://bijayyadav.com.np) 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.
Mr Kay says:
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 doesnt work there.
everything goes well if the code is changed for any other ison.
The link is http://ueureka.com/ (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?
Naser says:
Hey Mate this is f@#cking Awesome!
bootstrap (http://www.bootstrapthemeslab.com) says:

Awesome solution!! Thank you..
Yifeng (http://nicholaelaw.github.io) says:

Hi there. Can you share how you listed all the FA icons? Surely you did not
type all the code by hand, right? Im looking to do a similar list, but I cant
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.
manikandan says:
i want hash(#) icon
RESEPMASAK (http://www.resepmasak.my.id) says:

awesome icon, really nice.. thank you
Armand Darmanto (http://www.ogitu.web.id) says:

very easy to use and place it to the blog or any website
thanks http://astronautweb.co/ (http://astronautweb.co/)
Edward (http://www.formedex.org) says:

SO-s0-s0 great for this is helpful to me
ahmad says:
how i can use these icons ?! what is the HTML code ?
bootstrap themes (http://www.bootstrapthemeslab.com) says:

September 21, 2015 at 12:13 am (https://astronautweb.co/snippet/font-

very very nice work! thanks a lot..
balu@top best listed (http://www.topbestlisted.com/) says:

nice list of icons , you reduced my work . it helped for me
leonardo (http://www.leonardoscorza.com.br) says:

Thaks guy, very usefull.
faheem says:
@Ankita
The site http://ueureka.com (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.
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.
Instan (http://checkpn.com/) says:

Thanks
its very useful. Very very good.
sugu (http://www.winway.in/) says:

Hi i want bathroom, Kitcheen, Laundray content values
Manish (http:www.manish.com) says:

This is really greats!!!
Leave a Comment
Your Name (required)
Your Email (required)
(will not be published)
Your website
Your Comment Here (required)
Please prove you are not a spambot (required)

What is 2 + 3?
Submit Comment
Github
StackTwitter
2016 The Astronaut Web Company Pty Ltd ABN: 67 143 974 332

List of Font Awesome Icons and Their CSS Content Values PDF

Uploaded by

Copyright:

Available Formats

List of Font Awesome Icons and Their CSS Content Values PDF

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

List of Font Awesome Icons and Their CSS Content Values PDF

Uploaded by

Copyright:

Available Formats

Menu Portfolio (/portfolio/) Articles (/blog/) Contact (/contact/)

September 2014 Updated to Font-Awesome 4.2.0

jen (http://googies) says:

helloman2 (http://[email protected]) says:

Rizwan Khan (http://www.devciti.com) says:

What about adding conditional icons to form input values?

Nico Knaepen (http://www.appventure.be) says:

Danut (http://library720.com/) says:

Ronnie (http://roway13.com) says:

Alex (http://www.ctrlshiftstudios.com) says:

Peter Schmalfeldt (http://peterschmalfeldt.com) says:

Brian (http://www.codesign.cc/) says:

Hope that works for you!

Ibnu (http://www.threelas.com) says:

JP DeVries (http://devries.jp) says:

Suresh Katke (http://[email protected]) says:

srinu (http://www.media3.solutions) says:

Bill (http://cdm.depaul.edu) says:

mapsv4 (http://www.mapsv4.com) says:

Since Treeview is already using the .csstreeviewlabel::before selector, I

PageLines Community | Font Awesome Reference Guide

Dan (http://www.babajagas.com) says:

Faisal Khan says:

jeff szuc (http://4thfloorstudio.com) says:

Beekita Sharma (http://www.topkappers.com) says:

Cassandra Faye (http://PicassaShoes.com) says:

9KD (http://www.9kdesigns.com) says:

Teri (http://Inproduction) says:

anand (http://www.wptub.com) says:

Ichsany (http://www.ichsany.com) says:

Oemar (http://oemar.tk) says:

hai nusantara (http://hainusantara.com) says:

I really wanted this

Jquery Thmes et outils | BlogMRoot (http://mroot.calebirri.fr/wp/jquerythemes-et-outils/) says:

February 7, 2014 at 3:29 pm (https://astronautweb.co/snippet/fontawesome/#comment-318585)

arwel legaspi (http://www.alluc.to/) says:

Tushar (http://techzoom.org) says:

Liste des icons de Font Awesome et leur valeur content | Pixeline |

FontAwesome A font to provide you with icons to minimise filesize | My

sreelal (http://sreelalks.com/) says:

Suave Digital (http://www.suavedigital.com) says:

peter saurus (http://www.buscocolegio.com) says:

Rajkumar Khandelwal says:

Hi, Tim Holt

Hi, Tim Holt

tutorial89 (http://tutorial89.blogspot.com/) says:

Oeurn Sophearith says:

Ian Mustafa (http://ianmustafa.com) says:

Keep up your good work, and thanks in advance!

Keep up your good work, and thanks in advance!

Nitesh Suthar (http://www.mitraye.com) says:

gece frsatlar (http://www.gecefirsatlari.com) says:

RAMANAND YADAV says:

Ankita (http://www.ankiita.com) says:

Patricia (http://www.eastbaybehaviortherapycenter.com) says:

Vladimir (http://webest.esy.es/) says:

Ankita (http://www.ankiita.com) says:

Ruben (http://www.rubenroccodeluca.it) says:

PuntoSex (http://www.puntosex.es) says: