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

{% include ads/carbon-light-horizontal.html %}

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

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 {{ site.font_awesome.version }}

Synchronizing Content...

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

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

<i class="icon-quote-left icon-4x pull-left icon-muted"></i>
Use a few of the new styles together ... 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 {{ site.font_awesome.version }}

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)

Examples

New Styles in 3.0

Example HTML