Fontawesome is not working when project is built with grunt

Question

I'm using the font library font awesome. It works when the project is not built/uglified with grunt.

But when I'm building the project with grunt it's not working. I get this error in console: .../fonts/fontawesome-webfont.woff?v=4.0.3 404 (Not Found)

I've scaffolded the project with yeoman.

This is my ref in index.html

    <!-- build:css styles/fontawesome.css -->
    <link rel="stylesheet" href="bower_components/font-awesome/css/font-awesome.min.css">
    <!-- endbuild -->

Any ideas what can be wrong?

Update I need to copy the folder /bower_components/font-awesome/fonts to dist/fonts. This needs to be done in the grunt-file. Probably under the "copy" options

copy: {
  dist: {
    files: [{
      expand: true,
      dot: true,
      cwd: '<%= yeoman.app %>',
      dest: '<%= yeoman.dist %>',
      src: [
        '*.{ico,png,txt}',
        '.htaccess',
        'bower_components/**/*',
        'images/{,*/}*.{gif,webp}',
        'styles/fonts/*'
      ]
    }, {
      expand: true,
      cwd: '.tmp/images',
      dest: '<%= yeoman.dist %>/images',
      src: [
        'generated/*'
      ]
    }]
  },

But I'm not really sure where to include this.

Solution 1

I had the same problem. The following code solved my problem.

copy: {
    dist: {
        files: [{
            expand: true,
            dot: true,
            cwd: '<%= config.app %>',
            dest: '<%= config.dist %>',
            src: [
                '*.{ico,png,txt}',
                '.htaccess',
                'images/{,*/}*.webp',
                '{,*/}*.html',
                'styles/fonts/{,*/}*.*'
            ]
        },{
            expand: true,
            dot: true,
            cwd: 'bower_components/bootstrap/dist', // change this for font-awesome
            src: ['fonts/*.*'],
            dest: '<%= config.dist %>'
        }]
    }
}

Solution 2

If you're using SASS in your project, I found a more straightforward way that doesn't involve changing the grunt file if anyone is interested:

http://likesalmon.net/use-font-awesome-on-yeoman-angularjs-projects/

Basically include these 2 lines at the top of your main.scss file and the fonts should work.

$fa-font-path: "/bower_components/font-awesome/fonts/";
@import "font-awesome/scss/font-awesome";

Solution 3

If you are using the complete grunt task stack from yeoman then the useminPrepare task builds a combined stylesheet from all stylesheets that you put in the build:css comment - as you do. (see https://github.com/yeoman/grunt-usemin for additional informations) After the build process is done this file - somewhat like "vendor.234243.css" is copied to the styles folder. That's why the path for your font is no longer valid. There are at least 2 possibilities to solve this:

1. You could remove the font-awesom css out of the build:css block:

   <link rel="stylesheet" href="bower_components/font-awesome/css/font-awesome.min.css">
   <!-- build:css styles/fontawesome.css -->
    this will be processed by useminPrepare 
   <!-- endbuild -->
   

2. Copy the fonts folder as a sibling to the styles folder by an aditional grunt task in your gruntfile.

Solution 4

I was able to fix the problem by adding the following to copy.dist.files:

{
   expand: true,
   flatten: true,
   src: 'bower_components/components-font-awesome/fonts/*',
   dest: 'dist/fonts' 
}

Solution 5

The simplest way to do this is to go to your own bower.json and add an overrides property.

{
  "name": "xxx",
  "version": "x.x.x",
  "dependencies": {
    ...,
    "fontawesome": "~4.0.3"
  },
  "devDependencies": {
    ...,
  },
  "overrides": {
    "fontawesome": {
      "main": [
        "./css/font-awesome.css"
      ]
    }
  }
}

You will have to copypasta the fonts from the fontawesome/fonts folder your your app/fonts folder manually. No editing of Gruntfile or SCSS or anything else required.

View more solutions

Comments

[brutalhonesty]

Thanks, this solved my issue of the missing fonts using the angular-fullstack generator.

[arcseldon]

for some reason, option 2) putting as sibling folder did not work for me. Understand why you suggested it as it made perfect sense. However, option 1) just excluding it and adding another target within copy grunt task to move it across worked - so if referencing the minified version of font-awesome anyhow this is a great solution. Thank you ! Wasted too many hours trying clever ways to deal with this. Simplest approach was the right one afterall.

[Urigo]

That is a great answer. how do you copy the fonts folder into the dist when you deploy the app? do you use copy task or usemin task or something else?

[lightalex]

@Urigo , @vegas-dev said in his answer : more straightforward way that doesn't involve changing the grunt fileso no files have to be changed in the Gruntfile.js file.

[John-Philip]

I followed this approach too, but something is changing the paths in the CSS from "../fonts/etc" in the original app/bower_components/font-awesome/css/font-awesome.css to "/bower_components/font-awesome/fonts/etc" in the resulting dist/styles/xxx.vendor.css. Anyone know why?

[nknj]

I had the same problem. See my answer here: stackoverflow.com/questions/23587597/…

[Joe Lewis]

For me it worked the second approach, creating a grunt task which will copy the font folder as sibling to the styles one.

[Bruno Peres]

I just had to replace config.dist to yeoman.dist and it worked perfectly!

[Ryan Shea]

Yes, I had the same problem. This should be yeoman.dist instead of config.dist. I think this might have something to do with a yeoman update.

[Ronnie]

@Ryan I'm pretty sure yeoman.dist vs config.dist is just the name defined in the grunt file. That name is configurable see this thread: stackoverflow.com/a/21422161/736967

[Coldstar]

THIS should be the answer. The 'answer' above does not apply to newer yeoman distros. No changes to grunt at all

[Bruno Peres]

My fontawesome installation was without a dash so it ended up as cwd: 'bower_components/fontawesome'

[windmaomao]

latest yeoman angularjs already wrote @import line, so the only line I added to make it work is $fa-font-path