I created a mobile application with the yeoman mobile-generator.
Now I want to add font awesome. I tried this, but not really works in the compiling process. A small advice or experience would be great
Okay, it's really a bit unclear. Sorry.
The compiling process works, but console says 404 not founds for the fonts.
It's not really clear to me how is a good way to do this. Creating the CSS from the scss files, implemeted the .min.css in the index.html with "<-- build: ... -->" or something else?!
When I add this in my main .scss file the the fonts would not be found.
$fontAwesomePath: "../bower_components/font-awesome/fonts";
@import '../bower_components/font-awesome/scss/font-awesome.scss';
Grunt copies and renames the font files f.e. to:
5a6b8fb8.FontAwesome
Sounds like grunt rev https://github.com/cbas/grunt-rev is renaming your font file. Just look for something like this in your Gruntfile:
// Renames files for browser caching purposes
rev: {
dist: {
files: {
src: [
'<%= yeoman.dist %>/styles/fonts/*'
...
remove the fonts line and you should be okay.
Ok,
seems I could fixed this with the help of this answer.
Installed font awesome with bower:
bower install --save font-awesome
Then simply this line in the index.html fixed my problem.
<!-- build:css styles/vendor/fontawesome.css -->
<link rel="stylesheet" href="bower_components/font-awesome/css/font-awesome.min.css">
<!-- endbuild -->
Thanks @OddEssay and @bpaul for our help!!
@importing the scss takes care of the CSS side of things, but I think you also need to move the assests to a location the browser can access them, so grunt-contrib-copy would do the job perfectly. So if your webroot is public
Something like:
copy: {
main: {
files: [
{expand: true, cwd: '../bower_components/font-awesome/fonts', src: ['*.*'], dest: 'public/fonts'}
]
}