Adding Font Awesome icons

Font Awesome is a font icon set that offers 361 icons at the time of writing this book—twice as many as available in the current Bootstrap version of Glyphicons. Font Awesome icons are free, open source, and built to play nice with Bootstrap. You can see the Font Awesome home page at:

http://fortawesome.github.io/Font-Awesome/

Let's fold Font Awesome into our workflow.

  1. Navigate to the Font Awesome home page, at http://fortawesome.github.io/Font-Awesome/, and click on the large Download button.
  2. Extract the downloaded archive and look inside. You'll find the following folder structure:
    Adding Font Awesome icons
  3. Inside the font folder, you'll find the Font Awesome icon font files.
    Adding Font Awesome icons
  4. Copy all of these files and paste them into your project's fonts folder, alongside the Glyphicons font files.
  5. Now, we want to copy the Font Awesome less files to our project's less directory. Create a new subdirectory named font-awesome, and copy the Font Awesome less files into it.
    Adding Font Awesome icons
  6. Next, we will import the font-awesome.less file into our __main.less file, so that it will be compiled into our stylesheet. I'll add the import line to __main.less just under the Glyphicon import:
    @import "bootstrap/glyphicons.less";
@import "font-awesome/font-awesome.less";
  7. The Font Awesome less files include a variable specifying the path to the Font Awesome web fonts. We need to check to make sure that this variable matches our folder structure. Open the Font Awesome variables file font-awesome/variables.less. Ensure that the @fa-font-path variable is set to ../fonts as follows:
    @fa-font-path:    "../fonts";

    Note

    This path is relative to the compiled CSS file, which is in our css directory.

  8. Save and compile to CSS.
  9. Now, in index.html, let's update the icon for the Team navbar item to use the Font Awesome icon named fa-group. We also need the standalone fa class. In addition, let's add our own generic icon class:
    <span class="icon fa fa-group"></span> Team
  10. Save this change to index.html, and refresh your browser.

If all works as it should, you should see the following result:

Adding Font Awesome icons

Tip

If you see a strange symbol—or nothing—that's a sign that the web fonts are not coming through. Double-check that your icon classes are correct (including the fa class), your Font Awesome web font files are in your fonts directory, and the path is set correctly in font-awesome/variables.less.

Congratulations—you've more than doubled your available icons!

At this point, we can choose to keep Glyphicons in the mix, or we can unhook them. In order to reduce code bloat, I'll remove Glyphicons and shift entirely to Font Awesome. This requires only two quick steps:

  1. Comment out the Glyphicons import line from __main.less.
    // @import "bootstrap/glyphicons.less";
@import "font-awesome/font-awesome.less";
  2. Update your icon markup in index.html to make use of the desired Font Awesome icons.

The Font Awesome icon page http://fortawesome.github.io/Font-Awesome/icons/ allows you to scan your options. Our mock-up calls for these icons in the navbar:

<span class="icon fa fa-home"></span> Home
<span class="icon fa fa-desktop"></span> Portfolio
<span class="icon fa fa-group"></span> Team
<span class="icon fa fa-envelope"></span> Contact

With this result:

Adding Font Awesome icons
..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset