Inline Icon

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

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

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

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

Buttons

Refresh Checkout Delete Settings More Info

<a class="btn" href="#">
 <i class="icon-refresh"></i> Refresh</a>
<a class="btn btn-success" href="#">
 <i class="icon-shopping-cart icon-large"></i> Checkout</a>
<a class="btn btn-large btn-warning href="#">
 <i class="icon-trash icon-medium"></i> Delete</a>
<a class="btn btn-small btn-inverse" href="#">
 <i class="icon-cog"></i> Settings</a>
<a class="btn btn-small btn-info" href="#">
 <i class="icon-info-sign"></i> More Info</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

<div class="btn-group">
    <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>
        ...
    </ul>
</div>

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>