I did something like:

gulp.task('html', ['inject', 'partials'], function () {
...
return gulp.src(paths.tmp + '/serve/*.html')
  ...
  .pipe($.replace('../bower_components/bootstrap-sass-official/assets/fonts/bootstrap', 'fonts'))
  .pipe($.replace('../bower_components/fontawesome/fonts', 'fonts'))
  ...

As the fonts should be automatically copied to dist/fonts.

Also to get the bootstraph glyphicons working for gulp serve:dist (as above) I had to replace:

.pipe($.replace('../bootstrap-sass-official/assets/fonts/bootstrap', 'fonts'))`

with:

.pipe($.replace('../bower_components/bootstrap-sass-official/assets/fonts/bootstrap', 'fonts'))`

Which might be an issue with the generator or I'm just doing something wrong ...

The current font task only copy fonts declared in bower packages. It's the case for bootstrap, I don't know for fontawesome. After that we put the font in a specific directory.

Secondly, we have to replace the font path as you seen to point the right directory in the dist directory structure.

First of all, have you your font files in the dist directory ?

Also my bad in my previous comment. I was using an different version of font awesome that didn't have the fonts declared in bower.json. In the current version I didn't need to declare anything extra and it magically added everything from ./bower_components/font-awesome.

One thing though, is the new font awesome causes an error if the .woff2 font isn't copied to the ./dist/fonts and I had to add it manually:

gulp.task('fonts', function () {
  return gulp.src($.mainBowerFiles())
    .pipe($.filter('**/*.{otf,eot,svg,ttf,woff,woff2}'))
...

yeah, woff2 has been added recently to the scripts and not released yet i think

Awesome. It's all working now. The scss import looks like

$fa-font-path: "../../bower_components/fontawesome/fonts";
@import "../../bower_components/fontawesome/scss/font-awesome.scss";

and I had to add a step to the html pipeline

.pipe($.replace('../../bower_components/fontawesome/fonts', '../fonts'))

@domoritz I'm sorry, but how did you achieve to get it working in development? Could you post the complete steps? Thank you

Edit - also, could you say which version of font-awesome was used? Mine here was installed by bower install fontawesome --save and it only lists the less/scss in the main bower part.

Edit 2 - Ok, for development I just did what you said up here with a little change to the path since mine has a dash, so:

$fa-font-path: "../../bower_components/font-awesome/fonts";
@import "../../bower_components/font-awesome/scss/font-awesome.scss";

...and now it works on development, but still doesn't for production (gulp build), would you mind helping me around?

Our project is here. https://github.com/uwdata/polestar

I'm having the same problem, fontawesome works with serve but not included in dist folder after build

To get it working for serve:dist a workaround could be found at issue #637.
Best regards,
Chris

Just in case, for LESS solution will be:

• index.less:

@import "../../bower_components/font-awesome/less/font-awesome.less";
$fa-font-path: "../../bower_components/font-awesome/fonts";

• gulp/build.js

.pipe($.replace('../../bower_components/font-awesome/fonts', '../fonts/'))

+1

@claboran i tried that solution but still not sure how to do with font-awesome, how am i supposed to do it? is there any fix or do i have to manually copy the font awesome folder?

@dgoncalves1 I've been struggling with this and my solution was:

1. Make the SCSS imports:

   $fa-font-path: "../../bower_components/fontawesome/fonts";
@import "../../bower_components/fontawesome/scss/font-awesome.scss";

With this step you'll see FA icons in dev mode (src).

2.In gulp/build.js there's a task called html, you must add this pipe:

.pipe($.replace('../../bower_components/fontawesome/fonts', '../fonts'))

So far, it's the solution proposed in recipes and everything works great in dev mode BUT when you run the BUILD task it won't copy FA fonts to the dist/fonts folder because they must be declared in your bower.json as an override like this:

"font-awesome": {
      "main": [
        "scss/font-awesome.scss",
        "fonts/*"
      ]
}

I used a wildcard, inside the file Bootstrap fonts are declared explicitly, that's your choice. Hope this helps.

@olimungo you ONLY edited the bower.json?

And are you using CSS, LESS or SASS?

@poliveira89 Yes, that's what I like in this solution. And I used Sass with Node.

@olimungo but for what I have been looking for on "fonts" task with gulp-debug the problem is that the fonts files is not delivered by $.mainBowerFiles() so when the stream reaches the .pipe($.filter('**/*.{eot,svg,ttf,woff,woff2}')) it's handling 0(zero) files :/

But if I "override" it like you say, in theory the problem will be the same... :/

@danieldiazastudillo Thanks. Now my project works well after running build task.

Its not working my dist folder. My console is throwing this error.

http://localhost:3000/bower_components/font-awesome/fonts/fontawesome-webfont.woff2?v=4.4.0 Failed to load resource: the server responded with a status of 404 (Not Found)

I added in gulp/build.js
.pipe($.replace('../../bower_components/fontawesome/fonts', '../fonts'))

In index.scss
$fa-font-path: '../../bower_components/font-awesome/fonts';
@import '../../bower_components/font-awesome/scss/font-awesome.scss';

Its working fine in serve but not in build

The recipe seems incomplete because when you build to dist using the the gulp command, the font-awesome icon files from its bower package will not be copied to the folder: dist/fonts/

You will need to modify the bower.json of your project for the files to be copied:

...
  "devDependencies": {
    "angular-mocks": "~1.4.2"
  },  
 "overrides": {
    "bootstrap-sass": {
      "main": [
        "assets/stylesheets/_bootstrap.scss",
        "assets/fonts/bootstrap/glyphicons-halflings-regular.eot",
        "assets/fonts/bootstrap/glyphicons-halflings-regular.svg",
        "assets/fonts/bootstrap/glyphicons-halflings-regular.ttf",
        "assets/fonts/bootstrap/glyphicons-halflings-regular.woff",
        "assets/fonts/bootstrap/glyphicons-halflings-regular.woff2"
      ]
    },
    "font-awesome": {
      "main": [
        "scss/font-awesome.scss",
        "fonts/fontawesome-webfont.eot",
        "fonts/fontawesome-webfont.svg",
        "fonts/fontawesome-webfont.ttf",
        "fonts/fontawesome-webfont.woff",
        "fonts/fontawesome-webfont.woff2"
      ]
    }
  }
...

Then, you will need to modify the gulp/build.js (lines 53 and 54 in the 'html' task) file to make sure that the path to these font-awesome font files is correct:

...
.pipe($.replace('../../bower_components/bootstrap-sass/assets/fonts/bootstrap/', '../fonts/'))
.pipe($.replace('../../bower_components/font-awesome/fonts', '../fonts'))
...

And finally, you will need to specify the $fa-font-path in you scss file (ie. index.scss):

...
// Bootstrap icon font
$icon-font-path: "../../bower_components/bootstrap-sass/assets/fonts/bootstrap/";

// Font awesome fonts
$fa-font-path: "../../bower_components/font-awesome/fonts";
...

gulp serve : fonts are OK
gulp or gulp build : fonts are OK (build in dist)

Hope it helps and that I didn't forget anything. ;-)

We installed font awesome via this shim repository:

https://github.com/components/font-awesome

and it works just fine. Probably because their bower.json correctly lists all the font files.

I had the same issue when using gulp build task but gulp serve, and i fixed it by @gablabelle 's solution, thanks!

Same for me - @gablabelle 's solution works, many thanks! Just something that took me quite a while, even though it was pretty obvious: make sure to do the replacements in build.js after

...
    .pipe(cssFilter.restore)
...

just tried it again without the shim and yes, the recipe is incomplete, @gablabelle version works!

Correction: it made it work for gulp serve:dist - it broke in gulp serve.
Not sure why. Switched back to the shim repo for now.

@mzellhofer why do we need to put it after cssFilter.restore to work correctly? It actually works when I do that, but I cannot grasp why...

moving down the font awesome replace is not working though

 .pipe(cssFilter.restore)
 .pipe($.replace('../../bower_components/bootstrap/fonts/', '../fonts/'))

anything else for proper working ? even all my fonts are being copied to dist/fonts folder

thanks @gablabelle ; I have followed your steps but with minimal changes; and now running gulp serve:dist also have the fonts and icons here it is

bower.json

 "overrides": {
   "font-awesome": {
      "main": [
        "less/font-awesome.less",
        "scss/font-awesome.scss"
      ]
    }
  },

in build.js
move down the .replace and add one more line for fontawesome

gulp.task('html', ['inject', 'partials'], function () {
....
.pipe(cssFilter.restore)
    .pipe($.replace('../../bower_components/bootstrap/fonts/', '../fonts/'))
    .pipe($.replace('../../bower_components/fontawesome/fonts/', '../fonts/'))

also added otf in gulp.task('font')

gulp.task('fonts', function () {
  return gulp.src($.mainBowerFiles())
    .pipe($.filter('**/*.{otf,eot,svg,ttf,woff,woff2}'))
    .pipe($.flatten())
    .pipe(gulp.dest(path.join(conf.paths.dist, '/fonts/')));
});

Pay attention to FontAwesome folder name: now it is fontawesome and not font-awesome (with a little dash) as wrote many times in this issue.