Menu

Use Font Awesome with Foundation

December 23, 2014 by Christopher Sherman

Font Awesome has a massive collection of icon fonts and is widely used across the web. You may wish you use it in place of the Foundation font library, and in this tutorial I will explain how. I will assume you have followed the instructions for installing Foundation as a Libsass project.

Open the command line and change the directory to the root of your Foundation Libsass project. Enter the following command:

bower install components-font-awesome --save-dev

If you followed my tutorial on configuring a Foundation Libsass project, you already have the Grunt copy plugin already installed. If not, execute the following command:

npm install grunt-contrib-copy --save-dev

Open Gruntfile.js and add the entry below to copy the Font Awesome files to the root of your web project. If you’re already using the copy plugin, you just need to add the configuration object beneath the fonts comment.

copy: {
main: {
files: [
// Fonts.
{
expand: true,
filter: 'isFile',
flatten: true,
cwd: 'bower_components/',
src: ['components-font-awesome/fonts/**'],
dest: '../fonts'
},
]
}
}

Next we need to add the Font Awesome SCSS styles to our stylesheet. Open app.scss within the Foundation scss folder and paste the following statement:

// Font Awesome.
@import "../bower_components/components-font-awesome/scss/font-awesome.scss";

As a final step, we need to change one variable within the Font Awesome SCSS to reference the proper path of the font files. Open bower_components/components-font-awesome/scss/_variables.scss and replace $fa-font-path with "../fonts" !default;.

That’s it! Refer to the Font Awesome documentation for using the library in your views.

Zurb Foundation