Add the desired CSS class to the icon (or any element of your DOM).
For parent hover, add the CSS class faa-parent and animated-hover on the parent.
You can regulate the speed of the animation by adding the CSS class faa-fast or faa-slow.
Basic Icons
fa-camera-retro
You can place Font Awesome icons just about anywhere using the CSS Prefix fa and the icon's
name. Font Awesome is designed to be used with inline elements (we like the <i> tag for
brevity, but using a <span> is more semantically correct).
<i class="fa fa-camera-retro"></i>
- If you change the font-size of the icon's container, the icon gets bigger. Same things goes for color, drop shadow, and anything else that gets inherited using CSS.
Larger Icons
fa-lg
fa-2x
fa-3x
fa-4x
fa-5x
To increase icon sizes relative to their container, use the fa-lg (33% increase), fa-2x, fa-3x, fa-4x, or fa-5x classes.
<i class="fa fa-camera-retro fa-lg"></i>
<i class="fa fa-camera-retro fa-2x"></i>
<i class="fa fa-camera-retro fa-3x"></i>
<i class="fa fa-camera-retro fa-4x"></i>
<i class="fa fa-camera-retro fa-5x"></i>
- If your icons are getting chopped off on top and bottom, make sure you have sufficient line-height.
Fixed Width Icons
Use fa-fw to set icons at a fixed width. Great to use when different icon widths throw off alignment.
Especially useful in things like nav lists & list groups.
<div class="list-group">
<a class="list-group-item" href="#"><i class="fa fa-home fa-fw"></i> Home</a>
<a class="list-group-item" href="#"><i class="fa fa-book fa-fw"></i> Library</a>
<a class="list-group-item" href="#"><i class="fa fa-pencil fa-fw"></i> Applications</a>
<a class="list-group-item" href="#"><i class="fa fa-cog fa-fw"></i> Settings</a>
</div>
List Icons
- List icons
- can be used
- as bullets
- in lists
Use fa-ul and fa-li to easily replace default bullets in unordered lists.
<ul class="fa-ul">
<li><i class="fa-li fa fa-check-square"></i>List icons</li>
<li><i class="fa-li fa fa-check-square"></i>can be used</li>
<li><i class="fa-li fa fa-spinner fa-spin"></i>as bullets</li>
<li><i class="fa-li fa fa-square"></i>in lists</li>
</ul>
Bordered & Pulled Icons
…tomorrow we will run faster, stretch out our arms farther… And then one fine morning— So we beat on, boats against the current, borne back ceaselessly into the past.
Use fa-border and fa-pull-right or fa-pull-left for easy pull quotes or
article icons.
<i class="fa fa-quote-left fa-3x fa-pull-left fa-border"></i>
...tomorrow we will run faster, stretch out our arms farther...
And then one fine morning— So we beat on, boats against the
current, borne back ceaselessly into the past.
Animated Icons
Use the fa-spin class to get any icon to rotate, and use fa-pulse to have it rotate
with 8 steps. Works well with fa-spinner, fa-refresh, and fa-cog.
<i class="fa fa-spinner fa-spin"></i>
<i class="fa fa-circle-o-notch fa-spin"></i>
<i class="fa fa-refresh fa-spin"></i>
<i class="fa fa-cog fa-spin"></i>
<i class="fa fa-spinner fa-pulse"></i>
Some browsers on some platforms have issues with animated icons resulting in a jittery wobbling effect. See issue #671 for examples and possible workarounds.
CSS3 animations aren't supported in IE8 - IE9.
Stacked Icons
fa-twitter on fa-square-o
fa-flag on fa-circle
fa-terminal on fa-square
fa-ban on fa-camera
fa-flag on fa-circle
fa-terminal on fa-square
fa-ban on fa-camera
To arbitrarily rotate and flip icons, use the fa-rotate-* and fa-flip-* classes.
<span class="fa-stack fa-lg">
<i class="fa fa-square-o fa-stack-2x"></i>
<i class="fa fa-twitter fa-stack-1x"></i>
</span>
fa-twitter on fa-square-o<br>
<span class="fa-stack fa-lg">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-flag fa-stack-1x fa-inverse"></i>
</span>
fa-flag on fa-circle<br>
<span class="fa-stack fa-lg">
<i class="fa fa-square fa-stack-2x"></i>
<i class="fa fa-terminal fa-stack-1x fa-inverse"></i>
</span>
fa-terminal on fa-square<br>
<span class="fa-stack fa-lg">
<i class="fa fa-camera fa-stack-1x"></i>
<i class="fa fa-ban fa-stack-2x text-danger"></i>
</span>
fa-ban on fa-camera
Rotated & Flipped
normal
fa-rotate-90
fa-rotate-180
fa-rotate-270
fa-flip-horizontal
fa-flip-vertical
To arbitrarily rotate and flip icons, use the fa-rotate-* and fa-flip-* classes.
<i class="fa fa-shield"></i>
<i class="fa fa-shield fa-rotate-90"></i>
<i class="fa fa-shield fa-rotate-180"></i>
<i class="fa fa-shield fa-rotate-270"></i>
<i class="fa fa-shield fa-flip-horizontal"></i>
<i class="fa fa-shield fa-flip-vertical"></i>
Bootstrap 3 Examples
Font Awesome works great with the full range of Bootstrap components.
<a class="btn btn-danger" href="#">
<i class="fa fa-trash-o fa-lg"></i> Delete</a>
<a class="btn btn-default btn-sm" href="#">
<i class="fa fa-cog"></i> Settings</a>
<a class="btn btn-lg btn-success" href="#">
<i class="fa fa-flag fa-2x pull-left"></i> Font Awesome Version 4.5.0</a>
<div class="btn-group">
<a class="btn btn-default" href="#"><i class="fa fa-align-left"></i></a>
<a class="btn btn-default" href="#"><i class="fa fa-align-center"></i></a>
<a class="btn btn-default" href="#"><i class="fa fa-align-right"></i></a>
<a class="btn btn-default" href="#"><i class="fa fa-align-justify"></i></a>
</div>
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-envelope-o fa-fw"></i></span>
<input class="form-control" type="text" placeholder="Email address">
</div>
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-key fa-fw"></i></span>
<input class="form-control" type="password" placeholder="Password">
</div>
<div class="btn-group open">
<a class="btn btn-primary" href="#"><i class="fa fa-user fa-fw"></i> User</a>
<a class="btn btn-dark btn-flat dropdown-toggle" data-toggle="dropdown" href="#">
<span class="fa fa-caret-down"></span></a>
<ul class="dropdown-menu">
<li><a href="#"><i class="fa fa-pencil fa-fw"></i> Edit</a></li>
<li><a href="#"><i class="fa fa-trash-o fa-fw"></i> Delete</a></li>
<li><a href="#"><i class="fa fa-ban fa-fw"></i> Ban</a></li>
<li class="divider"></li>
<li><a href="#"><i class="i"></i> Make admin</a></li>
</ul>
</div>
Font Awesome Animation
<div class="demo font-14">
<div class="col-md-12">
<div class="col-md-4"> <a href="#"> <i class="fa fa-wrench faa-wrench animated"></i> faa-wrench animated </a> </div>
<div class="col-md-4"> <a href="#"> <i class="fa fa-wrench faa-wrench animated-hover"></i> faa-wrench animated-hover </a> </div>
<div class="col-md-4"> <a class="faa-parent animated-hover" href="#"> <i class="fa fa-wrench faa-wrench"></i> faa-wrench </a> </div>
</div>
<div class="col-md-12">
<div class="col-md-4"> <a href="#"> <i class="fa fa-bell faa-ring animated"></i> faa-ring animated </a> </div>
<div class="col-md-4"> <a href="#"> <i class="fa fa-bell faa-ring animated-hover"></i> faa-ring animated-hover </a> </div>
<div class="col-md-4"> <a class="faa-parent animated-hover" href="#"> <i class="fa fa-bell faa-ring"></i> faa-ring </a> </div>
</div>
<div class="col-md-12">
<div class="col-md-4"> <a href="#"> <i class="fa fa-envelope faa-horizontal animated"></i> faa-horizontal animated </a> </div>
<div class="col-md-4"> <a href="#"> <i class="fa fa-envelope faa-horizontal animated-hover"></i> faa-horizontal animated-hover </a> </div>
<div class="col-md-4"> <a class="faa-parent animated-hover" href="#"> <i class="fa fa-envelope faa-horizontal"></i> faa-horizontal </a> </div>
</div>
</div>