Place Font Awesome icons just about anywhere with the
<i>
tag.
<i class="icon-camera-retro"></i> icon-camera-retro
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>
Use the icon-spin
class to get any icon to rotate. Works best with
icon-spinner and icon-refresh.
<i class="icon-spinner icon-spin"></i> Spinner icon when loading content...
CSS3 animations aren't supported in IE7 - IE9.
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.
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-green" href="#"> <i class="icon-shopping-cart icon-large"></i> Checkout</a> <a class="btn btn-large btn-blue" href="#"> <i class="icon-comment"></i> Comment</a> <a class="btn btn-small btn-cyan" href="#"> <i class="icon-info-sign"></i> Info</a> <a class="btn btn-red" 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-red" href="#"> <i class="icon-flag icon-2x pull-left"></i>Font Awesome<br>Version 3.0</a> <a class="btn btn-blue" href="#"> <i class="icon-refresh icon-spin"></i> Synchronizing Content...</a>
<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>
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>
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>
<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>
