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.

Answer 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 %>'         }]     } }