Font-awesome not working with yeoman generator pushed to Heroku

Question

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:

What I see when built and pushed to heroku:

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

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

Answer 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 %>'
}

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