Fontawesome is not working when project is built with grunt

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

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";

If you are using the complete grunt task stack from yeoman then the useminPrepare task builds a combined stylesheet from all stylesheets that you put in the build:css comment - as you do. (see https://github.com/yeoman/grunt-usemin for additional informations) After the build process is done this file - somewhat like "vendor.234243.css" is copied to the styles folder. That's why the path for your font is no longer valid. There are at least 2 possibilities to solve this:

1. You could remove the font-awesom css out of the build:css block:

   <link rel="stylesheet" href="bower_components/font-awesome/css/font-awesome.min.css"><!-- build:css styles/fontawesome.css --> this will be processed by useminPrepare <!-- endbuild -->

2. Copy the fonts folder as a sibling to the styles folder by an aditional grunt task in your gruntfile.