Font Awesome

The iconic font designed for use with Twitter Bootstrap

Download
Font Awesome View Project
on GitHub

One font, 200+ icons

In a single collection, Font Awesome is a pictographic language of web-related actions.

Free for commercial use

The Font Awesome webfont and CSS libraries are completely free for commercial use.

Screen reader compatible

Font Awesome won't trip up screen readers, unlike most icon fonts.

Infinite scalability

Scalable vector graphics means icons look awesome at any size.

CSS control

Easily style icon color, size, shadow, and anything that's possible with CSS.

Broad compatibility

Wide @font-face support means Font Awesome works in modern browsers .

Made for Twitter Bootstrap

Designed from scratch to be fully backwards compatible with Twitter Bootstrap 2.0.

Growing set of icons

Ever expanding to support a wider array of web-related actions.

Follow on Twitter

Follow @fortaweso_me on Twitter for icon updates and styling tricks.

New Icons

63 shiny new icons added to Font Awesome 2.0.3. Yep. That puts us well over 200.

Parity with Twitter Bootstrap 2.0.3

Twitter Bootstrap 2.0.3 added several new icons, which we have redesigned from scratch and added to Font Awesome 2.0.3

ficon-hdd
ficon-bullhorn
ficon-bell
ficon-certificate
ficon-thumbs-up

ficon-thumbs-down
ficon-hand-right
ficon-hand-left
ficon-hand-up
ficon-hand-down

ficon-circle-arrow-left
ficon-circle-arrow-right
ficon-circle-arrow-up
ficon-circle-arrow-down
ficon-globe

ficon-wrench
ficon-tasks
ficon-filter
ficon-briefcase
ficon-fullscreen

User Requested

You asked, Font Awesome delivered. Here's a giant new set of icons requested on the Font Awesome GitHub project.

ficon-magic
ficon-phone
ficon-check-empty
ficon-bookmark-empty
ficon-phone-sign
ficon-twitter
ficon-facebook
ficon-github
ficon-unlock
ficon-credit-card
ficon-rss
ficon-group

ficon-link
ficon-cloud
ficon-beaker
ficon-cut
ficon-copy
ficon-paper-clip
ficon-save
ficon-sign-blank
ficon-reorder
ficon-ul
ficon-ol

ficon-strikethrough
ficon-underline
ficon-table
ficon-columns
ficon-truck
ficon-pinterest
ficon-pinterest-sign
ficon-google-plus-sign
ficon-google-plus
ficon-money
ficon-user-md

ficon-caret-down
ficon-caret-up
ficon-caret-left
ficon-caret-right
ficon-sort
ficon-sort-down
ficon-sort-up
ficon-chart-pie-empty
ficon-chart-pie-one-third
ficon-chart-pie-two-thirds
ficon-chart-pie-full

Base Icons

Inspired by the Glyphicon set that comes with Twitter Bootstrap 2.0, Font Awesome is designed from scratch for a full array of web-related actions.

ficon-glass
ficon-music
ficon-search
ficon-envelope
ficon-heart
ficon-star
ficon-star-empty
ficon-user
ficon-film
ficon-th-large
ficon-th
ficon-th-list
ficon-ok
ficon-remove
ficon-zoom-in
ficon-zoom-out
ficon-off
ficon-signal
ficon-cog
ficon-trash
ficon-home
ficon-file
ficon-time
ficon-road
ficon-download-alt
ficon-download
ficon-upload
ficon-inbox
ficon-play-circle
ficon-repeat

ficon-refresh
ficon-list-alt
ficon-lock
ficon-flag
ficon-headphones
ficon-volume-off
ficon-volume-down
ficon-volume-up
ficon-qrcode
ficon-barcode
ficon-tag
ficon-tags
ficon-book
ficon-bookmark
ficon-print
ficon-camera
ficon-font
ficon-bold
ficon-italic
ficon-text-height
ficon-text-width
ficon-align-left
ficon-align-center
ficon-align-right
ficon-align-justify
ficon-list
ficon-indent-left
ficon-indent-right
ficon-facetime-video
ficon-picture

