Installing Foundation-Icon-Fonts via Bower in --libsass environment

Question

I'm using Foundation 5 - foundation-libsass-template. Using bower I've added foundation-icons with the following command "bower install foundation-icons --save". This command downloads the foundation-icon package and saves it to the bower_components folder and modifies my bower.json file.

{
  "name": "foundation-libsass-template",
  "dependencies": {
    "foundation": "zurb/bower-foundation",
    "foundation-icon-fonts": "zurb/foundation-icon-fonts"
  }
}

Problem: When I add @import "foundation-icon-fonts"; to my app.scss file Grunt returns an error because it can't find the file:

Warning: C:/Users/Chris/Websites/example.com/lp/new/scss/app.scss:3: file to import not found or unreadable: "foundation-icon-fonts"

Question 1: Do I need to modify the Grunt.js file in order to include this library? If so, could someone please provide an example? Thanks.

Answer 1

Well, I don't use that package, but the @import CSS directive (and the Sass version) requires a correct path for the import. So, since you're using this as a Bower module, I'd imagine you would need something like:

@import "bower_components/foundation-icons/path-to-styles.css";

Looking at the Bower package when I install it on my system, however, it looks like there are multiple directories in there with fonts and stylesheets:

.bower.json
foundation_icons_accessibility/
foundation_icons_general/
foundation_icons_general_enclosed/
foundation_icons_social/
.gitignore
MIT-LICENSE.txt
README.markdown

So you might have to specify the directory?

@import "bower_components/path-to-foundation/foundation_icons_general/sass/general_foundicons.css";