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!
Add Font Awesome + Bootstrap into your website with two lines of code. You don't even have to download or install anything!
-
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.
- Pat yourself on the back for your scalable-vector-icons-on-the-website judo solution in two lines of code.
- Check out the examples to start using Font Awesome!
Use this method to get the default Font Awesome CSS with the default Bootstrap CSS.
- Copy the
font-awesomedirectory into your project. -
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"> - Check out the examples to start using Font Awesome!
Use this method to customize Font Awesome and Bootstrap 2.3.2 using LESS.
- Copy the
font-awesomedirectory into your project. - Open your project's bootstrap/bootstrap.less and replace
with
@import "sprites.less";@import "path/to/font-awesome/less/font-awesome.less"; -
Open your project's font-awesome/variables.less and edit the
@FontAwesomePathvariable to point to your font directory.@FontAwesomePath: "../font";The font path is relative from your compiled CSS directory.
- Re-compile your LESS if using a static compiler. Otherwise, you should be good to go.
- Check out the examples to start using Font Awesome!
Font Awesome works just as well without Bootstrap.
- Copy the
font-awesomedirectory into your project. - Follow the above directions and skip the Bootstrap parts.
- 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).
- Check out the examples to start using Font Awesome!
Font Awesome supports IE7. If you need it, you have my condolences.
- Get Font Awesome working properly in a modern browser.
- Copy font-awesome-ie7.min.css into your project.
-
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]--> - Go complain to whoever decided your project needs IE7 support.