ficon-pencil
ficon-map-marker
ficon-adjust
ficon-tint
ficon-edit
ficon-share
ficon-check
ficon-move
ficon-step-backward
ficon-fast-backward
ficon-backward
ficon-play
ficon-pause
ficon-stop
ficon-forward
ficon-fast-forward
ficon-step-forward
ficon-eject
ficon-chevron-left
ficon-chevron-right
ficon-plus-sign
ficon-minus-sign
ficon-remove-sign
ficon-ok-sign
ficon-question-sign
ficon-info-sign
ficon-screenshot
ficon-remove-circle
ficon-ok-circle
ficon-ban-circle

ficon-arrow-left
ficon-arrow-right
ficon-arrow-up
ficon-arrow-down
ficon-share-alt
ficon-resize-full
ficon-resize-small
ficon-plus
ficon-minus
ficon-asterisk
ficon-exclamation-sign
ficon-gift
ficon-leaf
ficon-fire
ficon-eye-open
ficon-eye-close
ficon-warning-sign
ficon-plane
ficon-calendar
ficon-random
ficon-comment
ficon-magnet
ficon-chevron-up
ficon-chevron-down
ficon-retweet
ficon-shopping-cart
ficon-folder-close
ficon-folder-open
ficon-resize-vertical
ficon-resize-horizontal

Extended Icons

But wait, there's more! Font Awesome also includes this set of ever-expanding extra-awesome pictograms.

ficon-camera-retro
ficon-bar-chart
ficon-cogs
ficon-external-link
ficon-pushpin

ficon-facebook-sign
ficon-twitter-sign
ficon-linkedin-sign
ficon-github-sign
ficon-key

ficon-comments
ficon-trophy
ficon-upload-alt

ficon-signin
ficon-signout
ficon-star-half
ficon-heart-empty
ficon-lemon

Examples

Many examples re-used from the Twitter Bootstrap documentation.

Use Font Awesome icons in:

Bulleted lists (like this one)
Buttons
Button groups
Navigation
Prepended form inputs
And many more with Custom CSS

Refresh Checkout Delete

Comment Settings More Info

Integration

It's easy to integrate Font Awesome into Twitter Bootstrap, or even use it on its own.

Bootstrap using LESS

Use this method if integrating with Twitter Bootstrap using LESS

Copy the Font Awesome font directory into your project.
Copy font-awesome.less into your bootstrap/less directory.
Open bootstrap.less and replace @import "sprites.less"; with @import "font-awesome.less";

Open your project's font-awesome.less and edit the font url to ensure it points to the right place.

@font-face {
  font-family: 'FontAwesome';
  src: url('../font/fontawesome-webfont.eot');
  src: url('../font/fontawesome-webfont.eot?#iefix') format('embedded-opentype'),
     url('../font/fontawesome-webfont.woff') format('woff'),
     url('../font/fontawesome-webfont.ttf') format('truetype'),
     url('../font/fontawesome-webfont.svgz#FontAwesomeRegular') format('svg'),
     url('../font/fontawesome-webfont.svg#FontAwesomeRegular') format('svg');
  font-weight: normal;
  font-style: normal;
}

Re-compile your LESS if using a static compiler. Otherwise, you should be good to go.
Check out the examples to start using Font Awesome!

Bootstrap using CSS

Use this method if integrating with Twitter Bootstrap using CSS.

Copy the Font Awesome font directory into your project.
Copy font-awesome.css into your project.
Open your project's font-awesome.css and edit the font url to ensure it points to the right place (see above example).

In the <head> of your html, reference the location to your font-awesome.css.

<link rel="stylesheet" href="../css/bootstrap.css">
<link rel="stylesheet" href="../css/font-awesome.css">

Check out the examples to start using Font Awesome!

Not using Bootstrap?

Font Awesome works just as well without Twitter Bootstrap.

Copy the Font Awesome font directory into your project.
Copy font-awesome.less or font-awesome.css into your project.
Open your project's font-awesome.less or font-awesome.css and edit the font url to ensure it points to the right place (see above example).
Check out the examples to start using Font Awesome!

