gmocamilotd
10/29/2017 - 3:28 AM

font awesome

http://fontawesome.io/get-started/

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!

Download & Customize

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.

descargar

Using CSS

  1. Copy the entire font-awesome directory into your project.
  2. In the of your html, reference the location to your font-awesome.min.css.
    <link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css">

Using Sass or Less

Use this method to customize Font Awesome 4.7.0 using Less or Sass.

  1. Copy the font-awesome/ directory into your project.
  2. Open your project's font-awesome/less/variables.less or
    font-awesome/scss/_variables.scss and edit the @fa-font-path or
    $fa-font-path variable to point to your font directory.
    @fa-font-path: "../font";
    The font path is relative from your compiled CSS directory.
  3. Re-compile your Less or Sass if using a static compiler. Otherwise, you should be good to go.

Need IE7 Support?

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.

Basic Icons

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

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" aria-hidden="true"></i>&nbsp; Home</a>
  <a class="list-group-item" href="#"><i class="fa fa-book fa-fw" aria-hidden="true"></i>&nbsp; Library</a>
  <a class="list-group-item" href="#"><i class="fa fa-pencil fa-fw" aria-hidden="true"></i>&nbsp; Applications</a>
  <a class="list-group-item" href="#"><i class="fa fa-cog fa-fw" aria-hidden="true"></i>&nbsp; Settings</a>
</div>

mas ejemplos en:

http://fontawesome.io/examples/