Add font-awesome

[ChangJoo-Park]

I create some app, so I add font-awesome by bower command

bower install --save-dev font-awesome

add code in app.scss

`@import "font-awesome"

after npm start

I get error below

foundation-apps-template@1.1.0 start /Users/ChangJooPark/Development/foundation-Apps/testApp gulp

[16:56:13] Using gulpfile ~/Development/foundation-Apps/testApp/gulpfile.js [16:56:13] Starting 'build'... [16:56:13] Starting 'clean'... [16:56:13] Finished 'clean' after 7.62 ms [16:56:13] Starting 'copy'... [16:56:13] Starting 'copy:foundation'... [16:56:13] Finished 'copy:foundation' after 535 ms [16:56:13] Starting 'sass'... [16:56:14] Starting 'uglify:foundation'... [16:56:14] Starting 'uglify:app'... [16:56:14] Finished 'copy' after 1.23 s [16:56:14] Finished 'uglify:app' after 224 ms [16:56:14] Finished 'uglify:foundation' after 546 ms [16:56:14] Starting 'uglify'... [16:56:14] Finished 'uglify' after 15 μs [16:56:15] Finished 'sass' after 1.72 s [16:56:15] Starting 'copy:templates'... [16:56:15] Finished 'copy:templates' after 35 ms [16:56:15] Finished 'build' after 2.32 s [16:56:15] Starting 'server'... [16:56:15] Webserver started at http://localhost:8079 [16:56:15] Finished 'server' after 426 ms [16:56:15] Starting 'default'... [16:56:15] Finished 'default' after 28 ms [16:57:35] Starting 'sass'... [16:57:35] Finished 'sass' after 586 ms [16:58:30] Starting 'sass'...

events.js:141 throw er; // Unhandled 'error' event ^ Error: client/assets/scss/app.scss 3:9 file to import not found or unreadable: font-awesome Current dir: at options.error (/Users/ChangJooPark/Development/foundation-Apps/testApp/node_modules/gulp-sass/node_modules/node-sass/lib/index.js:277:32)

npm ERR! Darwin 15.0.0 npm ERR! argv "/usr/local/var/nvm/versions/node/v4.1.0/bin/node" "/usr/local/var/nvm/versions/node/v4.1.0/bin/npm" "start" npm ERR! node v4.1.0 npm ERR! npm v3.3.3 npm ERR! code ELIFECYCLE npm ERR! foundation-apps-template@1.1.0 start: gulp npm ERR! Exit status 1 npm ERR! npm ERR! Failed at the foundation-apps-template@1.1.0 start script 'gulp'. npm ERR! This is most likely a problem with the foundation-apps-template package, npm ERR! not with npm itself. npm ERR! Tell the author that this fails on your system: npm ERR! gulp npm ERR! You can get their info via: npm ERR! npm owner ls foundation-apps-template npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request: npm ERR! /Users/ChangJooPark/Development/foundation-Apps/testApp/npm-debug.log

how to add font-awesome using bower?

[stephaniepurvis]

You need to add the font-awesome folder to the gulp.js file. Look for this in that file and make sure you add the line for font-awesome:

  // Sass will check these folders for files when you use @import.
  sass: [
    'client/assets/scss',
    'bower_components/foundation-apps/scss',
    'bower_components/font-awesome/scss'
  ],

[Cethy]

On the current version (or only on the "advanced template", idk I only use this one), the sass config should be modified in config.yml.

Additionally, you need to modify or create a new gulp task to handle the copy of the fonts in the dist/ directory. Something like this :

// Copy fonts to the "dist" folder
function fonts() {
  return gulp.src("bower_components/font-awesome/fonts/**.*")
    .pipe(gulp.dest(PATHS.dist + '/assets/fonts'));
}