Font Awesome

  Get Started

Easy ways to get Font Awesome 3.2.1 onto your website

Heads up! These docs are for v3.2.1, which is no longer officially supported. Check out the latest version of Font Awesome!

Setting up Font Awesome can be as simple as adding two lines of code to your website, or you can be a pro and customize the LESS yourself! Font Awesome even plays nicely with Bootstrap!

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!

Not using Bootstrap?

Font Awesome works just as well without Bootstrap.

  1. Copy the font-awesome directory into your project.
  2. Follow the above directions and skip the Bootstrap parts.
  3. Open your project's font-awesome.less or font-awesome.min.css and edit the font location to point it to your font directory (see above examples).
  4. Check out the examples to start using Font Awesome!

Need IE7 Support?

Font Awesome supports IE7. If you need it, you have my condolences.

  1. Get Font Awesome working properly in a modern browser.
  2. Copy font-awesome-ie7.min.css into your project.
  3. In the <head> of your html, reference the location to your font-awesome-ie7.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">
<!--[if IE 7]>
  <link rel="stylesheet" href="path/to/font-awesome/css/font-awesome-ie7.min.css">
<![endif]-->
  4. Go complain to whoever decided your project needs IE7 support.