icons

Available icons from Font Awesome

After you get up and running, you can place Font Awesome icons just about anywhere with the <i> or <i> tag. Some examples appreciatively re-used from the Bootstrap documentation.

fa fa-glass
fa fa-music
fa fa-search
fa fa-envelope-o
fa fa-heart
fa fa-star
fa fa-star-o
fa fa-user
fa fa-film
fa fa-th-large
fa fa-th
fa fa-th-list
fa fa-check
fa fa-times
fa fa-search-plus
fa fa-search-minus
fa fa-power-off
fa fa-signal
fa fa-cog
fa fa-trash-o
fa fa-home
fa fa-file-o
fa fa-clock-o
fa fa-road
fa fa-download
fa fa-arrow-circle-o-down
fa fa-arrow-circle-o-up
fa fa-inbox
fa fa-play-circle-o
fa fa-repeat
fa fa-refresh
fa fa-list-alt
fa fa-lock
fa fa-flag
fa fa-headphones
fa fa-volume-off
fa fa-volume-down
fa fa-volume-up
fa fa-qrcode
fa fa-barcode
fa fa-tag
fa fa-tags
fa fa-book
fa fa-bookmark
fa fa-print
fa fa-camera
fa fa-font
fa fa-bold
fa fa-italic
fa fa-text-height
fa fa-text-width
fa fa-align-left
fa fa-align-center
fa fa-align-right
fa fa-align-justify
fa fa-list
fa fa-outdent
fa fa-indent
fa fa-video-camera
fa fa-picture-o
fa fa-pencil
fa fa-map-marker
fa fa-adjust
fa fa-tint
fa fa-pencil-square-o
fa fa-share-square-o
fa fa-check-square-o
fa fa-arrows
fa fa-step-backward
fa fa-fast-backward
fa fa-backward
fa fa-play
fa fa-pause
fa fa-stop
fa fa-forward
fa fa-fast-forward
fa fa-step-forward
fa fa-eject
fa fa-chevron-left
fa fa-chevron-right
fa fa-plus-circle
fa fa-minus-circle
fa fa-times-circle
fa fa-check-circle
fa fa-question-circle
fa fa-info-circle
fa fa-crosshairs
fa fa-times-circle-o
fa fa-check-circle-o
fa fa-ban
fa fa-arrow-left
fa fa-arrow-right
fa fa-arrow-up
fa fa-arrow-down
fa fa-share
fa fa-expand
fa fa-compress
fa fa-plus
fa fa-minus
fa fa-asterisk
fa fa-exclamation-circle
fa fa-gift
fa fa-leaf
fa fa-fire
fa fa-eye
fa fa-eye-slash
fa fa-exclamation-triangle
fa fa-plane
fa fa-calendar
fa fa-random
fa fa-comment
fa fa-magnet
fa fa-chevron-up
fa fa-chevron-down
fa fa-retweet
fa fa-shopping-cart
fa fa-folder
fa fa-folder-open
fa fa-arrows-v
fa fa-arrows-h
fa fa-bar-chart
fa fa-twitter-square
fa fa-facebook-square
fa fa-camera-retro
fa fa-key
fa fa-cogs
fa fa-comments
fa fa-thumbs-o-up
fa fa-thumbs-o-down
fa fa-star-half
fa fa-heart-o
fa fa-sign-out
fa fa-linkedin-square
fa fa-thumb-tack
fa fa-external-link
fa fa-sign-in
fa fa-trophy
fa fa-github-square
fa fa-upload
fa fa-lemon-o
fa fa-phone
fa fa-square-o
fa fa-bookmark-o
fa fa-phone-square
fa fa-twitter
fa fa-facebook
fa fa-github
fa fa-unlock
fa fa-credit-card
fa fa-rss
fa fa-hdd-o
fa fa-bullhorn
fa fa-bell
fa fa-certificate
fa fa-hand-o-right
fa fa-hand-o-left
fa fa-hand-o-up
fa fa-hand-o-down
fa fa-arrow-circle-left
fa fa-arrow-circle-right
fa fa-arrow-circle-up
fa fa-arrow-circle-down
fa fa-globe
fa fa-wrench
fa fa-tasks
fa fa-filter
fa fa-briefcase
fa fa-arrows-alt
fa fa-users
fa fa-link
fa fa-cloud
fa fa-flask
fa fa-scissors
fa fa-files-o
fa fa-paperclip
fa fa-floppy-o
fa fa-square
fa fa-bars
fa fa-list-ul
fa fa-list-ol
fa fa-strikethrough
fa fa-underline
fa fa-table
fa fa-magic
fa fa-truck
fa fa-pinterest
fa fa-pinterest-square
fa fa-google-plus-square
fa fa-google-plus
fa fa-money
fa fa-caret-down
fa fa-caret-up
fa fa-caret-left
fa fa-caret-right
fa fa-columns
fa fa-sort
fa fa-sort-desc
fa fa-sort-asc
fa fa-envelope
fa fa-linkedin
fa fa-undo
fa fa-gavel
fa fa-tachometer
fa fa-comment-o
fa fa-comments-o
fa fa-bolt
fa fa-sitemap
fa fa-umbrella
fa fa-clipboard
fa fa-lightbulb-o
fa fa-exchange
fa fa-cloud-download
fa fa-cloud-upload
fa fa-user-md
fa fa-stethoscope
fa fa-suitcase
fa fa-bell-o
fa fa-coffee
fa fa-cutlery
fa fa-file-text-o
fa fa-building-o
fa fa-hospital-o
fa fa-ambulance
fa fa-medkit
fa fa-fighter-jet
fa fa-beer
fa fa-h-square
fa fa-plus-square
fa fa-angle-double-left
fa fa-angle-double-right
fa fa-angle-double-up
fa fa-angle-double-down
fa fa-angle-left
fa fa-angle-right
fa fa-angle-up
fa fa-angle-down
fa fa-desktop
fa fa-laptop
fa fa-tablet
fa fa-mobile
fa fa-circle-o
fa fa-quote-left
fa fa-quote-right
fa fa-spinner
fa fa-circle
fa fa-reply
fa fa-github-alt
fa fa-folder-o
fa fa-folder-open-o
fa fa-smile-o
fa fa-frown-o
fa fa-meh-o
fa fa-gamepad
fa fa-keyboard-o
fa fa-flag-o
fa fa-flag-checkered
fa fa-terminal
fa fa-code
fa fa-reply-all
fa fa-star-half-o
fa fa-location-arrow
fa fa-crop
fa fa-code-fork
fa fa-chain-broken
fa fa-question
fa fa-info
fa fa-exclamation
fa fa-superscript
fa fa-subscript
fa fa-eraser
fa fa-puzzle-piece
fa fa-microphone
fa fa-microphone-slash
fa fa-shield
fa fa-calendar-o
fa fa-fire-extinguisher
fa fa-rocket
fa fa-maxcdn
fa fa-chevron-circle-left
fa fa-chevron-circle-right
fa fa-chevron-circle-up
fa fa-chevron-circle-down
fa fa-html5
fa fa-css3
fa fa-anchor
fa fa-unlock-alt
fa fa-bullseye
fa fa-ellipsis-h
fa fa-ellipsis-v
fa fa-rss-square
fa fa-play-circle
fa fa-ticket
fa fa-minus-square
fa fa-minus-square-o
fa fa-level-up
fa fa-level-down
fa fa-check-square
fa fa-pencil-square
fa fa-external-link-square
fa fa-share-square
fa fa-compass
fa fa-caret-square-o-down
fa fa-caret-square-o-up
fa fa-caret-square-o-right
fa fa-eur
fa fa-gbp
fa fa-usd
fa fa-inr
fa fa-jpy
fa fa-rub
fa fa-krw
fa fa-btc
fa fa-file
fa fa-file-text
fa fa-sort-alpha-asc
fa fa-sort-alpha-desc
fa fa-sort-amount-asc
fa fa-sort-amount-desc
fa fa-sort-numeric-asc
fa fa-sort-numeric-desc
fa fa-thumbs-up
fa fa-thumbs-down
fa fa-youtube-square
fa fa-youtube
fa fa-xing
fa fa-xing-square
fa fa-youtube-play
fa fa-dropbox
fa fa-stack-overflow
fa fa-instagram
fa fa-flickr
fa fa-adn
fa fa-bitbucket
fa fa-bitbucket-square
fa fa-tumblr
fa fa-tumblr-square
fa fa-long-arrow-down
fa fa-long-arrow-up
fa fa-long-arrow-left
fa fa-long-arrow-right
fa fa-apple
fa fa-windows
fa fa-android
fa fa-linux
fa fa-dribbble
fa fa-skype
fa fa-foursquare
fa fa-trello
fa fa-female
fa fa-male
fa fa-gratipay
fa fa-sun-o
fa fa-moon-o
fa fa-archive
fa fa-bug
fa fa-vk
fa fa-weibo
fa fa-renren
fa fa-pagelines
fa fa-stack-exchange
fa fa-arrow-circle-o-right
fa fa-arrow-circle-o-left
fa fa-caret-square-o-left
fa fa-dot-circle-o
fa fa-wheelchair
fa fa-vimeo-square
fa fa-try
fa fa-plus-square-o
fa fa-space-shuttle
fa fa-slack
fa fa-envelope-square
fa fa-wordpress
fa fa-openid
fa fa-university
fa fa-graduation-cap
fa fa-yahoo
fa fa-google
fa fa-reddit
fa fa-reddit-square
fa fa-stumbleupon-circle
fa fa-stumbleupon
fa fa-delicious
fa fa-digg
fa fa-pied-piper
fa fa-pied-piper-alt
fa fa-drupal
fa fa-joomla
fa fa-language
fa fa-fax
fa fa-building
fa fa-child
fa fa-paw
fa fa-spoon
fa fa-cube
fa fa-cubes
fa fa-behance
fa fa-behance-square
fa fa-steam
fa fa-steam-square
fa fa-recycle
fa fa-car
fa fa-taxi
fa fa-tree
fa fa-spotify
fa fa-deviantart
fa fa-soundcloud
fa fa-database
fa fa-file-pdf-o
fa fa-file-word-o
fa fa-file-excel-o
fa fa-file-powerpoint-o
fa fa-file-image-o
fa fa-file-archive-o
fa fa-file-audio-o
fa fa-file-video-o
fa fa-file-code-o
fa fa-vine
fa fa-codepen
fa fa-jsfiddle
fa fa-life-ring
fa fa-circle-o-notch
fa fa-rebel
fa fa-empire
fa fa-git-square
fa fa-git
fa fa-hacker-news
fa fa-tencent-weibo
fa fa-qq
fa fa-weixin
fa fa-paper-plane
fa fa-paper-plane-o
fa fa-history
fa fa-circle-thin
fa fa-header
fa fa-paragraph
fa fa-sliders
fa fa-share-alt
fa fa-share-alt-square
fa fa-bomb
fa fa-futbol-o
fa fa-tty
fa fa-binoculars
fa fa-plug
fa fa-slideshare
fa fa-twitch
fa fa-yelp
fa fa-newspaper-o
fa fa-wifi
fa fa-calculator
fa fa-paypal
fa fa-google-wallet
fa fa-cc-visa
fa fa-cc-mastercard
fa fa-cc-discover
fa fa-cc-amex
fa fa-cc-paypal
fa fa-cc-stripe
fa fa-bell-slash
fa fa-bell-slash-o
fa fa-trash
fa fa-copyright
fa fa-at
fa fa-eyedropper
fa fa-paint-brush
fa fa-birthday-cake
fa fa-area-chart
fa fa-pie-chart
fa fa-line-chart
fa fa-lastfm
fa fa-lastfm-square
fa fa-toggle-off
fa fa-toggle-on
fa fa-bicycle
fa fa-bus
fa fa-ioxhost
fa fa-angellist
fa fa-cc
fa fa-ils
fa fa-meanpath
fa fa-buysellads
fa fa-connectdevelop
fa fa-dashcube
fa fa-forumbee
fa fa-leanpub
fa fa-sellsy
fa fa-shirtsinbulk
fa fa-simplybuilt
fa fa-skyatlas
fa fa-cart-plus
fa fa-cart-arrow-down
fa fa-diamond
fa fa-ship
fa fa-user-secret
fa fa-motorcycle
fa fa-street-view
fa fa-heartbeat
fa fa-venus
fa fa-mars
fa fa-mercury
fa fa-transgender
fa fa-transgender-alt
fa fa-venus-double
fa fa-mars-double
fa fa-venus-mars
fa fa-mars-stroke
fa fa-mars-stroke-v
fa fa-mars-stroke-h
fa fa-neuter
fa fa-genderless
fa fa-facebook-official
fa fa-pinterest-p
fa fa-whatsapp
fa fa-server
fa fa-user-plus
fa fa-user-times
fa fa-bed
fa fa-viacoin
fa fa-train
fa fa-subway
fa fa-medium
fa fa-y-combinator
fa fa-optin-monster
fa fa-opencart
fa fa-expeditedssl
fa fa-battery-full
fa fa-battery-three-quarters
fa fa-battery-half
fa fa-battery-quarter
fa fa-battery-empty
fa fa-mouse-pointer
fa fa-i-cursor
fa fa-object-group
fa fa-object-ungroup
fa fa-sticky-note
fa fa-sticky-note-o
fa fa-cc-jcb
fa fa-cc-diners-club
fa fa-clone
fa fa-balance-scale
fa fa-hourglass-o
fa fa-hourglass-start
fa fa-hourglass-half
fa fa-hourglass-end
fa fa-hourglass
fa fa-hand-rock-o
fa fa-hand-paper-o
fa fa-hand-scissors-o
fa fa-hand-lizard-o
fa fa-hand-spock-o
fa fa-hand-pointer-o
fa fa-hand-peace-o
fa fa-trademark
fa fa-registered
fa fa-creative-commons
fa fa-gg
fa fa-gg-circle
fa fa-tripadvisor
fa fa-odnoklassniki
fa fa-odnoklassniki-square
fa fa-get-pocket
fa fa-wikipedia-w
fa fa-safari
fa fa-chrome
fa fa-firefox
fa fa-opera
fa fa-internet-explorer
fa fa-television
fa fa-contao
fa fa-500px
fa fa-amazon
fa fa-calendar-plus-o
fa fa-calendar-minus-o
fa fa-calendar-times-o
fa fa-calendar-check-o
fa fa-industry
fa fa-map-pin
fa fa-map-signs
fa fa-map-o
fa fa-map
fa fa-commenting
fa fa-commenting-o
fa fa-houzz
fa fa-vimeo
fa fa-black-tie
fa fa-fonticons
fa fa-reddit-alien
fa fa-edge
fa fa-credit-card-alt
fa fa-codiepie
fa fa-modx
fa fa-fort-awesome
fa fa-usb
fa fa-product-hunt
fa fa-mixcloud
fa fa-scribd
fa fa-pause-circle
fa fa-pause-circle-o
fa fa-stop-circle
fa fa-stop-circle-o
fa fa-shopping-bag
fa fa-shopping-basket
fa fa-hashtag
fa fa-bluetooth
fa fa-bluetooth-b
fa fa-percent

fa-camera-retro

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>&nbsp; Home</a>
  <a class="list-group-item" href="#"><i class="fa fa-book fa-fw"></i>&nbsp; Library</a>
  <a class="list-group-item" href="#"><i class="fa fa-pencil fa-fw"></i>&nbsp; Applications</a>
  <a class="list-group-item" href="#"><i class="fa fa-cog fa-fw"></i>&nbsp; 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 fa-pull-right or fa-pull-left for easy pull quotes or article icons.


<i class="fa fa-quote-left fa-3x fa-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> fa-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

Delete Settings

Font Awesome

User

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</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>

icons

Code Guide

Icons

Available icons from Font Awesome

Basic Icons

Larger Icons

Fixed Width Icons

List Icons

Bordered & Pulled Icons

Animated Icons

Rotated & Flipped

Stacked Icons

Bootstrap 3 Examples