How to add fontawesome

[domoritz]

I'm struggling with getting fontawesome to work with the generated gulp.

I tried to copy the files with a new gulp task in build.js

gulp.task('fontawesome', function() {

  return gulp.src('bower_components/fontawesome/fonts/*.*')

    .pipe(gulp.dest(paths.dist + '/bower_components/fontawesome/fonts/'));
});

And added the following to the scss file.

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

This works fine for development but breaks in dist (because the relative location of the css file changes. How do I set up the paths correctly? Can I use the fonts task?

Or in other words. How do I make sure that relative paths to fonts in scss don't break in production?

[martyla]

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

[Swiip]

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 ?

[martyla]

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}'))
...

[Swiip]

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

[domoritz]

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'))

[bsides]

@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?

[domoritz]

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

[Hesesses]

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

[claboran]

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

[disharmonized]

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

[adriangordon1231]

+1

[dannygoncalves]

@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?

[danieldiazastudillo]

@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.

[claboran]

@dgoncalves1 : Did it work now for serve:dist?

[j0hnsmith]

It took me a while to get Font Awesome working so I'm adding what I did (I think things have changed since some comments above were written).

bower install --save fontawesome  // gives me "font-awesome": "fontawesome#~4.4.0"

serve

In index.less, only update the @fa-font-path variable (less) or $fa-font-path (I guess) for sass, no manual imports are necessary.

...
// endbower
@fa-font-path: "../../bower_components/font-awesome/fonts";
...

serve:dist

Modify the gulp fonts task to copy font files from bower_components (as suggested in #849 (comment)), and also modify the gulp html task to fix the path to the fonts.

gulp.task('html', ['inject', 'partials'], function () {
...
    .pipe($.replace('../../bower_components/font-awesome/fonts', '../fonts/'))
    .pipe(gulp.dest(path.join(conf.paths.dist, '/')))
...

[adriangordon1231]

Why not just use the cdn: https://www.bootstrapcdn.com/fontawesome/

[dannygoncalves]

@claboran haven't had the time to do it, as soon as I can I'll provide feedback.

[mattarau]

Hey guys,

I've been dealing with an issue that might be related to this. I'm using the latest release of the generator that already includes the .pipe($.replace('../../bower_components/font-awesome/fonts', '../fonts/')) line in the html task of the build.js file.

When running both from source or from dist, the ttf, woff and woff2 Font Awesome font files retrieve a 404 error on all browsers and no other font type (eot and svg) is loaded. The weird thing is that the icons are shown in all browsers but Firefox.

When building the project I can't find the fonts in the /dist/fonts/ folder which makes me wonder how can the broswers (but Firefox) show the icons if the fonts are not even there.

I found some known issues with Firefox that make the icons not appear in it, but they are all related to CDN Access Rights, but since I'm not using any CDN, I thought that I should ask here first.

I hope someone can help.
Cheers!

[poliveira89]

I have done what @danieldiazastudillo told but for LESS, and did not worked for me.

I have added this to my index.less between the parts that will be update with gulp tasks:

// bower:less
// endbower

[...]

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

[...]

// injector
// endinjector

And then on html gulp task I added into the pipe right after the line on bootstrap fonts:

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

And still does not work! :(

DEBUG specifications:

$ gulp --version
[01:25:52] CLI version 3.9.0
[01:25:52] Local version 3.9.0

$ npm --version
2.13.4

$ bower --version
1.5.3

$ node --version
v0.12.7

At last, the generator generator-gulp-angular@0.12.1

[olimungo]

Instead of modifying any file in the gulp build, I added the following section to my project's bower.json:

  "overrides": {
    "font-awesome": {
      "main": "css/font-awesome.css"
    }
  }

[poliveira89]

@olimungo you ONLY edited the bower.json?

And are you using CSS, LESS or SASS?

[olimungo]

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

[poliveira89]

@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... :/

[wonsikin]

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

[alaksandarjesus]

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

[gablabelle]

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

[codeofsumit]

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.

[Santino-Wu]

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

[mzellho]

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)
...

[codeofsumit]

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.

[runmael]

@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...

[xkeshav]

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

[zymr-keshav]

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

[McGiogen]

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.