fa-adjust
fa-adn
fa-align-center
fa-align-justify
fa-align-left
fa-align-right
fa-ambulance
fa-anchor
fa-android
fa-angellist
fa-angle-double-down
fa-angle-double-left
fa-angle-double-right
fa-angle-double-up
fa-angle-down
fa-angle-left
fa-angle-right
fa-angle-up
fa-apple
fa-archive
fa-area-chart
fa-arrow-circle-down
fa-arrow-circle-left
fa-arrow-circle-o-down
fa-arrow-circle-o-left
fa-arrow-circle-o-right
fa-arrow-circle-o-up
fa-arrow-circle-right
fa-arrow-circle-up
fa-arrow-down
fa-arrow-left
fa-arrow-right
fa-arrow-up
fa-arrows
fa-arrows-alt
fa-arrows-h
fa-arrows-v
fa-asterisk
fa-at
fa-automobile
(alias)
fa-backward
fa-ban
fa-bank
(alias)
fa-bar-chart
fa-bar-chart-o
(alias)
fa-barcode
fa-bars
fa-bed
fa-beer
fa-behance
fa-behance-square
fa-bell
fa-bell-o
fa-bell-slash
fa-bell-slash-o
fa-bicycle
fa-binoculars
fa-birthday-cake
fa-bitbucket
fa-bitbucket-square
fa-bitcoin
(alias)
fa-bold
fa-bolt
fa-bomb
fa-book
fa-bookmark
fa-bookmark-o
fa-briefcase
fa-btc
fa-bug
fa-building
fa-building-o
fa-bullhorn
fa-bullseye
fa-bus
fa-buysellads
fa-cab
(alias)
fa-calculator
fa-calendar
fa-calendar-o
fa-camera
fa-camera-retro
fa-car
fa-caret-down
fa-caret-left
fa-caret-right
fa-caret-square-o-down
fa-caret-square-o-left
fa-caret-square-o-right
fa-caret-square-o-up
fa-caret-up
fa-cart-arrow-down
fa-cart-plus
fa-cc
fa-cc-amex
fa-cc-discover
fa-cc-mastercard
fa-cc-paypal
fa-cc-stripe
fa-cc-visa
fa-certificate
fa-chain
(alias)
fa-chain-broken
fa-check
fa-check-circle
fa-check-circle-o
fa-check-square
fa-check-square-o
fa-chevron-circle-down
fa-chevron-circle-left
fa-chevron-circle-right
fa-chevron-circle-up
fa-chevron-down
fa-chevron-left
fa-chevron-right
fa-chevron-up
fa-child
fa-circle
fa-circle-o
fa-circle-o-notch
fa-circle-thin
fa-clipboard
fa-clock-o
fa-close
(alias)
fa-cloud
fa-cloud-download
fa-cloud-upload
fa-cny
(alias)
fa-code
fa-code-fork
fa-codepen
fa-coffee
fa-cog
fa-cogs
fa-columns
fa-comment
fa-comment-o
fa-comments
fa-comments-o
fa-compass
fa-compress
fa-connectdevelop
fa-copy
(alias)
fa-copyright
fa-credit-card
fa-crop
fa-crosshairs
fa-css3
fa-cube
fa-cubes
fa-cut
(alias)
fa-cutlery
fa-dashboard
(alias)
fa-dashcube
fa-database
fa-dedent
(alias)
fa-delicious
fa-desktop
fa-deviantart
fa-diamond
fa-digg
fa-dollar
(alias)
fa-dot-circle-o
fa-download
fa-dribbble
fa-dropbox
fa-drupal
fa-edit
(alias)
fa-eject
fa-ellipsis-h
fa-ellipsis-v
fa-empire
fa-envelope
fa-envelope-o
fa-envelope-square
fa-eraser
fa-eur
fa-euro
(alias)
fa-exchange
fa-exclamation
fa-exclamation-circle
fa-exclamation-triangle
fa-expand
fa-external-link
fa-external-link-square
fa-eye
fa-eye-slash
fa-eyedropper
fa-facebook
fa-facebook-f
(alias)
fa-facebook-official
fa-facebook-square
fa-fast-backward
fa-fast-forward
fa-fax
fa-female
fa-fighter-jet
fa-file
fa-file-archive-o
fa-file-audio-o
fa-file-code-o
fa-file-excel-o
fa-file-image-o
fa-file-movie-o
(alias)
fa-file-o
fa-file-pdf-o
fa-file-photo-o
(alias)
fa-file-picture-o
(alias)
fa-file-powerpoint-o
fa-file-sound-o
(alias)
fa-file-text
fa-file-text-o
fa-file-video-o
fa-file-word-o
fa-file-zip-o
(alias)
fa-files-o
fa-film
fa-filter
fa-fire
fa-fire-extinguisher
fa-flag
fa-flag-checkered
fa-flag-o
fa-flash
(alias)
fa-flask
fa-flickr
fa-floppy-o
fa-folder
fa-folder-o
fa-folder-open
fa-folder-open-o
fa-font
fa-forumbee
fa-forward
fa-foursquare
fa-frown-o
fa-futbol-o
fa-gamepad
fa-gavel
fa-gbp
fa-ge
(alias)
fa-gear
(alias)
fa-gears
(alias)
fa-genderless
(alias)
fa-gift
fa-git
fa-git-square
fa-github
fa-github-alt
fa-github-square
fa-gittip
(alias)
fa-glass
fa-globe
fa-google
fa-google-plus
fa-google-plus-square
fa-google-wallet
fa-graduation-cap
fa-gratipay
fa-group
(alias)
fa-h-square
fa-hacker-news
fa-hand-o-down
fa-hand-o-left
fa-hand-o-right
fa-hand-o-up
fa-hdd-o
fa-header
fa-headphones
fa-heart
fa-heart-o
fa-heartbeat
fa-history
fa-home
fa-hospital-o
fa-hotel
(alias)
fa-html5
fa-ils
fa-image
(alias)
fa-inbox
fa-indent
fa-info
fa-info-circle
fa-inr
fa-instagram
fa-institution
(alias)
fa-ioxhost
fa-italic
fa-joomla
fa-jpy
fa-jsfiddle
fa-key
fa-keyboard-o
fa-krw
fa-language
fa-laptop
fa-lastfm
fa-lastfm-square
fa-leaf
fa-leanpub
fa-legal
(alias)
fa-lemon-o
fa-level-down
fa-level-up
fa-life-bouy
(alias)
fa-life-buoy
(alias)
fa-life-ring
fa-life-saver
(alias)
fa-lightbulb-o
fa-line-chart
fa-link
fa-linkedin
fa-linkedin-square
fa-linux
fa-list
fa-list-alt
fa-list-ol
fa-list-ul
fa-location-arrow
fa-lock
fa-long-arrow-down
fa-long-arrow-left
fa-long-arrow-right
fa-long-arrow-up
fa-magic
fa-magnet
fa-mail-forward
(alias)
fa-mail-reply
(alias)
fa-mail-reply-all
(alias)
fa-male
fa-map-marker
fa-mars
fa-mars-double
fa-mars-stroke
fa-mars-stroke-h
fa-mars-stroke-v
fa-maxcdn
fa-meanpath
fa-medium
fa-medkit
fa-meh-o
fa-mercury
fa-microphone
fa-microphone-slash
fa-minus
fa-minus-circle
fa-minus-square
fa-minus-square-o
fa-mobile
fa-mobile-phone
(alias)
fa-money
fa-moon-o
fa-mortar-board
(alias)
fa-motorcycle
fa-music
fa-navicon
(alias)
fa-neuter
fa-newspaper-o
fa-openid
fa-outdent
fa-pagelines
fa-paint-brush
fa-paper-plane
fa-paper-plane-o
fa-paperclip
fa-paragraph
fa-paste
(alias)
fa-pause
fa-paw
fa-paypal
fa-pencil
fa-pencil-square
fa-pencil-square-o
fa-phone
fa-phone-square
fa-photo
(alias)
fa-picture-o
fa-pie-chart
fa-pied-piper
fa-pied-piper-alt
fa-pinterest
fa-pinterest-p
fa-pinterest-square
fa-plane
fa-play
fa-play-circle
fa-play-circle-o
fa-plug
fa-plus
fa-plus-circle
fa-plus-square
fa-plus-square-o
fa-power-off
fa-print
fa-puzzle-piece
fa-qq
fa-qrcode
fa-question
fa-question-circle
fa-quote-left
fa-quote-right
fa-ra
(alias)
fa-random
fa-rebel
fa-recycle
fa-reddit
fa-reddit-square
fa-refresh
fa-remove
(alias)
fa-renren
fa-reorder
(alias)
fa-repeat
fa-reply
fa-reply-all
fa-retweet
fa-rmb
(alias)
fa-road
fa-rocket
fa-rotate-left
(alias)
fa-rotate-right
(alias)
fa-rouble
(alias)
fa-rss
fa-rss-square
fa-rub
fa-ruble
(alias)
fa-rupee
(alias)
fa-save
(alias)
fa-scissors
fa-search
fa-search-minus
fa-search-plus
fa-sellsy
fa-send
(alias)
fa-send-o
(alias)
fa-server
fa-share
fa-share-alt
fa-share-alt-square
fa-share-square
fa-share-square-o
fa-shekel
(alias)
fa-sheqel
(alias)
fa-shield
fa-ship
fa-shirtsinbulk
fa-shopping-cart
fa-sign-in
fa-sign-out
fa-signal
fa-simplybuilt
fa-sitemap
fa-skyatlas
fa-skype
fa-slack
fa-sliders
fa-slideshare
fa-smile-o
fa-soccer-ball-o
(alias)
fa-sort
fa-sort-alpha-asc
fa-sort-alpha-desc
fa-sort-amount-asc
fa-sort-amount-desc
fa-sort-asc
fa-sort-desc
fa-sort-down
(alias)
fa-sort-numeric-asc
fa-sort-numeric-desc
fa-sort-up
(alias)
fa-soundcloud
fa-space-shuttle
fa-spinner
fa-spoon
fa-spotify
fa-square
fa-square-o
fa-stack-exchange
fa-stack-overflow
fa-star
fa-star-half
fa-star-half-empty
(alias)
fa-star-half-full
(alias)
fa-star-half-o
fa-star-o
fa-steam
fa-steam-square
fa-step-backward
fa-step-forward
fa-stethoscope
fa-stop
fa-street-view
fa-strikethrough
fa-stumbleupon
fa-stumbleupon-circle
fa-subscript
fa-subway
fa-suitcase
fa-sun-o
fa-superscript
fa-support
(alias)
fa-table
fa-tablet
fa-tachometer
fa-tag
fa-tags
fa-tasks
fa-taxi
fa-tencent-weibo
fa-terminal
fa-text-height
fa-text-width
fa-th
fa-th-large
fa-th-list
fa-thumb-tack
fa-thumbs-down
fa-thumbs-o-down
fa-thumbs-o-up
fa-thumbs-up
fa-ticket
fa-times
fa-times-circle
fa-times-circle-o
fa-tint
fa-toggle-down
(alias)
fa-toggle-left
(alias)
fa-toggle-off
fa-toggle-on
fa-toggle-right
(alias)
fa-toggle-up
(alias)
fa-train
fa-transgender
fa-transgender-alt
fa-trash
fa-trash-o
fa-tree
fa-trello
fa-trophy
fa-truck
fa-try
fa-tty
fa-tumblr
fa-tumblr-square
fa-turkish-lira
(alias)
fa-twitch
fa-twitter
fa-twitter-square
fa-umbrella
fa-underline
fa-undo
fa-university
fa-unlink
(alias)
fa-unlock
fa-unlock-alt
fa-unsorted
(alias)
fa-upload
fa-usd
fa-user
fa-user-md
fa-user-plus
fa-user-secret
fa-user-times
fa-users
fa-venus
fa-venus-double
fa-venus-mars
fa-viacoin
fa-video-camera
fa-vimeo-square
fa-vine
fa-vk
fa-volume-down
fa-volume-off
fa-volume-up
fa-warning
(alias)
fa-wechat
(alias)
fa-weibo
fa-weixin
fa-whatsapp
fa-wheelchair
fa-wifi
fa-windows
fa-won
(alias)
fa-wordpress
fa-wrench
fa-xing
fa-xing-square
fa-yahoo
fa-yelp
fa-yen
(alias)
fa-youtube
fa-youtube-play
fa-youtube-square
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.
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, and use fa-pulse to have it rotate
with 8 steps. 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>
<i class="fa fa-spinner fa-pulse"></i>
Some browsers on some platforms have issues with animated icons resulting in a jittery wobbling effect. See
issue #671
for examples and possible workarounds.
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.
<a class="btn btn-danger" href="#">
<i class="fa fa-trash-o fa-lg"></i> Delete</a>
<a class="btn btn-default btn-sm" href="#">
<i class="fa fa-cog"></i> Settings</a>
<a class="btn btn-lg btn-success" href="#">
<i class="fa fa-flag fa-2x pull-left"></i> Font Awesome<br>Version 4.3.0</a>
<div class="btn-group">
<a class="btn btn-default" href="#"><i class="fa fa-align-left"></i></a>
<a class="btn btn-default" href="#"><i class="fa fa-align-center"></i></a>
<a class="btn btn-default" href="#"><i class="fa fa-align-right"></i></a>
<a class="btn btn-default" href="#"><i class="fa fa-align-justify"></i></a>
</div>
<div class="input-group margin-bottom-sm">
<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>