Menu icon Foundation
Foundation Icon Fonts via Bower Help

Hello,

I just installed the Foundation Icon Fonts via Bower, and I want to know how best to get them included in my app.scss file while leaving the Bower folder as is.

Right now, the folder looks like:
bower_components:
>fastclick
>foundation
>foundation-icon-fonts
>...more

my bower.json file is:
{
"name": "foundation-compass-app",
"version": "0.0.1",
"private": "true",
"dependencies": {
"foundation": "~5.2.2",
"foundation-icon-fonts": "*"
}
}

So, what is the best way to include it in app.scss? Thanks!

bower

Hello,

I just installed the Foundation Icon Fonts via Bower, and I want to know how best to get them included in my app.scss file while leaving the Bower folder as is.

Right now, the folder looks like:
bower_components:
>fastclick
>foundation
>foundation-icon-fonts
>...more

my bower.json file is:
{
"name": "foundation-compass-app",
"version": "0.0.1",
"private": "true",
"dependencies": {
"foundation": "~5.2.2",
"foundation-icon-fonts": "*"
}
}

So, what is the best way to include it in app.scss? Thanks!

James Stone about 5 years ago

Since it isn't part of the default foundation directory you will have to import the files with the full path into the bower_components.

The top of your app.scss file should look something like this:

$fi-path: "../bower_components/foundation-icon-fonts";

@import "settings";
@import "foundation";
@import "../bower_components/foundation-icon-fonts/foundation-icons";

...

Giacomo Marciani over 4 years ago

Hi James!
I have the same environment of Peter, and I followed your directions. Compiling with Compass returns no error, but when I use the icons in an html file, these are shown as Unicode.

Where I am wrong?

Could you help me, please?

Shoaib Iqbal over 4 years ago

Hi Giacomo, Make sure the fonts path is correct, you can check the browser console to confirm.

Giacomo Marciani over 4 years ago

Hi Shoaib, this is my project structure:

bower_components
- foundation-icon-fonts
- foundation
sass
- style.scss
tests
- test-icons.html
config.rb
style.css

[bower.json]

"dependencies": {
    "foundation": "~5.5.1",
    "foundation-icon-fonts": "*"
 }

[config.rb]

require 'compass/import-once/activate'
add_import_path "bower_components/foundation/scss"
add_import_path "bower_components/foundation-icon-fonts"

environment = :development
preferred_syntax = :scss
output_style = :nested
line_comments = true

http_path = "/"
css_dir = "/"
sass_dir = "sass"
images_dir = "images"
javascripts_dir = "javascripts"

[style.scss]

$fi-path: "bower_components/foundation-icon-fonts";
@import "compass";
@import "foundation";
@import "foundation-icons";

[test-icons.html]

<link rel="stylesheet" href="../style.css" />
<i class="fi-address-book"></i>

When I launch

compass watch 

It generates styles.css with no errors. The browser does not show any icons, but little sequare with unicode inside of it.

I don't know where the path error is.