Menu icon Foundation
Please help installing Font Awesome

Hello everyone.  I have just started with Foundation for Sites and am loving it now that I have everything setup correctly.

I am using the ZURB advanced template and have installed everything from the CLI.  

I am have one issue.  I installed the Multi-Level Accordian File Menu (http://foundation.zurb.com/building-blocks/blocks/multilevel-accordion-menu.html)

When I preview the site, none of the icons are displaying.  After looking at the SCSS for the building block I noticed that the icons are font awesome.  I found a tutorial on how to install font awesome (http://foundation.zurb.com/forum/posts/46991-howto-foundation-6-font-awesome-and-other-asset-fonts) and installed by following each step.

After restarting gulp, I get an error and it won't start.  Can someone please help me get font awesome installed for the latest version of Foundation?  I feel like it is a patch issue of some sort.  I have confirmed that Font Awesome is installed to the bower_components folder.

Any help would be greatly appreciated.

font awesomeinstall

Hello everyone.  I have just started with Foundation for Sites and am loving it now that I have everything setup correctly.

I am using the ZURB advanced template and have installed everything from the CLI.  

I am have one issue.  I installed the Multi-Level Accordian File Menu (http://foundation.zurb.com/building-blocks/blocks/multilevel-accordion-menu.html)

When I preview the site, none of the icons are displaying.  After looking at the SCSS for the building block I noticed that the icons are font awesome.  I found a tutorial on how to install font awesome (http://foundation.zurb.com/forum/posts/46991-howto-foundation-6-font-awesome-and-other-asset-fonts) and installed by following each step.

After restarting gulp, I get an error and it won't start.  Can someone please help me get font awesome installed for the latest version of Foundation?  I feel like it is a patch issue of some sort.  I have confirmed that Font Awesome is installed to the bower_components folder.

Any help would be greatly appreciated.


Michal Pandyra gave the most helpful answer for this post
Michal Pandyra over 2 years ago

Here's the method I use for installing FontAwesome with the new 6.4 branch of Foundation for Sites.

 

  1. Install the NodeJs "font-awesome" package using npm
    npm install font-awesome --save
  2. Add the FontAwesome paths to your config.yml file
    PATHS:
      assets:
        - "node_modules/font-awesome/**/*"
        - "!node_modules/font-awesome/{css,less,scss}/**/*"
      sass:
        - "node_modules/font-awesome/scss"

     

  3. Add FontAwesome to the bottom of your app.scss file
    @import 'font-awesome';

     

Here's a quick breakdown of what we're doing.

Foundation Zurb Template has done away with Bower which, in theory, will make managing packages and dependencies much easier moving forward.

Here's a quick breakdown of what's going on

 

  1. We're installing the "font-awesome" package from NodeJs and saving it to our package.json file as a dependency. I don't believe there's an official npm release of FontAwesome, none that I see listed on their official website, at least. This one, however, does see regular updates and it's the one most frequently referenced when associating FontAwesome with NodeJs.

  2. We're adding a few paths to the configuration.

    • The "assets" line copies the necessary font files into our "dist" directory. First we're copying the folder structure that comes with FontAwesome, then we're ignoring all files except those in the "fonts" folder. This ensures that your FontAwesome fonts will live at "/assets/fonts/" while your css lives at "/assets/css" important because FontAwesome's @font-face rules use relative paths.

      If you want to change where the fonts live you're free to do so, but you'll have to update the path that appears in the css. Adding the $fa-font-path variable in your _settings.scss file will do the trick. By default FontAwesome sets it to "../fonts"


    • The "sass" line tells gulp-sass to include the path FontAwesome's .sass files when generating the output. When you use @import in the line below, Gulp-sass will look for the requested .sass file in this location.

  3. We're adding FontAwesome to our SCSS structure so that the CSS is generated when we process. This appears at the bottom so that changes made to $fa-* variables in _settings.scss will be accounted for.

Greg Brown over 2 years ago

I am attaching a screenshot of the errors I get in my terminal when I try to run foundation watch.  I hope this may help in sorting out the issues.

Also, here is a bit more information that I can give.  When I add the import statement to app.scss the terminal throws and error that the file can not be found.  I have checked and rechecked the path and it is correct.

When I add to the config.yaml and gulpfile, the errors the terminal throws seems to be related to the gulpfile.  I am not at all familiar with the gulpfile and how it works.  I suspect I may have placed something out of order or something but I don't know how to fix.

Thanks!

Terminal Errors

Michal Pandyra over 2 years ago

Hi Greg,

Are you using Foundation 6.4, or an earlier version? There have been some significant changes in how Foundation for Sites and the Foundation Zurb Template manage their dependencies.

If you could confirm I'll try to provide instructions that best suit your version. Thanks!

Greg Brown over 2 years ago

Michal,

Thank you for your response.  I am running Foundation 6.4.1.

Thank you again,

Greg

Greg Brown over 2 years ago

Rafi,

I looked at the link provided but I don't have a lib folder.  Should I create this and if so, does it go in the root of the project or in the src folder?

 

Thanks,

Greg

Greg Brown over 2 years ago

Ok, I went through your tutorial by installing SweetAlert2 and that worked fine.  However, I am not able to translate this to Font Awesome.  Below is the errors that were output from the terminal.

 

[20:07:58] Starting 'javascript'...

[20:08:02] 'javascript' errored after 3.88 s

[20:08:02] Error in plugin 'webpack-stream'

Message:

    ./src/assets/js/lib/dependencies.js

Module not found: Error: Can't resolve 'font-awesome-sass' in '/Users/browngd/dev/foundation/dashboard/src/assets/js/lib'

resolve 'font-awesome-sass' in '/Users/browngd/dev/foundation/dashboard/src/assets/js/lib'

  Parsed request is a module

  using description file: /Users/browngd/dev/foundation/dashboard/package.json (relative path: ./src/assets/js/lib)

    Field 'browser' doesn't contain a valid alias configuration

  after using description file: /Users/browngd/dev/foundation/dashboard/package.json (relative path: ./src/assets/js/lib)

    resolve as module

      /Users/browngd/dev/foundation/dashboard/src/assets/js/lib/node_modules doesn't exist or is not a directory

      /Users/browngd/dev/foundation/dashboard/src/assets/js/node_modules doesn't exist or is not a directory

      /Users/browngd/dev/foundation/dashboard/src/assets/node_modules doesn't exist or is not a directory

      /Users/browngd/dev/foundation/dashboard/src/node_modules doesn't exist or is not a directory

      /Users/browngd/dev/foundation/node_modules doesn't exist or is not a directory

      /Users/browngd/dev/node_modules doesn't exist or is not a directory

      /Users/browngd/node_modules doesn't exist or is not a directory

      /Users/node_modules doesn't exist or is not a directory

      /node_modules doesn't exist or is not a directory

      looking for modules in /Users/browngd/dev/foundation/dashboard/node_modules

        using description file: /Users/browngd/dev/foundation/dashboard/package.json (relative path: ./node_modules)

          Field 'browser' doesn't contain a valid alias configuration

        after using description file: /Users/browngd/dev/foundation/dashboard/package.json (relative path: ./node_modules)

          using description file: /Users/browngd/dev/foundation/dashboard/node_modules/font-awesome-sass/package.json (relative path: .)

            no extension

              Field 'browser' doesn't contain a valid alias configuration

              /Users/browngd/dev/foundation/dashboard/node_modules/font-awesome-sass is not a file

            .js

              Field 'browser' doesn't contain a valid alias configuration

              /Users/browngd/dev/foundation/dashboard/node_modules/font-awesome-sass.js doesn't exist

            .json

              Field 'browser' doesn't contain a valid alias configuration

              /Users/browngd/dev/foundation/dashboard/node_modules/font-awesome-sass.json doesn't exist

            as directory

              existing directory

                using path: /Users/browngd/dev/foundation/dashboard/node_modules/font-awesome-sass/index

                  using description file: /Users/browngd/dev/foundation/dashboard/node_modules/font-awesome-sass/package.json (relative path: ./index)

                    no extension

                      Field 'browser' doesn't contain a valid alias configuration

                      /Users/browngd/dev/foundation/dashboard/node_modules/font-awesome-sass/index doesn't exist

                    .js

                      Field 'browser' doesn't contain a valid alias configuration

                      /Users/browngd/dev/foundation/dashboard/node_modules/font-awesome-sass/index.js doesn't exist

                    .json

                      Field 'browser' doesn't contain a valid alias configuration

                      /Users/browngd/dev/foundation/dashboard/node_modules/font-awesome-sass/index.json doesn't exist

                use ./index.js from main in package.json

                  using description file: /Users/browngd/dev/foundation/dashboard/node_modules/font-awesome-sass/package.json (relative path: .)

                    Field 'browser' doesn't contain a valid alias configuration

                  after using description file: /Users/browngd/dev/foundation/dashboard/node_modules/font-awesome-sass/package.json (relative path: .)

                    using description file: /Users/browngd/dev/foundation/dashboard/node_modules/font-awesome-sass/package.json (relative path: ./index.js)

                      no extension

                        Field 'browser' doesn't contain a valid alias configuration

                        /Users/browngd/dev/foundation/dashboard/node_modules/font-awesome-sass/index.js doesn't exist

                      .js

                        Field 'browser' doesn't contain a valid alias configuration

                        /Users/browngd/dev/foundation/dashboard/node_modules/font-awesome-sass/index.js.js doesn't exist

                      .json

                        Field 'browser' doesn't contain a valid alias configuration

                        /Users/browngd/dev/foundation/dashboard/node_modules/font-awesome-sass/index.js.json doesn't exist

                      as directory

                        /Users/browngd/dev/foundation/dashboard/node_modules/font-awesome-sass/index.js doesn't exist

[/Users/browngd/dev/foundation/dashboard/src/assets/js/lib/node_modules]

[/Users/browngd/dev/foundation/dashboard/src/assets/js/node_modules]

[/Users/browngd/dev/foundation/dashboard/src/assets/node_modules]

[/Users/browngd/dev/foundation/dashboard/src/node_modules]

[/Users/browngd/dev/foundation/node_modules]

[/Users/browngd/dev/node_modules]

[/Users/browngd/node_modules]

[/Users/node_modules]

[/node_modules]

[/Users/browngd/dev/foundation/dashboard/node_modules/font-awesome-sass]

[/Users/browngd/dev/foundation/dashboard/node_modules/font-awesome-sass.js]

[/Users/browngd/dev/foundation/dashboard/node_modules/font-awesome-sass.json]

[/Users/browngd/dev/foundation/dashboard/node_modules/font-awesome-sass/index]

[/Users/browngd/dev/foundation/dashboard/node_modules/font-awesome-sass/index.js]

[/Users/browngd/dev/foundation/dashboard/node_modules/font-awesome-sass/index.json]

[/Users/browngd/dev/foundation/dashboard/node_modules/font-awesome-sass/index.js]

[/Users/browngd/dev/foundation/dashboard/node_modules/font-awesome-sass/index.js.js]

[/Users/browngd/dev/foundation/dashboard/node_modules/font-awesome-sass/index.js.json]

[/Users/browngd/dev/foundation/dashboard/node_modules/font-awesome-sass/index.js]

 @ ./src/assets/js/lib/dependencies.js 3:23-51

 @ ./src/assets/js/app.js

 @ multi ./src/assets/js/app.js

Details:

    domain: [object Object]

    domainThrown: true

 

Greg Brown over 2 years ago

I should also mention that, I did create the dependencies.js in src/assets/lib/dependencies.js

 

Nothing I try works.

Greg Brown over 2 years ago

Ok, I think I am making some progress.  After a lot of trial and error based on what I have read and what Michal and Rafi stated, I have managed to get no errors when I run foundation watch.  However, the Font Awesome icons are still not working.

Upon looking into app.css it appears that they are being imported, but incorrectly.  For some reason, it looks like the css has no idea what the font unicode is.  They all look like this.

 

.fa-envelope-o:before {

  content: ""; }

 

.fa-heart:before {

  content: ""; }

 

.fa-star:before {

  content: ""; }

 

They display on the page with that same box.  What in the world am I doing wrong.  Here is what I did.

npm install font-awesome

config.yml

  # Paths to static assets that aren't images, CSS, or JavaScript
  assets:
    - "src/assets/**/*"
    - "!src/assets/{img,js,scss}/**/*"
    - "node_modules/sweetalert2/src"
    - "node_modules/font-awesome/fonts"
  # Paths to Sass libraries, which can then be loaded with @import
  sass:
    - "node_modules/foundation-sites/scss"
    - "node_modules/motion-ui/src"
    - "node_modules/sweetalert2/src"
    - "node_modules/font-awesome/scss"

app.scss

// import custom scss
@import "custom-styles";
@import 'sweetalert2';
@import 'font-awesome';

Michal Pandyra over 2 years ago

Hi Greg,

I provided detailed instructions on how to include FontAwesome with 6.4.1 in one of your other posts when you were experiencing problems with the spam bot. Unfortunately it seems that post has been deleted. I'm going through my comments now to see if I can dig it up.

Because FontAwesome is strictly a CSS library, there's no need to make any changes to your anything in your `/assets/js/` folder. Those instructions are strictly for including third-party JavaScript libraries.

Michal Pandyra over 2 years ago

Here's the method I use for installing FontAwesome with the new 6.4 branch of Foundation for Sites.

 

  1. Install the NodeJs "font-awesome" package using npm
    npm install font-awesome --save
  2. Add the FontAwesome paths to your config.yml file
    PATHS:
      assets:
        - "node_modules/font-awesome/**/*"
        - "!node_modules/font-awesome/{css,less,scss}/**/*"
      sass:
        - "node_modules/font-awesome/scss"

     

  3. Add FontAwesome to the bottom of your app.scss file
    @import 'font-awesome';

     

Here's a quick breakdown of what we're doing.

Foundation Zurb Template has done away with Bower which, in theory, will make managing packages and dependencies much easier moving forward.

Here's a quick breakdown of what's going on

 

  1. We're installing the "font-awesome" package from NodeJs and saving it to our package.json file as a dependency. I don't believe there's an official npm release of FontAwesome, none that I see listed on their official website, at least. This one, however, does see regular updates and it's the one most frequently referenced when associating FontAwesome with NodeJs.

  2. We're adding a few paths to the configuration.

    • The "assets" line copies the necessary font files into our "dist" directory. First we're copying the folder structure that comes with FontAwesome, then we're ignoring all files except those in the "fonts" folder. This ensures that your FontAwesome fonts will live at "/assets/fonts/" while your css lives at "/assets/css" important because FontAwesome's @font-face rules use relative paths.

      If you want to change where the fonts live you're free to do so, but you'll have to update the path that appears in the css. Adding the $fa-font-path variable in your _settings.scss file will do the trick. By default FontAwesome sets it to "../fonts"


    • The "sass" line tells gulp-sass to include the path FontAwesome's .sass files when generating the output. When you use @import in the line below, Gulp-sass will look for the requested .sass file in this location.

  3. We're adding FontAwesome to our SCSS structure so that the CSS is generated when we process. This appears at the bottom so that changes made to $fa-* variables in _settings.scss will be accounted for.

Greg Brown over 2 years ago

YESSSSSS!!!  Finally, it is working thanks to you Michal!!!

I had everything correct except I was missing the line

- "!node_modules/font-awesome/{css,less,scss}/**/*"

I have spent 2 days trying to figure this out.  You are a lifesaver.  I would have figured it our a lot earlier from one of your previous replies had it not been deleted as spam.

Thank you so much for your patience!!

Greg

Val Ery over 2 years ago

The easiest way to add FontAwesome to a project.

Initial data: Foundation CLI version 2.2.3, Foundation 6.4.1, Zurb Template

1. Download FontAwesome and unpack the archive.
2. Copy the contents of 'scss' directory to the project's 'src/assets/scss/components' directory.
3. Copy the contents of 'fonts' catalog directly to the 'src/assets' directory.
4. In project's app.scss file add a string

@import 'components/font-awesome';

5. Check $fa-font-path in _variables.scss.

$fa-font-path: "../fonts" !default;