Font - awesome, not working with the generator yeomen, pushed to Heroku

Question

I am using the Yeoman "angular -fullstack" generator. Using the newly created “angular-full shelving” I do bower install --save components-font-awesome then add the font-awesome icon to the main.html template, create and push it to the hero and I see a gray square where it should be icon.

However, if I run a local grunt serve , I see the icon as I expect.

I don’t know if this is a Yeoman Angular -fullstack problem, a grunt problem, a font problem or a Heroku problem, so I throw it there. Maybe someone can help limit this.

Note I use "components-font-awesome" instead of "font-awesome" because grunt will not create the font correctly, so using a pad is recommended.

What I see when serving locally:

What I see when building and clicking on the hero:

Answer 1

In this version of the Yeoman angular -fullstack generator, the grunt build creates the supplied files in the dist directory. Another stackoverflow answer (which was mentioned in the comments above) hinted at putting the font-awesome fonts directory directly below the dist level. However, the serviced files are under dist/public . Therefore, it is located in the public directory, where the fonts directory currently exists, and font font files must be placed.

To make this work with an existing grunt build , I previously copied the font font files into the app/fonts directory. Thus, grunt build automatically copies the files to the dist/public/fonts directory.

Answer 2

To complement the accepted answer, here is the way:

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

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

I created a great answer, as suggested by other comments.

Answer 3

The Christophe 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 you install font-awesome through bower, open "bower_components / font-awesome / bower.json" and find the following code block:

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

Add CSS to this “core” node array:

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

Start your server or stop / start it if it is already running and now the css 'should' font will be added.