yeoman generator font awesome

Question

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

Answer 1

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.

Answer 2

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!!

Answer 3

@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'}
               ]
      }