Font Awesome Examples

8/29/2015
Font Awesome Examples
Want to
add your
own icon?
Check out
Fonticons,
Gimme Some! (https://fonticons.com/?utm_source=font_awesome_homepage&utm_medium=display&utm_content=ad_6_your_own_icon&utm_campaign=promo_4.4_update)
from the
maker of
Font
Awesome.
Basic Icons
fa-camera-retro
You can place Font Awesome icons just about anywhere using the CSS Prefix
 tag
the
for brevity, but using a
 is
fa and
the icon's name. Font Awesome is designed to be used with inline elements (we like
more semantically correct).
 fa-camera-retro
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.
 fa-lg

 fa-2x
If your icons are getting chopped off on top and bottom, make sure you have sufficient line-height.
Fixed Width Icons
Home
Library
Applications
Settings
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="#"> Home</a>
<a class="list-group-item" href="#"> Library</a>
<a class="list-group-item" href="#"> Applications</a>
<a class="list-group-item" href="#"> Settings</a>
</div>
List Icons
http://fortawesome.github.io/Font-Awesome/examples/
1/4
8/29/2015
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>List icons</li>
<li>can be used</li>
<li>as bullets</li>
<li>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.


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






Some browsers on some platforms have issues with animated icons resulting in a jittery wobbling effect. See issue #671 (https://github.com/FortAwesome/Font-
Awesome/issues/671) for examples and possible workarounds.
CSS3 animations aren't supported in IE8 - IE9.
normal
fa-rotate-90
fa-rotate-180
Rotated & Flipped
fa-rotate-270
fa-flip-horizontal
fa-flip-vertical
To arbitrarily rotate and flip icons, use the
fa-rotate-* and fa-flip-* classes.
 normal 

 fa-rotate-90 
 fa-flip-horizontal 
 icon-flip-vertical
Stacked Icons
fa-twitter on fa-square-o
2/4
8/29/2015
fa-twitter on fa-square-o
fa-flag on fa-circle
fa-terminal on fa-square
fa-ban on fa-camera
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.





fa-twitter on fa-square-o 



fa-flag on fa-circle 



fa-terminal on fa-square 



fa-ban on fa-camera
Bootstrap 3 Examples
Settings
Delete
Font Awesome
Version 4.4.0
Email address
Password
User
Font Awesome
works great with the full range of Bootstrap components.
Edit
Delete
Ban
Make admin
<a class="btn btn-danger" href="#">

 Delete</a>
<a class="btn btn-default btn-sm" href="#">
 Settings</a>
<a class="btn btn-lg btn-success" href="#">
 Font Awesome Version 4.4.0</a>
<div class="btn-group">
<a class="btn btn-default" href="#"></a>
<a class="btn btn-default" href="#"></a>
<a class="btn btn-default" href="#"></a>
<a class="btn btn-default" href="#"></a>
</div>
<div class="input-group margin-bottom-sm">

<input class="form-control" type="text" placeholder="Email address">
</div>
<div class="input-group">

<input class="form-control" type="password" placeholder="Password">
</div>
<div class="btn-group open">
<a class="btn btn-primary" href="#"> User</a>
<a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" href="#">
</a>
<ul class="dropdown-menu">
<li><a href="#"> Edit</a></li>
<li><a href="#"> Delete</a></li>
3/4
8/29/2015
<li><a href="#"> Delete</a></li>

<li><a href="#"> Ban</a></li>
<li class="divider"></li>
<li><a href="#"> Make admin</a></li>
</ul>
</div>
Custom CSS
Anything you can do with CSS font styles, you can do with Font Awesome.
Star Ratings (inspired by CSS Tricks (http://css-tricks.com/star-ratings/))
4/4

Font Awesome Examples

Uploaded by

Copyright:

Available Formats

Font Awesome Examples

Uploaded by

Document Information

Original Description:

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Font Awesome Examples

Uploaded by

Copyright:

Available Formats

8/29/2015