3

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

padawanlvn
  • 399
  • 1
  • 4
  • 12
  • 1
    please have a look at this answer: http://stackoverflow.com/questions/21310382/fontawesome-is-not-working-when-project-is-built-with-grunt/21310885#21310885 – michael Feb 05 '14 at 07:38
  • that didn't help 1. I don't get any error in my console. 2. I already tried to declare the css outside my bower build area 3. I tried moving the fonts dir to under dist. I still get a grey box. – padawanlvn Feb 05 '14 at 07:49
  • I spoke too soon. Sorry Michael, that answer was good... it just needed to click in my head. I'll elaborate in my answer. – padawanlvn Feb 06 '14 at 06:13

4 Answers4

7

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.

padawanlvn
  • 399
  • 1
  • 4
  • 12
  • 1
    FYI, as of May 13th, 2014 not everything in "app" is copied over to dist. In my grunt file, I had a copy task that was copying over "fonts". Thats the default, in my particular case, I had "font" referenced in all my files. So change it based on what you need copied over, don't be afraid to mess around in the gruntfile.js. +1 padawanIvn for explaining – js_gandalf May 14 '14 at 02:17
  • 6
    To complement: just like bootstrap copies its fonts in Gruntfile.js, you should add `{ expand: true, cwd: '<%= yeoman.app %>/bower_components/font-awesome', src: 'fonts/*', dest: '<%= yeoman.dist %>' }` to your Gruntfile 'copy.dist.files' entry – Christophe Fondacci Jul 21 '14 at 00:38
  • @ChristopheFondacci +1 you should make that a separate answer. – eliot Oct 08 '14 at 02:09
  • The answer is to "Christophe". – windmaomao Jul 11 '15 at 14:51
7

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 Fondacci
  • 718
  • 12
  • 14
  • Did not work exactly like that, so I did the way it was done for bootstrap: `cwd: '.', src: 'bower_components/components-font-awesome/fonts/*', dest: '<%= yeoman.dist %>'` – youri Jun 03 '16 at 17:57
  • 1
    Has font-awesome changed its bower component directory? I see you are using `components-font-awesome` instead of `font-awesome`. I guess you can do it that way if you don't put `expand: true`, otherwise I would guess it is the same except the name of the component might have changed. – Christophe Fondacci Jun 03 '16 at 20:57
  • You are right, I remember I used the `components-font-awesome` shim because well... there was another issue with `font-awesome`. Anyway, I voted for your solution; the reader can simply adjust the folders if needed. – youri Jun 04 '16 at 19:23
0

Christophe's version didn't work for me.

This worked for me:

{
  expand: true,
  cwd: 'bower_components/font-awesome',
  src: 'fonts/*',
  dest: '<%= yeoman.dist %>'
}
ROMANIA_engineer
  • 54,432
  • 29
  • 203
  • 199
Kunal Gupta
  • 1
  • 3
0

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.

Scott
  • 772
  • 1
  • 11
  • 20