Menu icon Foundation
HowTo: Foundation 6 Font Awesome and other asset fonts
bower install fontawesome --save

config.yml modify/add

  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"

gulpfile.babel.js

modify

// 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));

add

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

modify

// 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));
}

app.css

add

@import "font-awesome";

finaly

npm start

- have fun

Fontfont awesome

bower install fontawesome --save

config.yml modify/add

  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"

gulpfile.babel.js

modify

// 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));

add

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

modify

// 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));
}

app.css

add

@import "font-awesome";

finaly

npm start

- have fun

Luke over 2 years ago

That's awesome mate cheers!!

Tina Beil almost 2 years ago

@Stefan

Thanks for this detailed docu!

But there is one little mistake on the last point.

@import "font-awesome";

This should be added in app.scss not in app.css

Ramon Cardena almost 2 years ago

Thanks @Stefan! It's been really helpful!

Philippe Badize over 1 year ago

This works ! Many thanks @Stefan.

 

 

Nic Winn over 1 year ago

Why don't I have a YAML file?

I installed using the CLI.

 

 

foundation -v

Foundation CLI version 2.2.3

 

foundation new

? What are you building today? A website (Foundation for Sites) <-- (I SELECTED SITES)

? What's the project called? (no spaces) bpp

? Which template would you like to use? Basic Template: includes a Sass compiler

...

You're all set!

 

 ✓ New project folder created.

 ✓ Node modules installed.

 ✓ Bower components installed.

 

Now run foundation watch while inside the bpp folder.

 

 

foundation watch

My site is coming along and working fine. What am I doing differently on my set up to not have a config.yml file?

all my files

Nic Winn over 1 year ago

I think I just answered my own question.

It was the template choice. I ran it again as a test and selected ZURB instead of Basic.

choices

I was thinking I would get the kitchen sink including all the pages if I didn't select Basic.

So, for the record, it produced these files.

new file set

 

Michal Pandyra over 1 year ago

Just a quick note that this solution will not work with Foundation Zurb Template for 6.4 and onwards as it has done away with Bower for managing dependencies. The new solution is similar but relies on NPM instead. This is my suggested implementation which doesn't require any any changes to the gulpfile. Originally posted here.

  1. Install the NodeJs "font-awesome" package using npm

    npm install font-awesome --save

    We're installing the "font-awesome" package from NodeJs and saving it to our package.json file as a dependency.



  2. Add the FontAwesome paths to your config.yml file

    # Gulp will reference these paths when it copies files
    PATHS:
      dist: "dist"  
      assets:
        - "src/assets/**/*"
        - "!src/assets/{img,js,scss}/**/*"
    
        # Next two lines add location of FontAwesome font assets.
        - "node_modules/font-awesome/**/*"
        - "!node_modules/font-awesome/{css,less,scss}/**/*" #
    
      sass:
        - "node_modules/foundation-sites/scss"
        - "node_modules/motion-ui/src"
    
        # Next line adds FontAwesome SCSS assets
        - "node_modules/font-awesome/scss"
    
      entries:
        - "src/assets/js/app.js"

    The "assets" additions copy 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"

    The "sass" addition tells gulp-sass to include FontAwesome's .sass files when generating the output.

  3. Add FontAwesome to the bottom of your app.scss file

    @import 'font-awesome';

    Finally, 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.

Hope this helps!

 

Harsh Gupta about 1 year ago

Thnaks a lot :)