Font Awesome CDN is the easiest way to get Font Awesome on your website or app,
all with just a single line of code. No downloading or installing!
Want to manage and host Font Awesome assets yourself? You can download, customize,
and use the icons and default styling manually.
Both CSS and CSS Preprocessor (Sass and Less) formats are included.
<link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css">
Use this method to customize Font Awesome 4.7.0 using Less or Sass.
@fa-font-path: "../font";
If you need IE7 support, you have my condolences.
Really. Font Awesome 4.7.0 doesn't support IE7, but an older version does.
You'll need to check out the 3.2.1 instructions for using IE7 then go complain
to whoever decided your project needs IE7 support.
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 tag for brevity, but using a is more semantically correct).
<i class="fa fa-camera-retro"></i> fa-camera-retro
Example: basic icon 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.
To increase icon sizes relative to their container, use the fa-lg (33% increase),
fa-2x, fa-3x, fa-4x, or fa-5x classes, and If your icons are getting chopped off on top and bottom,
make sure you have sufficient line-height.
<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>
mas ejemplos en: