Font-awesome not working with yeoman generator pushed to Heroku

All we need is an easy explanation of the problem, so here it is.

I’m using the Yeoman generator “angular-fullstack”. With a freshly generated “angular-fullstack” scaffold, I perform a
bower install --save components-font-awesome then add in a font-awesome icon to the main.html template, build and push it up to heroku, and I see a grey box where the icon should be.

However, if I perform a grunt serve locally, I can see the icon as I expect.

I don’t know if this is a Yeoman Angular-fullstack issue, grunt issue, font-awesome issue or Heroku issue so I’m throwing it out there. Maybe someone can help limit this down.

Note: I’m using “components-font-awesome” instead of “font-awesome” because grunt won’t build font-awesome correctly so it was advised to use the shim.

What I see when served locally: enter image description here

What I see when built and pushed to heroku:enter image description here

How to solve :

I know you bored from this bug, So we are here to help you! Take a deep breath and look at the explanation of your problem. We have many solutions to this problem, But we recommend you to use the first method because it is tested & true method that will 100% work for you.

Method 1

In this version of the Yeoman angular-fullstack generator, the grunt build command builds the delivered files under the dist directory. The other stackoverflow answer (that was referenced in the comments above) hinted to put the font-awesome fonts directory directly under the dist level. However, the served files are under dist/public. Therefore, it’s under the public directory where the fonts directory currently exists and the font-awesome font files should be placed.

To make this work with the existing grunt build, I pre-copied the font-awesome font files into the app/fonts directory. This way, the grunt build automatically copies the files into the dist/public/fonts directory.

Method 2

To complement the accepted answer, here is the way to go:

Add the following to Gruntfile.js in the copy.dist.files section:

{ 
  expand: true,
  cwd: '<%= yeoman.app %>/bower_components/font-awesome', 
  src: 'fonts/*', 
  dest: '<%= yeoman.dist %>' 
}

I created a distinct answer as suggested by other comments.

Method 3

Christophe’s version didn’t work for me.

This worked for me:

{
  expand: true,
  cwd: 'bower_components/font-awesome',
  src: 'fonts/*',
  dest: '<%= yeoman.dist %>'
}

Method 4

Solution for using font-awesome.css

This is what worked for me:

If install font-awesome via bower, open “bower_components/font-awesome/bower.json” and find the following block of code:

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

Add the CSS to this “main” node array:

"main": [
    "less/font-awesome.less",
    "scss/font-awesome.scss",
    "css/font-awesome.css"
],

Start your server, or stop/start if it’s already running, and font-awesome css ‘should’ now be injected.

Note: Use and implement method 1 because this method fully tested our system.
Thank you 🙂

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply