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:
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.
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.
Christophe's version didn't work for me.
This worked for me:
{
expand: true,
cwd: 'bower_components/font-awesome',
src: 'fonts/*',
dest: '<%= yeoman.dist %>'
}
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.