Fontawesome is not working when project is built with grunt
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";