Integration

It's easy to integrate Font Awesome into Twitter Bootstrap, or even use it on its own.

Easy Bootstrap + Font Awesome Integration

Use this method to integrate Font Awesome 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. 
    <link rel="stylesheet" href="../css/bootstrap.min.css">
<link rel="stylesheet" href="../css/font-awesome.min.css">
  5. Check out the examples to start using Font Awesome!

Custom Bootstrap + Font Awesome Integration using LESS

Use this method to integrate Font Awesome with Twitter 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. 
    @FontAwesomePath:   "../font";

    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!

Custom Bootstrap + Font Awesome Integration using SASS or SCSS

I have never used either, so let me know if the included SCSS or SASS files have issues.

Not using Bootstrap?

Font Awesome works just as well without Twitter 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. 
    <link rel="stylesheet" href="../css/bootstrap.min.css">
<link rel="stylesheet" href="../css/font-awesome.min.css">
<!--[if IE 7]>
<link rel="stylesheet" href="assets/css/font-awesome-ie7.min.css">
<![endif]-->
  4. Go complain to whoever decided your project needs IE7 support.