Font Awesome – Get Started


image

Pick your Icon: http://fontawesome.io/icons/

Setup

EASIEST: BootstrapCDN

Add Font Awesome + Bootstrap into your website with two lines of code. You don’t even have to download or install anything!

  1. Paste the following code into the <head> section of your site’s HTML.
    <link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.no-icons.min.css" rel="stylesheet">
    <link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">
    

    Want to use Font Awesome by itself without Bootstrap? Just don’t include the first line.

  2. Pat yourself on the back for your scalable-vector-icons-on-the-website judo solution in two lines of code.
  3. Check out the examples to start using Font Awesome!

EASY: Default CSS

Use this method to get the default Font Awesome CSS with the default Bootstrap CSS.

  1. Copy the font-awesome directory into your project.
  2. In the <head> of your html, reference the location to your font-awesome.min.css.
    <link rel="stylesheet" href="path/to/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css">
    
  3. Check out the examples to start using Font Awesome!

PRO: Custom LESS

Use this method to customize Font Awesome and Bootstrap 2.3.2 using LESS.

  1. Copy the font-awesome directory into your project.
  2. Open your project’s bootstrap/bootstrap.less and replace
    @import "sprites.less";
    

    with

    @import "path/to/font-awesome/less/font-awesome.less";
    
  3. Open your project’s font-awesome/variables.less and edit the @FontAwesomePath variable to point to your font directory.
    @FontAwesomePath:   "../font";
    

    The font path is relative from your compiled CSS directory.

  4. Re-compile your LESS if using a static compiler. Otherwise, you should be good to go.
  5. Check out the examples to start using Font Awesome!

Start using it

After you get up and running, you can place Font Awesome icons just about anywhere with the <i> tag:

<i class="icon-flag"></i> icon-flag

You can also do http://fontawesome.io/examples/:

  • Inline Icons

  • Larger Icons

  • Bordered & Pulled Icons

  • Buttons image

  • Button Groups image

  • Button Dropdowns image

  • Bulleted Lists image

  • Navigation image

  • Prepended & Appended Form Inputs image

  • Animated Spinner image

  • Rotated & Flipped image

  • Stacked Icons image

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s