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.
this will copy the fonts to where you need them.
I was able to fix the problem by adding the following to copy.dist.files:
I don't know what I was doing wrong but none of the proposed solutions worked for me. Whatever I tried, the production (distribution) release would not display the icons.
I ended up using the following components: https://github.com/philya/font-awesome-polymer-icons-generator and https://github.com/philya/font-awesome-polymer-icons
font-awesome-polymer-icons-generator
Note: python needed
It allows you to generate a font-awesome SVG icon set for the icons (you have in use) in your project.
As an example, say I want the icons
code, line-chart, github-alt
in my projects, then I'd generate them like so:This generates the file
build/myappname-icons.html
. This file then needs to be imported into my component just like any other component:then I can get the font-awesome icons like so:
i.e. I prefix the normal font-awesome name with the name I gave when I created the icon set.
font-awesome-polymer-icons
You can also just import the pre-built full set of font-awesome icons:
Keep in mind that this adds 300+KB to your distribution size and the author notes that it is not recommended for production use.
Here is the solution: https://stackoverflow.com/a/32128931/3172813
Hi the main issue is that the font files required by font-awesome css don't get copied after you run the grunt task and you may get 404 not found error the same can be verified if you open your chrome developer mode and look in the consoe or networks tab. The same issue may occur for bootstrap aswell.
Hence we need to modify the grunt task so that the all the font files get copied.
Add seperate copy task for font files .
Register the 'copy:fonts' task in grunt.registerTask so that it gets executed at the build time.
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.