Menu icon Foundation
How to use font Awesome with F4Apps

Hi All
Since the icon fonts are limited in Foundation for Apps and since this caught me out for a bit, I thought I'd put it on here in case someone else was having the same issue:

How to add fontawesome-fonts to foundation4apps

1. install using bower : bower install font-awesome
2. In the client/assets/scss/app.scss file, add the line: @import "font-awesome";
3. In the gulpfile.js - Look for the section containing:
// Sass will check these folders for files when you use @import.
sass: [
and add the following line: 'bower_components/font-awesome/scss/'

4. Next look for where it calls the Ionic SVG Icons in the same gulpfile.js
// Iconic SVG icons
Add the following line below the one that's there already :
gulp.src('./bower_components/font-awesome/fonts/**.*')
.pipe(gulp.dest('./build/assets/fonts/'));

5. Save both files and test, you should be able to use any of the font awesome fonts as normal.

appsicons

Hi All
Since the icon fonts are limited in Foundation for Apps and since this caught me out for a bit, I thought I'd put it on here in case someone else was having the same issue:

How to add fontawesome-fonts to foundation4apps

1. install using bower : bower install font-awesome
2. In the client/assets/scss/app.scss file, add the line: @import "font-awesome";
3. In the gulpfile.js - Look for the section containing:
// Sass will check these folders for files when you use @import.
sass: [
and add the following line: 'bower_components/font-awesome/scss/'

4. Next look for where it calls the Ionic SVG Icons in the same gulpfile.js
// Iconic SVG icons
Add the following line below the one that's there already :
gulp.src('./bower_components/font-awesome/fonts/**.*')
.pipe(gulp.dest('./build/assets/fonts/'));

5. Save both files and test, you should be able to use any of the font awesome fonts as normal.

Geoff Kimball almost 4 years ago

Awesome, thanks for the tip! We've had folks ask us about this here and there, so this would be useful to point people to.

Luca Ovov over 3 years ago

Hello!
I'm tryng to use font awesome with foundation6 but i cant find the lines described in the point 4 of the gulp file (i think ionic support have been removed).
Where i should put:
gulp.src('./bower_components/font-awesome/fonts/*.')
.pipe(gulp.dest('./build/assets/fonts/'));
Thanks!

Euan G over 3 years ago

Hi Luca

it's spelling mistake sorry it should read...

...4. Next look for where it calls the Iconic SVG Icons in the same gulpfile.js
// Iconic SVG icons
Add the following line below the one that's there already :
gulp.src('./bower_components/font-awesome/fonts/*.')
.pipe(gulp.dest('./build/assets/fonts/'));

Also I have not tried it with foundation 6 for sites only foundation for apps.

G over 3 years ago

Thank you... one tiny additional spelling error...

step4 should be...

 gulp.src('./bower_components/font-awesome/fonts/*.*') 
.pipe(gulp.dest('./build/assets/fonts/'));