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

Reload Checkout Delete

Comment Settings Info

User

New Styles in 3.0

Use a few of the new styles together, and you've got easy pull quotes or a great introductory article image. Or spinning icons for loading and refreshing content. Or fun big icons in multi-line buttons. Lots of new possibilities.
Spinner icon when loading content...

Font Awesome
Version 3.0

Synchronizing Content...

Example HTML

Inline Icons

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

icon-camera-retro 
<i class="icon-camera-retro"></i> icon-camera-retro
Icon classes are echoed via CSS :before.

Larger Icons

To increase the size of icons relative to its container, use icon-large, icon-2x, icon-3x, or icon-4x.

Increase the icon size by using the icon-large (33% increase), icon-2x, icon-3x, or icon-4x classes.

icon-camera-retro

icon-camera-retro

icon-camera-retro

icon-camera-retro

<p><i class="icon-camera-retro icon-large"></i> icon-camera-retro</p>
<p><i class="icon-camera-retro icon-2x"></i> icon-camera-retro</p>
<p><i class="icon-camera-retro icon-3x"></i> icon-camera-retro</p>
<p><i class="icon-camera-retro icon-4x"></i> icon-camera-retro</p>
If your icons are getting chopped off on top and bottom, make sure you have sufficient line-height.

Animated Spinner

Use the icon-spin class to get any icon to rotate. Works best with icon-spinner and icon-refresh.

Spinner icon when loading content... 
<i class="icon-spinner icon-spin"></i> Spinner icon when loading content...

CSS3 animations aren't supported in IE7 - IE9.

Bordered & Pulled Icons

Use icon-border and pull-right or pull-left for easy pull quotes or article graphics.

Use a few of the new styles together, and you've got easy pull quotes or a great introductory article image. Or spinning icons for loading and refreshing content. Or fun big icons in multi-line buttons. You can combine all of them in any combination to get lots of new possibilities. 
<i class="icon-quote-left icon-4x pull-left icon-muted"></i>
Use a few of the new styles together ... lots of new possibilities.
Use a few of the new styles together, and you've got easy pull quotes or a great introductory article image. Or spinning icons for loading and refreshing content. Or fun big icons in multi-line buttons. You can combine all of them in any combination to get lots of new possibilities. 
<i class="icon-flag icon-4x pull-left icon-border"></i>
Use a few of the new styles together ... lots of new possibilities.

Buttons

Reload Checkout

Comment Info

Delete Settings

Font Awesome
Version 3.0

Synchronizing Content...

Font Awesome icons work great in buttons. You can even combine them with larger icon styles, pull-right and pull-left, and icon-spin. 

<a class="btn" href="#">
  <i class="icon-repeat"></i> Reload</a>
<a class="btn btn-success" href="#">
  <i class="icon-shopping-cart icon-large"></i> Checkout</a>
<a class="btn btn-large btn-primary" href="#">
  <i class="icon-comment"></i> Comment</a>
<a class="btn btn-small btn-info" href="#">
  <i class="icon-info-sign"></i> Info</a>
<a class="btn btn-danger" href="#">
  <i class="icon-trash icon-large"></i> Delete</a>
<a class="btn btn-small" href="#">
  <i class="icon-cog"></i> Settings</a>
<a class="btn btn-large btn-danger" href="#">
  <i class="icon-flag icon-2x pull-left"></i>Font Awesome<br>Version 3.0</a>
<a class="btn btn-primary" href="#">
  <i class="icon-refresh icon-spin"></i> Synchronizing Content...</a>

Button groups

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

Button dropdowns

User 

<div class="btn-group open">
    <a class="btn btn-primary" href="#"><i class="icon-user"></i> User</a>
    <a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" href="#"><span class="icon-caret-down"></span></a>
    <ul class="dropdown-menu">
        <li><a href="#"><i class="icon-pencil"></i> Edit</a></li>
        <li><a href="#"><i class="icon-trash"></i> Delete</a></li>
        <li><a href="#"><i class="icon-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 class="icons">
  <li><i class="icon-ok"></i> Lists</li>
  <li><i class="icon-ok"></i> Buttons</li>
  <li><i class="icon-ok"></i> Button groups</li>
  <li><i class="icon-ok"></i> Navigation</li>
  <li><i class="icon-ok"></i> 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="icon-home"></i> Home</a></li>
  <li><a href="#"><i class="icon-book"></i> Library</a></li>
  <li><a href="#"><i class="icon-pencil"></i> Applications</a></li>
  <li><a href="#"><i class="icon-cogs"></i> Settings</a></li>
</ul>

Prepended form inputs

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

Custom CSS

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

Star Ratings (inspired by CSS Tricks)