Menu icon Foundation
Please help installing Font Awesome

For some reason my other post is giving me an error saying it was removed for spam.

I am having problems installing Font Awesome.  I had a few responses on my previous post asking me what version of Foundation I am running.  I am using Foundation 6.4.1.

The instructions I found for the bower install of Font Awesome don't work.  If someone could guide me through the steps I would greatly appreciate it.

Thanks,

Greg

font awesomeinstall

For some reason my other post is giving me an error saying it was removed for spam.

I am having problems installing Font Awesome.  I had a few responses on my previous post asking me what version of Foundation I am running.  I am using Foundation 6.4.1.

The instructions I found for the bower install of Font Awesome don't work.  If someone could guide me through the steps I would greatly appreciate it.

Thanks,

Greg

Michal Pandyra about 1 month ago

Hi Greg,

I saw your earlier post and posted this same response. Though, I'm also having an issue with posts being flagged as spam. Bot is on the fritz!

Could you clarify whether you are 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 verify the version I'll try to provide instructions that best suit your version. Thanks!

Greg Brown about 1 month ago

Michal,

Thanks for your response.  I am using Foundation 6.4.1.

Thanks again,

Greg

Michal Pandyra about 1 month 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';

     

Greg Brown about 1 month ago

Thanks Michal,

I tried your method and it's not working for me.  When I start foundation watch it produces this error.

[BS] Serving files from: dist
Error in plugin 'sass'
Message:
    src/assets/scss/app.scss
Error: File to import not found or unreadable: font-awesome
       Parent style sheet: /Users/browngd/dev/foundation/dashboard/src/assets/scss/app.scss
        on line 6 of src/assets/scss/app.scss
>> @import 'font-awesome';
   ^

It seems to be an issue with the path to  font awesome, but I can confirm that it is there,

Thanks,

Greg

 

Michal Pandyra about 1 month ago

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.

  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 CSS uses 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"


    • This tells gulp-sass to include FontAwesome's .sass files when generating the output.

  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.

Ron Willems 8 days ago

Hi Michal,

I tried to install awesome fonts the way you stated. Unfortunately I did not succeed.I noticed next to package.json a new file has been created named: package-lock.json. foundation watch results in errors. Can you help me?

Michal Pandyra 8 days ago

Hi Ron,

Did your console report any errors when installing the npm package? What are the errors npm is returning when you are running the watcher?

Ron Willems 7 days ago

Hi Michal.

 

I guess I solved the problem! But I am happy to share it with all of you.

I am working on RHEL 7

I installed a fresh "Foundation new" instancE.

Next I initiated "Foundation Watch" command. Everything worked as expected.

Next I installed "npm install font-awesome --save"

Edit config.yml

#### config.yml (Edited with font-awesome setings)

 

# UnCSS will use these settings

UNCSS_OPTIONS:

  html:

    - "src/**/*.html"

  ignore:

    - !!js/regexp .foundation-mq

    - !!js/regexp ^\.is-.*

 

# Gulp will reference these paths when it copies files

PATHS:

  # Path to dist folder

  dist: "dist"  

  # Paths to static assets that aren't images, CSS, or JavaScript

  assets:

    - "src/assets/**/*"

    - "!src/assets/{img,js,scss}/**/*"

    - "node_modules/font-awesome/**/*"

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

  # Paths to Sass libraries, which can then be loaded with @import

  sass:

    - "node_modules/foundation-sites/scss"

    - "node_modules/motion-ui/src"

    - "node_modules/font-awesome/scss"

  # Paths to JavaScript entry points for webpack to bundle modules

  entries:

    - "src/assets/js/app.js"

 

Next I edited App.scss

 

#### App.scss

 

@charset 'utf-8';

 

@import 'settings';

@import 'foundation';

@import 'motion-ui';

 

@include foundation-global-styles;

// @include foundation-grid;

// @include foundation-flex-grid;

//

@include foundation-xy-grid-classes;

@include foundation-typography;

@include foundation-button;

@include foundation-forms;

// @include foundation-range-input;

@include foundation-accordion;

@include foundation-accordion-menu;

@include foundation-badge;

@include foundation-breadcrumbs;

@include foundation-button-group;

@include foundation-callout;

@include foundation-card;

@include foundation-close-button;

@include foundation-menu;

@include foundation-menu-icon;

@include foundation-drilldown-menu;

@include foundation-dropdown;

@include foundation-dropdown-menu;

@include foundation-responsive-embed;

@include foundation-label;

@include foundation-media-object;

@include foundation-off-canvas;

@include foundation-orbit;

@include foundation-pagination;

@include foundation-progress-bar;

@include foundation-slider;

@include foundation-sticky;

@include foundation-reveal;

@include foundation-switch;

@include foundation-table;

@include foundation-tabs;

@include foundation-thumbnail;

@include foundation-title-bar;

@include foundation-tooltip;

@include foundation-top-bar;

@include foundation-visibility-classes;

// @include foundation-float-classes;

@include foundation-flex-classes;

 

// @include foundation-prototype-classes;

 

@include motion-ui-transitions;

@include motion-ui-animations;

 

 

@import 'font-awesome';

 

Next I initiated "Foundation Watch" again

 

