Foundation + Fontawesome + npm + bower + gulp

Para poder utilizar los paquetes Foundation de Zurb y Font-Awesome y  desarrollar una web usando npm con gulp debemos hacer los siguientes pasos en Debian:

Instalar npm y resolver sus dependencias en Debian como explicaba en el articulo precedente.

Elegir el paquete npm de FontAwesome que prefiramos, en nuestro caso Font-Awesome ya que tiene más instalaciones, aunque Fontawesome parece estar más actualizado.

Dentro del directorio de nuestro proyecto, para poder utilizar font-awesome:

 :~$ npm install font-awesome

Luego seguiremos los pasos indicados para activar font-awesome con bower en gulp

$ bower install font-awesome --save

añadir o modificar estos parametros del config.yml:

$ vim config.yml


#assets:
- "src/assets/**/*"
- "!src/assets/{img,js,scss,fonts}/**/*"
#fonts:
- "src/assets/fonts/*"
- "bower_components/font-awesome/fonts/*"
# Paths to Sass libraries, which can then be loaded with @import sass:
- "bower_components/foundation-sites/scss"
- "bower_components/motion-ui/src"
- "bower_components/font-awesome/scss"

añadir o modificar estos parametros del gulpfile.babel.js:

$ vim gulpfile.babel.js

modificar

// Build the "dist" folder by running all of the below tasks
gulp.task('build',
gulp.series(clean, gulp.parallel(pages, sass, javascript, images, fonts, copy), styleGuide));

añadir

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

NOTA: si da error al arrancar npm, puede ser que no encuentre el PATH hasta las fuentes, en este caso copiar las mismas desde el directorio
bower_components/font-awesome/fonts/
hasta
assets/fonts/
y sustituir
(PATSH.fonts)
por
(‘src/assets/fonts/**/*’)

modificar

// Watch for changes to static assets, pages, Sass, and JavaScript
function watch() {
gulp.watch(PATHS.assets, copy);
gulp.watch('src/pages/**/*.html').on('all', gulp.series(pages, browser.reload));
gulp.watch('src/{layouts,partials}/**/*.html').on('all', gulp.series(resetPages, pages, browser.reload));
gulp.watch('src/assets/scss/**/*.scss').on('all', gulp.series(sass, browser.reload));
gulp.watch('src/assets/js/**/*.js').on('all', gulp.series(javascript, browser.reload));
gulp.watch('src/assets/img/**/*').on('all', gulp.series(images, browser.reload));
gulp.watch('src/assets/fonts/**/*').on('all', gulp.series(fonts, browser.reload));
gulp.watch('bower_components/font-awesome/fonts/*').on('all', gulp.series(fonts, browser.reload));
gulp.watch('src/styleguide/**').on('all', gulp.series(styleGuide, browser.reload));
}

añadir estos parametros del app.scss:

$ vim src/assets/scss/app.scss


@import "font-awesome";

finalmente arrancar npm para utilizar font-awesome

$ npm start

Articulo adaptado de :
http://foundation.zurb.com/forum/posts/46991-howto-foundation-6-font-awesome-and-other-asset-fonts