Font Awesome

  Examples

Lots of easy ways to use Font Awesome

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.

New Styles in 3.1.1

Rotated and Flipped Icons

  normal
  icon-rotate-90
  icon-rotate-180
  icon-rotate-270
  icon-flip-horizontal
  icon-flip-vertical

Stacked Icons

icon-twitter on icon-check-empty
icon-flag on icon-circle
icon-terminal on icon-sign-blank

Better Bulleted Lists

  • New bulleted lists
  • Fix some old bugs
  • And deal with arbitrary
  • Font sizes better

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.

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

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.1.1</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-fixed-width icon-pencil"></i> Edit</a></li>
    <li><a href="#"><i class="icon-fixed-width icon-trash"></i> Delete</a></li>
    <li><a href="#"><i class="icon-fixed-width 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.

Bulleted Lists

  • Bulleted lists (like this one)
  • Buttons
  • Button groups
  • Navigation
  • Prepended form inputs
  • …and many more with custom CSS

Easily replace individual bullets.

<ul class="icons-ul">
  <li><i class="icon-li icon-ok"></i>Bulleted lists (like this one)</li>
  <li><i class="icon-li icon-ok"></i>Buttons</li>
  <li><i class="icon-li icon-ok"></i>Button groups</li>
  <li><i class="icon-li icon-ok"></i>Navigation</li>
  <li><i class="icon-li icon-ok"></i>Prepended form inputs</li>
  <li><i class="icon-li icon-ok"></i>&hellip;and many more with custom CSS</li>
</ul>

Prepended & Appended 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>

Animated Spinner

Use the icon-spin class to get any icon to rotate. Works well with icon-spinner and icon-refresh.
Spinner icon when loading content... 
<i class="icon-spinner icon-spin icon-large"></i> Spinner icon when loading content...

CSS3 animations aren't supported in IE7 - IE9.

Rotated & Flipped

A set of classes that can be used to arbitrarily rotate and flip icons.
  normal
  icon-rotate-90
  icon-rotate-180
  icon-rotate-270
  icon-flip-horizontal
  icon-flip-vertical 
<i class="icon-shield"></i>&nbsp; normal<br>
<i class="icon-shield icon-rotate-90"></i>&nbsp; icon-rotate-90<br>
<i class="icon-shield icon-rotate-180"></i>&nbsp; icon-rotate-180<br>
<i class="icon-shield icon-rotate-270"></i>&nbsp; icon-rotate-270<br>
<i class="icon-shield icon-flip-horizontal"></i>&nbsp; icon-flip-horizontal<br>
<i class="icon-shield icon-flip-vertical"></i>&nbsp; icon-flip-vertical

Rotating and flipping icons aren't yet supported in IE7.

Stacked Icons

A method for easily stacking multiple icons. Use the icon-stack class on the parent and icon-stack-base for the bottom icon.
icon-twitter on icon-check-empty
icon-flag on icon-circle
icon-terminal on icon-sign-blank 
<span class="icon-stack">
  <i class="icon-check-empty icon-stack-base"></i>
  <i class="icon-twitter"></i>
</span>
icon-twitter on icon-check-empty<br>
<span class="icon-stack">
  <i class="icon-circle icon-stack-base"></i>
  <i class="icon-flag icon-light"></i>
</span>
icon-flag on icon-circle<br>
<span class="icon-stack">
  <i class="icon-sign-blank icon-stack-base"></i>
  <i class="icon-terminal icon-light"></i>
</span>
icon-terminal on icon-sign-blank

Custom CSS

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

Star Ratings (inspired by CSS Tricks)