Ways to use Font Awesome

It's easy to get started with Font Awesome. And it plays really nicely with Bootstrap!


{% include ads/carbon-light-horizontal.html %}

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. {% highlight html %} {% endhighlight %}
    Want to use Font Awesome by itself without Bootstrap? Just skip pasting in 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 font directory into your project.
  2. Copy font-awesome.min.css into your project.
  3. Open your project's font-awesome.min.css and edit the font paths to ensure they point to the right place.

    The font path is relative from your CSS directory.

  4. In the <head> of your html, reference the location to your font-awesome.min.css. {% highlight html %} {% endhighlight %}
  5. Check out the examples to start using Font Awesome!

PRO: Custom LESS

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

  1. Copy the Font Awesome font directory into your project.
  2. Copy font-awesome.less into your bootstrap/less directory.
  3. Open bootstrap.less and replace @import "sprites.less"; with @import "font-awesome.less";
  4. Open your project's font-awesome.less and edit the @FontAwesomePath variable to point to your font directory. {% highlight html %} @FontAwesomePath: "../font"; {% endhighlight %}

    The font path is relative from your compiled CSS directory.

  5. Re-compile your LESS if using a static compiler. Otherwise, you should be good to go.
  6. 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 font directory into your project.
  2. Copy font-awesome.less or font-awesome.min.css into your project.
  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. {% highlight html %} {% endhighlight %}
  4. Go complain to whoever decided your project needs IE7 support.