Font-awesome not working with yeoman generator pushed to Heroku
angularjs, gruntjs, heroku, javascript, yeoman
Solution
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.
Problem
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: