<i> tag.
Some examples appreciatively re-used from the
Bootstrap documentation.
Example: basic icon fa-camera-retro
You can place Fork Awesome icons just about anywhere
using the CSS Prefix fa and the icon's name.
Fork 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> fa-camera-retrofa-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> fa-lg
<i class="fa fa-camera-retro fa-2x"></i> fa-2x
<i class="fa fa-camera-retro fa-3x"></i> fa-3x
<i class="fa fa-camera-retro fa-4x"></i> fa-4x
<i class="fa fa-camera-retro fa-5x"></i> fa-5x
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" aria-hidden="true"></i>
Home
</a>
<a class="list-group-item" href="#">
<i class="fa fa-book fa-fw" aria-hidden="true"></i>
Library
</a>
<a class="list-group-item" href="#">
<i class="fa fa-pencil fa-fw" aria-hidden="true"></i>
Applications
</a>
<a class="list-group-item" href="#">
<i class="fa fa-cog fa-fw" aria-hidden="true"></i>
Settings</a>
</div>
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>…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" aria-hidden="true"></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.Loading example (with fa-spinner icon) Loading (with fa-circle-o-notch icon) Loading example (with fa-refresh icon) Loading example (with fa-cog icon) Loading example (with fa-spinner icon)
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 fa-3x fa-fw"></i>
<span class="sr-only">Loading...</span>
<i class="fa fa-circle-o-notch fa-spin fa-3x fa-fw"></i>
<span class="sr-only">Loading...</span>
<i class="fa fa-refresh fa-spin fa-3x fa-fw"></i>
<span class="sr-only">Loading...</span>
<i class="fa fa-cog fa-spin fa-3x fa-fw"></i>
<span class="sr-only">Loading...</span>
<i class="fa fa-spinner fa-pulse fa-3x fa-fw"></i>
<span class="sr-only">Loading...</span>Note: Some browsers on some platforms have issues with animated icons resulting in a jittery wobbling effect. See Font Awesome issue #671 for examples and possible workarounds.
Note: CSS3 animations aren't supported in IE8 - IE9.
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> normal<br>
<i class="fa fa-shield fa-rotate-90"></i> fa-rotate-90<br>
<i class="fa fa-shield fa-rotate-180"></i> fa-rotate-180<br>
<i class="fa fa-shield fa-rotate-270"></i> fa-rotate-270<br>
<i class="fa fa-shield fa-flip-horizontal"></i> fa-flip-horizontal<br>
<i class="fa fa-shield fa-flip-vertical"></i> fa-flip-vertical
To stack multiple icons, use the fa-stack class on the
parent, the fa-stack-1x for the regularly sized icon, and
fa-stack-2x for the larger icon. fa-inverse
can be used as an alternative icon color. You can even throw
larger icon classes on the parent to get further
control of sizing.
<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-cameraFork 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-fork-awesome fa-2x pull-left"></i>
Fork Awesome<br>Version 1.1.7
</a>
<div class="btn-group">
<a class="btn btn-default" href="#">
<i class="fa fa-align-left" title="Align Left"></i>
</a>
<a class="btn btn-default" href="#">
<i class="fa fa-align-center" title="Align Center"></i>
</a>
<a class="btn btn-default" href="#">
<i class="fa fa-align-right" title="Align Right"></i>
</a>
<a class="btn btn-default" href="#">
<i class="fa fa-align-justify" title="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-primary dropdown-toggle" data-toggle="dropdown" href="#">
<span class="fa fa-caret-down" title="Toggle dropdown menu"></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="fa fa-unlock"></i> Make admin</a></li>
</ul>
</div>Anything you can do with CSS font styles, you can do with Fork Awesome.
Star Ratings ( inspired by CSS Tricks )
With our thoughts on icon accessibility in mind, If an icon only adds some extra decoration or branding, it does not need to be announced to users as they are navigating your site or app aurally. Alternatively, if an icon conveys meaning in your content or interface, ensure that this meaning is also conveyed to assistive technologies through alternative displays or text.
<a class="btn btn-default" href="#" aria-label="Settings">
<i class="fa fa-cog" aria-hidden="true"></i>
</a>
<a class="btn btn-danger" href="#" aria-label="Delete">
<i class="fa fa-trash-o" aria-hidden="true"></i>
</a>
<a class="btn btn-primary" href="#" aria-label="Skip to main navigation">
<i class="fa fa-bars" aria-hidden="true"></i>
</a><i class="fa fa-refresh fa-spin fa-3x fa-fw" aria-hidden="true"></i>
<span class="sr-only">Refreshing...</span>
<i class="fa fa-cog fa-spin fa-3x fa-fw" aria-hidden="true"></i>
<span class="sr-only">Saving. Hang tight!</span><div class="input-group">
<span class="input-group-addon">
<i class="fa fa-envelope-o fa-fw" aria-hidden="true"></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" aria-hidden="true"></i>
</span>
<input class="form-control" type="password" placeholder="Password">
</div><a href="#" class="btn btn-primary"
aria-label="View 3 items in your shopping cart">
<i class="fa fa-shopping-cart" aria-hidden="true"></i>
</a><i class="fa fa-battery-half" aria-hidden="true"></i>
<span class="sr-only">Battery level: 50%</span>