Implementing fonts into foundation sites

[geremyAB]

There should be a tutorial on how to add awesome f-i-f to the new foundation sites ( ZF6 ) , well, after searching some information here and there, I managed to download the fonts (SVG , WOFF , TTF ) and additional folders for operation. I leave here in case any of you served.

• Install via bower foundation-icon-fonts
• Add line to /src/assets/scss/app.scss : import ' _foundation-icons ' ;
• Gulpfile.js :
• Add in var PATHS SASS array: ' Bower_components / foundation -icon -fonts '
• Add tasks below sass task : // Foundation-icons gulp.task ( ' copyfonts ', function () { gulp.src ( './ bower_components / foundation -icon -fonts / ** / * . { ttf , woff , eof , svg }' ) .pipe ( gulp.dest ( ' dist / assets / css ')); } ) ;
• Add task to the sequence in the build task : sequence ( ' clean' , [ 'pages' , ' sass ', ' copyfonts ' 'javascript ' , 'images' , 'copy '] , ' Styleguide ' , done) ;
• Last watch for Changes When build: gulp.watch ( [ ' src / assets / SCSS / ** / * { ttf , woff , eof , svg } . '] [ ' copyfonts ']);

[philipp-jung]

Cheers man, helped me getting going with the ZURB template. Here is what I did

• in case you don't have bower installed globally, I had to do so via $ npm install -g bower
• install this beautiful icon package using bower install foundation-icon-fonts
• Add line to /src/assets/scss/app.scss : import ' _foundation-icons ' ;
• open config.yml and add at "sass" this

# includes foundation icons
    - "bower_components/foundation-icon-fonts"

• open your gulpfile in the project rootfolder 'gulpfile.babel.js'
• define this task after the sass-function

// This task kopiert die Iconfont ins css-verzeichnis
  function copyfonts() {
    return gulp.src('./bower_components/foundation-icon-fonts/**/*.{ttf,woff,eoff,svg}').pipe(gulp.dest('dist/assets/css'));
  };

• Add the task to the build sequence between sass and javascript, should look like this

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

• Add the changes to the function watch. Add to the last line gulp.watch(['src/assets/scss/**/* {tff,woff,eof,svg}.']['copyfonts'])

[AmaZili]

Larmor27 works fine with foundation-zurb-template at 6.2.3. Thanks to all of you, I was screwing around to get a solution for days.:-)

[luxumbra]

HOORAY! Thanks. This got things sorted for me too!