You can place Font Awesome icons just about anywhere using the CSS Prefix fa and the icon's
name. Font Awesome is designed to be used with inline elements (we like the <i> tag for
brevity, but using a <span> is more semantically correct).
<i class="fa fa-camera-retro"></i> fa-camera-retro
- If you change the font-size of the icon's container, the icon gets bigger. Same things goes for color,
drop shadow, and anything else that gets inherited using CSS.
fa-lg
fa-2x
fa-3x
fa-4x
fa-5x
To increase icon sizes relative to their container, use the fa-lg (33% increase), fa-2x, fa-3x, fa-4x, or fa-5x classes.
<i class="fa fa-camera-retro fa-lg"></i> fa-lg
<i class="fa fa-camera-retro fa-2x"></i> fa-2x
<i class="fa fa-camera-retro fa-3x"></i> fa-3x
<i class="fa fa-camera-retro fa-4x"></i> fa-4x
<i class="fa fa-camera-retro fa-5x"></i> fa-5x
- If your icons are getting chopped off on top and bottom, make sure you have
sufficient line-height.
- Home
- Library
- Applications
- Settings
Use fa-fw to set icons at a fixed width. Great to use when different icon widths throw off alignment.
Especially useful in things like nav lists & list groups.
<div class="list-group">
<a class="list-group-item" href="#"><i class="fa fa-home fa-fw"></i> Home</a>
<a class="list-group-item" href="#"><i class="fa fa-book fa-fw"></i> Library</a>
<a class="list-group-item" href="#"><i class="fa fa-pencil fa-fw"></i> Applications</a>
<a class="list-group-item" href="#"><i class="fa fa-cog fa-fw"></i> Settings</a>
</div>
- List icons
- can be used
- as bullets
- in lists
Use fa-ul and fa-li to easily replace default bullets in unordered lists.
<ul class="fa-ul">
<li><i class="fa-li fa fa-check-square"></i>List icons</li>
<li><i class="fa-li fa fa-check-square"></i>can be used</li>
<li><i class="fa-li fa fa-spinner fa-spin"></i>as bullets</li>
<li><i class="fa-li fa fa-square"></i>in lists</li>
</ul>
…tomorrow we will run faster, stretch out our arms farther… And then one fine morning—
So we beat on, boats against the current, borne back ceaselessly into the past.
Use fa-border and pull-right or pull-left for easy pull quotes or
article icons.
<i class="fa fa-quote-left fa-3x pull-left fa-border"></i>
...tomorrow we will run faster, stretch out our arms farther...
And then one fine morning— So we beat on, boats against the
current, borne back ceaselessly into the past.
Use the fa-spin class to get any icon to rotate. Works well with fa-spinner, fa-refresh, and fa-cog.
<i class="fa fa-spinner fa-spin"></i>
<i class="fa fa-circle-o-notch fa-spin"></i>
<i class="fa fa-refresh fa-spin"></i>
<i class="fa fa-cog fa-spin"></i>
CSS3 animations aren't supported in IE8 - IE9.
normal
fa-rotate-90
fa-rotate-180
fa-rotate-270
fa-flip-horizontal
fa-flip-vertical
To arbitrarily rotate and flip icons, use the fa-rotate-* and fa-flip-* classes.
<i class="fa fa-shield"></i> normal<br>
<i class="fa fa-shield fa-rotate-90"></i> fa-rotate-90<br>
<i class="fa fa-shield fa-rotate-180"></i> fa-rotate-180<br>
<i class="fa fa-shield fa-rotate-270"></i> fa-rotate-270<br>
<i class="fa fa-shield fa-flip-horizontal"></i> fa-flip-horizontal<br>
<i class="fa fa-shield fa-flip-vertical"></i> icon-flip-vertical
fa-twitter on fa-square-o
fa-flag on fa-circle
fa-terminal on fa-square
fa-ban on fa-camera
To stack multiple icons, use the fa-stack class on the parent, the fa-stack-1x for the regularly sized icon, and fa-stack-2x for the larger icon. fa-inverse can be used as an alternative icon color. You can even throw larger icon classes on the parent
to get further control of sizing.
<span class="fa-stack fa-lg">
<i class="fa fa-square-o fa-stack-2x"></i>
<i class="fa fa-twitter fa-stack-1x"></i>
</span>
fa-twitter on fa-square-o<br>
<span class="fa-stack fa-lg">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-flag fa-stack-1x fa-inverse"></i>
</span>
fa-flag on fa-circle<br>
<span class="fa-stack fa-lg">
<i class="fa fa-square fa-stack-2x"></i>
<i class="fa fa-terminal fa-stack-1x fa-inverse"></i>
</span>
fa-terminal on fa-square<br>
<span class="fa-stack fa-lg">
<i class="fa fa-camera fa-stack-1x"></i>
<i class="fa fa-ban fa-stack-2x text-danger"></i>
</span>
fa-ban on fa-camera
Font Awesome works great with the full range of Bootstrap components.
<button type="button" class="btn btn-danger">
<i class="fa fa-trash-o fa-lg"></i> Delete</button>
<button type="button" class="btn btn-default btn-sm">
<i class="fa fa-cog"></i> Settings</button>
<button type="button" class="btn btn-lg btn-success">
<i class="fa fa-flag fa-2x pull-left"></i> Font Awesome<br>Version 4.2.0</button>
<div class="btn-group">
<button type="button" class="btn btn-default"><i class="fa fa-align-left"></i></button>
<button type="button" class="btn btn-default"><i class="fa fa-align-center"></i></button>
<button type="button" class="btn btn-default"><i class="fa fa-align-right"></i></button>
<button type="button" class="btn btn-default"><i class="fa fa-align-justify"></i></button>
</div>
<div class="input-group mb-10">
<span class="input-group-addon"><i class="fa fa-envelope-o fa-fw"></i></span>
<input class="form-control" type="text" placeholder="Email address">
</div>
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-key fa-fw"></i></span>
<input class="form-control" type="password" placeholder="Password">
</div>
<div class="btn-group open">
<a class="btn btn-primary" href="#"><i class="fa fa-user fa-fw"></i> User</a>
<a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" href="#">
<span class="fa fa-caret-down"></span></a>
<ul class="dropdown-menu">
<li><a href="#"><i class="fa fa-pencil fa-fw"></i> Edit</a></li>
<li><a href="#"><i class="fa fa-trash-o fa-fw"></i> Delete</a></li>
<li><a href="#"><i class="fa fa-ban fa-fw"></i> Ban</a></li>
<li class="divider"></li>
<li><a href="#"><i class="i"></i> Make admin</a></li>
</ul>
</div>
Anything you can do with CSS font styles, you can do with Font Awesome.
Star Ratings (inspired by CSS Tricks)
500px
amazon
balance-scale
battery-0 (alias)
battery-1 (alias)
battery-2 (alias)
battery-3 (alias)
battery-4 (alias)
battery-empty
battery-full
battery-half
battery-quarter
battery-three-quarters
black-tie
calendar-check-o
calendar-minus-o
calendar-plus-o
calendar-times-o
cc-diners-club
cc-jcb
chrome
clone
commenting
commenting-o
contao
creative-commons
expeditedssl
firefox
fonticons
genderless
get-pocket
gg
gg-circle
hand-grab-o (alias)
hand-lizard-o
hand-paper-o
hand-peace-o
hand-pointer-o
hand-rock-o
hand-scissors-o
hand-spock-o
hand-stop-o (alias)
hourglass
hourglass-1 (alias)
hourglass-2 (alias)
hourglass-3 (alias)
hourglass-end
hourglass-half
hourglass-o
hourglass-start
houzz
i-cursor
industry
internet-explorer
map
map-o
map-pin
map-signs
mouse-pointer
object-group
object-ungroup
odnoklassniki
odnoklassniki-square
opencart
opera
optin-monster
registered
safari
sticky-note
sticky-note-o
television
trademark
tripadvisor
tv (alias)
vimeo
wikipedia-w
y-combinator
yc (alias)
adjust
anchor
archive
area-chart
arrows
arrows-h
arrows-v
asterisk
at
automobile (alias)
balance-scale
ban
bank (alias)
bar-chart
bar-chart-o (alias)
barcode
bars
battery-0 (alias)
battery-1 (alias)
battery-2 (alias)
battery-3 (alias)
battery-4 (alias)
battery-empty
battery-full
battery-half
battery-quarter
battery-three-quarters
bed
beer
bell
bell-o
bell-slash
bell-slash-o
bicycle
binoculars
birthday-cake
bolt
bomb
book
bookmark
bookmark-o
briefcase
bug
building
building-o
bullhorn
bullseye
bus
cab (alias)
calculator
calendar
calendar-check-o
calendar-minus-o
calendar-o
calendar-plus-o
calendar-times-o
camera
camera-retro
car
caret-square-o-down
caret-square-o-left
caret-square-o-right
caret-square-o-up
cart-arrow-down
cart-plus
cc
certificate
check
check-circle
check-circle-o
check-square
check-square-o
child
circle
circle-o
circle-o-notch
circle-thin
clock-o
clone
close (alias)
cloud
cloud-download
cloud-upload
code
code-fork
coffee
cog
cogs
comment
comment-o
commenting
commenting-o
comments
comments-o
compass
copyright
creative-commons
credit-card
crop
crosshairs
cube
cubes
cutlery
dashboard (alias)
database
desktop
diamond
dot-circle-o
download
edit (alias)
ellipsis-h
ellipsis-v
envelope
envelope-o
envelope-square
eraser
exchange
exclamation
exclamation-circle
exclamation-triangle
external-link
external-link-square
eye
eye-slash
eyedropper
fax
feed (alias)
female
fighter-jet
file-archive-o
file-audio-o
file-code-o
file-excel-o
file-image-o
file-movie-o (alias)
file-pdf-o
file-photo-o (alias)
file-picture-o (alias)
file-powerpoint-o
file-sound-o (alias)
file-video-o
file-word-o
file-zip-o (alias)
film
filter
fire
fire-extinguisher
flag
flag-checkered
flag-o
flash (alias)
flask
folder
folder-o
folder-open
folder-open-o
frown-o
futbol-o
gamepad
gavel
gear (alias)
gears (alias)
gift
glass
globe
graduation-cap
group (alias)
hand-grab-o (alias)
hand-lizard-o
hand-paper-o
hand-peace-o
hand-pointer-o
hand-rock-o
hand-scissors-o
hand-spock-o
hand-stop-o (alias)
hdd-o
headphones
heart
heart-o
heartbeat
history
home
hotel (alias)
hourglass
hourglass-1 (alias)
hourglass-2 (alias)
hourglass-3 (alias)
hourglass-end
hourglass-half
hourglass-o
hourglass-start
i-cursor
image (alias)
inbox
industry
info
info-circle
institution (alias)
key
keyboard-o
language
laptop
leaf
legal (alias)
lemon-o
level-down
level-up
life-bouy (alias)
life-buoy (alias)
life-ring
life-saver (alias)
lightbulb-o
line-chart
location-arrow
lock
magic
magnet
mail-forward (alias)
mail-reply (alias)
mail-reply-all (alias)
male
map
map-marker
map-o
map-pin
map-signs
meh-o
microphone
microphone-slash
minus
minus-circle
minus-square
minus-square-o
mobile
mobile-phone (alias)
money
moon-o
mortar-board (alias)
motorcycle
mouse-pointer
music
navicon (alias)
newspaper-o
object-group
object-ungroup
paint-brush
paper-plane
paper-plane-o
paw
pencil
pencil-square
pencil-square-o
phone
phone-square
photo (alias)
picture-o
pie-chart
plane
plug
plus
plus-circle
plus-square
plus-square-o
power-off
print
puzzle-piece
qrcode
question
question-circle
quote-left
quote-right
random
recycle
refresh
registered
remove (alias)
reorder (alias)
reply
reply-all
retweet
road
rocket
rss
rss-square
search
search-minus
search-plus
send (alias)
send-o (alias)
server
share
share-alt
share-alt-square
share-square
share-square-o
shield
ship
shopping-cart
sign-in
sign-out
signal
sitemap
sliders
smile-o
soccer-ball-o (alias)
sort
sort-alpha-asc
sort-alpha-desc
sort-amount-asc
sort-amount-desc
sort-asc
sort-desc
sort-down (alias)
sort-numeric-asc
sort-numeric-desc
sort-up (alias)
space-shuttle
spinner
spoon
square
square-o
star
star-half
star-half-empty (alias)
star-half-full (alias)
star-half-o
star-o
sticky-note
sticky-note-o
street-view
suitcase
sun-o
support (alias)
tablet
tachometer
tag
tags
tasks
taxi
television
terminal
thumb-tack
thumbs-down
thumbs-o-down
thumbs-o-up
thumbs-up
ticket
times
times-circle
times-circle-o
tint
toggle-down (alias)
toggle-left (alias)
toggle-off
toggle-on
toggle-right (alias)
toggle-up (alias)
trademark
trash
trash-o
tree
trophy
truck
tty
tv (alias)
umbrella
university
unlock
unlock-alt
unsorted (alias)
upload
user
user-plus
user-secret
user-times
users
video-camera
volume-down
volume-off
volume-up
warning (alias)
wheelchair
wifi
wrench
hand-grab-o (alias)
hand-lizard-o
hand-o-down
hand-o-left
hand-o-right
hand-o-up
hand-paper-o
hand-peace-o
hand-pointer-o
hand-rock-o
hand-scissors-o
hand-spock-o
hand-stop-o (alias)
thumbs-down
thumbs-o-down
thumbs-o-up
thumbs-up
ambulance
automobile (alias)
bicycle
bus
cab (alias)
car
fighter-jet
motorcycle
plane
rocket
ship
space-shuttle
subway
taxi
train
truck
wheelchair
genderless
intersex (alias)
mars
mars-double
mars-stroke
mars-stroke-h
mars-stroke-v
mercury
neuter
transgender
transgender-alt
venus
venus-double
venus-mars
file
file-archive-o
file-audio-o
file-code-o
file-excel-o
file-image-o
file-movie-o (alias)
file-o
file-pdf-o
file-photo-o (alias)
file-picture-o (alias)
file-powerpoint-o
file-sound-o (alias)
file-text
file-text-o
file-video-o
file-word-o
file-zip-o (alias)
- These icons work great with the
fa-spin class. Check out the spinning icons example.
circle-o-notch
cog
gear (alias)
refresh
spinner
cc-amex
cc-diners-club
cc-discover
cc-jcb
cc-mastercard
cc-paypal
cc-stripe
cc-visa
credit-card
google-wallet
paypal
area-chart
bar-chart
bar-chart-o (alias)
line-chart
pie-chart
bitcoin (alias)
btc
cny (alias)
dollar (alias)
eur
euro (alias)
gbp
gg
gg-circle
ils
inr
jpy
krw
money
rmb (alias)
rouble (alias)
rub
ruble (alias)
rupee (alias)
shekel (alias)
sheqel (alias)
try
turkish-lira (alias)
usd
won (alias)
yen (alias)
align-center
align-justify
align-left
align-right
bold
chain (alias)
chain-broken
clipboard
columns
copy (alias)
cut (alias)
dedent (alias)
eraser
file
file-o
file-text
file-text-o
files-o
floppy-o
font
header
indent
italic
link
list
list-alt
list-ol
list-ul
outdent
paperclip
paragraph
paste (alias)
repeat
rotate-left (alias)
rotate-right (alias)
save (alias)
scissors
strikethrough
subscript
superscript
table
text-height
text-width
th
th-large
th-list
underline
undo
unlink (alias)
angle-double-down
angle-double-left
angle-double-right
angle-double-up
angle-down
angle-left
angle-right
angle-up
arrow-circle-down
arrow-circle-left
arrow-circle-o-down
arrow-circle-o-left
arrow-circle-o-right
arrow-circle-o-up
arrow-circle-right
arrow-circle-up
arrow-down
arrow-left
arrow-right
arrow-up
arrows
arrows-alt
arrows-h
arrows-v
caret-down
caret-left
caret-right
caret-square-o-down
caret-square-o-left
caret-square-o-right
caret-square-o-up
caret-up
chevron-circle-down
chevron-circle-left
chevron-circle-right
chevron-circle-up
chevron-down
chevron-left
chevron-right
chevron-up
exchange
hand-o-down
hand-o-left
hand-o-right
hand-o-up
long-arrow-down
long-arrow-left
long-arrow-right
long-arrow-up
toggle-down (alias)
toggle-left (alias)
toggle-right (alias)
toggle-up (alias)
arrows-alt
backward
compress
eject
expand
fast-backward
fast-forward
forward
pause
play
play-circle
play-circle-o
random
step-backward
step-forward
stop
youtube-play
Warning!
Apparently, Adblock Plus can remove Font Awesome brand icons with their "Remove Social
Media Buttons" setting. We will not use hacks to force them to display. Please report an issue with Adblock Plus if you believe this to be
an error. To work around this, you'll need to modify the social icon class names.
500px
adn
amazon
android
angellist
apple
behance
behance-square
bitbucket
bitbucket-square
bitcoin (alias)
black-tie
btc
buysellads
cc-amex
cc-diners-club
cc-discover
cc-jcb
cc-mastercard
cc-paypal
cc-stripe
cc-visa
chrome
codepen
connectdevelop
contao
css3
dashcube
delicious
deviantart
digg
dribbble
dropbox
drupal
empire
expeditedssl
facebook
facebook-f (alias)
facebook-official
facebook-square
firefox
flickr
fonticons
forumbee
foursquare
ge (alias)
get-pocket
gg
gg-circle
git
git-square
github
github-alt
github-square
gittip (alias)
google
google-plus
google-plus-square
google-wallet
gratipay
hacker-news
houzz
html5
instagram
internet-explorer
ioxhost
joomla
jsfiddle
lastfm
lastfm-square
leanpub
linkedin
linkedin-square
linux
maxcdn
meanpath
medium
odnoklassniki
odnoklassniki-square
opencart
openid
opera
optin-monster
pagelines
paypal
pied-piper
pied-piper-alt
pinterest
pinterest-p
pinterest-square
qq
ra (alias)
rebel
reddit
reddit-square
renren
safari
sellsy
share-alt
share-alt-square
shirtsinbulk
simplybuilt
skyatlas
skype
slack
slideshare
soundcloud
spotify
stack-exchange
stack-overflow
steam
steam-square
stumbleupon
stumbleupon-circle
tencent-weibo
trello
tripadvisor
tumblr
tumblr-square
twitch
twitter
twitter-square
viacoin
vimeo
vimeo-square
vine
vk
wechat (alias)
weibo
weixin
whatsapp
wikipedia-w
windows
wordpress
xing
xing-square
y-combinator
y-combinator-square (alias)
yahoo
yc (alias)
yc-square (alias)
yelp
youtube
youtube-play
youtube-square
- All brand icons are trademarks of their respective owners.
- The use of these trademarks does not indicate endorsement of the trademark holder by Font Awesome, nor vice versa.
ambulance
h-square
heart
heart-o
heartbeat
hospital-o
medkit
plus-square
stethoscope
user-md
wheelchair