Fontawesome is not working when project is built w

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.

Answer 1

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.

Answer 2

As answered above this one worked very well for me too

 // Copies remaining files to places other tasks can use
    copy: {
      dist: {
        files: [{
          expand: true,
          dot: true,
          cwd: '<%= yeoman.app %>',
          dest: '<%= yeoman.dist %>',
          src: [
            '*.{ico,png,txt}',
            '.htaccess',
            '*.html',
            'scripts/components/{,*/}*.html',
            'images/{,*/}*.{webp,png,jpg,jpeg,gif}',
            'fonts/*',
            'styles/fonts/{,*/}*.*',
            'services/{,*/}*.json',
            'services/mocks/{,*/}*.json'
          ]
        }, {
          expand: true,
          cwd: '.tmp/images',
          dest: '<%= yeoman.dist %>/images',
          src: ['generated/*']
        }, {
          expand: true,
          cwd: '.tmp/concat/scripts',
          dest: '<%= yeoman.dist %>/scripts',
          src: '{,*/}*.js'
        }, {
          expand: true,
          cwd: '.tmp/concat/styles',
          dest: '<%= yeoman.dist %>/styles',
          src: '{,*/}*.css'
        }, {
          expand: true,
          cwd: '<%= yeoman.app %>',
          src: 'styles/Bootstrap/fonts/bootstrap/*',
          dest: '<%= yeoman.dist %>'
        }, {
          expand: true,
          cwd: 'bower_components/font-awesome/fonts/',
          src: ['*.*'],
          dest: '<%= yeoman.dist %>/fonts'
        }]
      }

Answer 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.

Answer 4

My solution was to go with a CDN approach:

<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet">

None of the answers worked for some reason.

Answer 5

If you're working with SailsJS and Bower, I've worked up a solution that fixes Fontawesome and Bootstrap font issues.

1. Ensure your tasks/config/bower.js looks similar to: https://gist.github.com/robksawyer/fc274120aef9db278eec
2. Added the npm module grunt-remove.
3. Create remove.js file in tasks/config: https://gist.github.com/robksawyer/2fcf036fdf02436aa90b
4. Update file tasks/register/compileAssets: https://gist.github.com/robksawyer/fa04a34ea103bead1c61
5. Update the tasks/config/copy.js file to: https://gist.github.com/robksawyer/2aac6d0cdb73bfa8239f

Answer 6

For those using Google App Engine, the following worked for me:

Add to Gruntfile.js:

copy: {
  build_font_awesome: {
    files: [
      {
         expand: true,
         flatten: true,
         src: 'vendor/components-font-awesome/fonts/*',
         dest: '<%= build_dir %>/fonts' 
      }
    ]
  },
  compile_font_awesome: {
    files: [
      {
         expand: true,
         flatten: true,
         src: 'vendor/components-font-awesome/fonts/*',
         dest: '<%= compile_dir %>/fonts' 
      }
    ]
  }
}

I am using LESS so I imported font-awesome.less by adding this to my main.less file.

@import '../../vendor/components-font-awesome/less/font-awesome.less';

Then I added this to my app.yaml file.

handlers:
- url: /fonts
  static_dir: static/fonts