ngBoilerplate and Font Awesome - gruntjs

Question

I have a ngBoilerplate project, I would like to add Font Awesome to it.
I have installed Font Awesome with:
bower install font-awesome --save-dev
I then added the following to the build.config.js file:
css: [
'vendor/font-awesome/css/font-awesome.min.css'
],
assets: [
'vendor/font-awesome/fonts/*'
]
And I added the following to my src/less/variables.less file:
#fa-font-path: "../assets";
Now I would like to add a simple home icon to my site with:
<i class="fa fa-home"></i>
Instead now I get a ␦ (ascii, blank square) where the icon should be.
The Font Awesome CDN works fine but cant get it to work with bower.

Answer 1

So for some reason I get an intermittent error that the font files cant be found.
I amended the build.config.js and removed 'vendor/font-awesome/fonts/*'.
Then I configured Gruntfile.js to copy the fonts to the folder that error was looking for. I did this by adding the following to the copy section:
font_awesome_fonts: {
files:{
expand: true,
flatten: true,
src: 'vendor/font-awesome/fonts/*',
dest: '<%= build_dir %>/vendor/fonts'
}
}
And added the following to the delta.assets section:
'copy:font_awesome_fonts'
This seemed to work but now I get the following warning messages in console, no idea why, at least it works now:
localhost/:1 Failed to decode downloaded font: http://localhost:14080/fonts/fontawesome-webfont.woff2?v=4.3.0
localhost/:1 Failed to decode downloaded font: http://localhost:14080/fonts/fontawesome-webfont.woff?v=4.3.0
localhost/:1 Failed to decode downloaded font: http://localhost:14080/fonts/fontawesome-webfont.ttf?v=4.3.0

Answer 2

Thanks for your question; it got me on the path to this answer.
What worked for me was using the Font Awesome LESS file instead of the CSS. In src/less/main.less I added the following:
#import '../../vendor/font-awesome/less/font-awesome.less';
I made this declaration in my src/less/variables.less:
#fa-font-path: ".";
I also removed any mention of the font awesome from the vendor css section of build.config.js. My font declaration looks a bit different, but should be effectively the same:
vendor_files: [
js: ...,
css: [
],
assets: [
'vendor/font-awesome/fonts/*.otf',
'vendor/font-awesome/fonts/*.eot',
'vendor/font-awesome/fonts/*.svg',
'vendor/font-awesome/fonts/*.ttf',
'vendor/font-awesome/fonts/*.woff'
]
]
I haven't noticed your issue with the fonts not copying, nor have I seen the messages in the console, but the icons show up correctly when hosting the files in a webserver and browsing to my app.