Code

Inline Icon

Place Font Awesome icons just about anywhere with the <i> tag.

ficon-camera-retro

<div style="font-size: 24px;">
  <i class="ficon-camera-retro"></i> ficon-camera-retro
</div>

Icon classes are echoed via CSS :before.

Increase the icon size by using the ficon-large class. This increases the size by 33% relative to the font-size of the container.

ficon-camera-retro

<div style="font-size: 24px;">
  <i class="ficon-camera-retro ficon-large"></i> ficon-camera-retro
</div>

Buttons

Refresh Checkout

Comment Delete

Settings More Info

Font Awesome icons work great in buttons.

<a class="btn" href="#">
  <i class="ficon-refresh"></i> Refresh</a>
<a class="btn btn-success" href="#">
  <i class="ficon-shopping-cart ficon-large"></i> Checkout</a>
<a class="btn btn-large btn-primary" href="#">
  <i class="ficon-comment"></i> Comment</a>
<a class="btn btn-danger" href="#">
  <i class="ficon-trash ficon-large"></i> Delete</a>
<a class="btn btn-small" href="#">
  <i class="ficon-cog"></i> Settings</a>
<a class="btn btn-small btn-info" href="#">
  <i class="ficon-info-sign"></i> More Info</a>

Button groups

<div class="btn-group">
  <a class="btn" href="#"><i class="ficon-align-left"></i></a>
  <a class="btn" href="#"><i class="ficon-align-center"></i></a>
  <a class="btn" href="#"><i class="ficon-align-right"></i></a>
  <a class="btn" href="#"><i class="ficon-align-justify"></i></a>
</div>

Button dropdowns

User

<div class="btn-group">
    <a class="btn btn-primary" href="#"><i class="ficon-user"></i> User</a>
    <a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" href="#"><span class="ficon-caret-down"></span></a>
    <ul class="dropdown-menu">
        <li><a href="#"><i class="ficon-pencil"></i> Edit</a></li>
        <li><a href="#"><i class="ficon-trash"></i> Delete</a></li>
        <li><a href="#"><i class="ficon-ban-circle"></i> Ban</a></li>
        <li class="divider"></li>
        <li><a href="#"><i class="i"></i> Make admin</a></li>
    </ul>
</div>

Don't forget to add the appropriate JavaScript to enable button dropdowns.

Lists

Lists
Buttons
Button groups
Navigation
Prepended form inputs

Easily replace individual bullets.

<ul>
  <li class="ficon-ok">Lists</li>
  <li class="ficon-ok">Buttons</li>
  <li class="ficon-ok">Button groups</li>
  <li class="ficon-ok">Navigation</li>
  <li class="ficon-ok">Prepended form inputs</li>
</ul>

Navigation

Use Font Awesome icons in navigation to provide helpful visual cues.

<ul class="nav nav-list">
  <li class="active"><a href="#"><i class="ficon-home"></i> Home</a></li>
  <li><a href="#"><i class="ficon-book"></i> Library</a></li>
  <li><a href="#"><i class="ficon-pencil"></i> Applications</a></li>
  <li><a href="#"><i class="ficon-cogs"></i> Settings</a></li>
</ul>

Prepended form inputs

<form>
  <div class="input-prepend">
    <span class="add-on"><i class="ficon-envelope"></i></span>
    <input class="span2" type="text" placeholder="Email address">
  </div>
  <div class="input-prepend">
    <span class="add-on"><i class="ficon-key"></i></span>
    <input class="span2" type="password" placeholder="Password">
  </div>
</form>

Custom CSS

Anything you can do with CSS font effects, you can do with Font Awesome.

Star Ratings (inspired by CSS Tricks)

Roadmap

Here's the plan for future updates.

Support for IE7.
Better hinting for smaller font sizes.
More icons. Have any requests? Open an issue in the Font Awesome GitHub project.
More complete Twitter Bootstrap compatibility.
Tricks and tips for super-awesome creative CSS methods, like the star example above.