####  Again running foundation watch

 

[rwillems@thinkserver rapid]$ foundation watch

 

> foundation-zurb-template@1.0.0 start /home/rwillems/websites/rapid

> gulp

 

[11:19:23] Requiring external module babel-register

[11:19:25] Using gulpfile ~/websites/rapid/gulpfile.babel.js

[11:19:25] Starting 'default'...

[11:19:25] Starting 'build'...

[11:19:25] Starting 'clean'...

[11:19:25] Finished 'clean' after 9.4 ms

[11:19:25] Starting 'pages'...

[11:19:25] Starting 'sass'...

[11:19:25] Starting 'javascript'...

[11:19:25] Starting 'images'...

[11:19:25] Starting 'copy'...

[11:19:26] Finished 'images' after 682 ms

[11:19:26] Finished 'pages' after 803 ms

[11:19:28] Finished 'sass' after 3.43 s

[11:19:31] Version: webpack 2.7.0

 Asset    Size  Chunks                    Chunk Names

app.js  678 kB       0  [emitted]  [big]  app

[11:19:31] Finished 'javascript' after 5.74 s

[11:19:31] Finished 'copy' after 5.75 s

[11:19:31] Starting 'styleGuide'...

[11:19:31] Finished 'styleGuide' after 46 ms

[11:19:31] Finished 'build' after 5.81 s

[11:19:31] Starting 'server'...

[11:19:31] Finished 'server' after 34 ms

[11:19:31] Starting 'watch'...

[11:19:31] 'watch' errored after 34 ms

[11:19:31] Error: watch src/assets ENOSPC

    at exports._errnoException (util.js:1020:11)

    at FSWatcher.start (fs.js:1443:19)

    at Object.fs.watch (fs.js:1470:11)

    at createFsWatchInstance (/home/rwillems/websites/rapid/node_modules/gulp/node_modules/glob-watcher/node_modules/chokidar/lib/nodefs-handler.js:37:15)

    at setFsWatchListener (/home/rwillems/websites/rapid/node_modules/gulp/node_modules/glob-watcher/node_modules/chokidar/lib/nodefs-handler.js:80:15)

    at FSWatcher.NodeFsHandler._watchWithNodeFs (/home/rwillems/websites/rapid/node_modules/gulp/node_modules/glob-watcher/node_modules/chokidar/lib/nodefs-handler.js:228:14)

    at FSWatcher.NodeFsHandler._handleDir (/home/rwillems/websites/rapid/node_modules/gulp/node_modules/glob-watcher/node_modules/chokidar/lib/nodefs-handler.js:407:19)

    at FSWatcher.<anonymous> (/home/rwillems/websites/rapid/node_modules/gulp/node_modules/glob-watcher/node_modules/chokidar/lib/nodefs-handler.js:455:19)

    at FSWatcher.<anonymous> (/home/rwillems/websites/rapid/node_modules/gulp/node_modules/glob-watcher/node_modules/chokidar/lib/nodefs-handler.js:460:16)

    at FSReqWrap.oncomplete (fs.js:123:15)

[11:19:31] 'default' errored after 5.88 s

Error: foundation-zurb-template@1.0.0 start: `gulp`

Exit status 1

    at EventEmitter.<anonymous> (/home/rwillems/.node_modules_global/lib/node_modules/foundation-cli/node_modules/npm/lib/utils/lifecycle.js:217:16)

    at emitTwo (events.js:106:13)

    at EventEmitter.emit (events.js:191:7)

    at ChildProcess.<anonymous> (/home/rwillems/.node_modules_global/lib/node_modules/foundation-cli/node_modules/npm/lib/utils/spawn.js:24:14)

    at emitTwo (events.js:106:13)

    at ChildProcess.emit (events.js:191:7)

    at maybeClose (internal/child_process.js:891:16)

    at Process.ChildProcess._handle.onexit (internal/child_process.js:226:5)

 

Notice L [11:19:31] Error: watch src/assets ENOSPC

 

My Solution: 

SOLUTION:

 

echo fs.inotify.max_user_watches=524288 | sudo tee -a /etc/sysctl.conf && sudo sysctl -p

 

Problem solved

 

2 days research. Desperate looking for solution.

and now I am happy to share with you.

Michal, Many thanks for your swift reply

 

Ron

Greetz

Michal Pandyra 7 days ago

Good morning Ron,

Looks as though this is a lower level issue specific to the operating system's kernel. Not necessarily to do with the matter at hand, but it's great to be aware of it and have a solution in our back pocket.

Thanks for sharing.

Mitsurugi Meza 7 days ago

also can use a cdn ...

 

   <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">

that is the cdn i use to get fon awesome working with no errors... :O

Katie 2 days ago

Another possibility is to get it from jsdelivr, which also have a whole bunch of other JS files.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/fontawesome/4.7.0/css/font-awesome.min.css" integrity="sha256-eZrrJcwDc/3uDhsdt61sL2oOBY362qM3lon1gyExkL0=" crossorigin="anonymous" />

There are performance benefits from getting it from a CDN, same with all the other common files, it might mean that someone downloaded the file for a different site and it is already on their device. Saving the time and bandwidth to get it again.