how to use grunt-usemin with font awesome

Question

I am trying to use grunt-usemin to minify my css. I am using Font Awesome like this within my index.html

    <link rel="stylesheet" href="components/font-awesome/css/font-awesome.min.css">

When I run usemin, I get all the styles combined. However, when I try to use the minified version, the Font Awesome icons show up as unicode squares (not as the intended icons).

Any ideas on how to fix this? I can include more information if needed.

Answer 1

The problem was that font-awesome.min.css is referencing fonts in:

../font/

The key to fixing was to also copy the fonts folder out of the components/font-awesome/fonts folder to a fonts folder that is at the right relative path.

Answer 2

A simpler way would be to re-define the $fa-font-path in your SCSS/LESS file:

$fa-font-path: '../bower_components/font-awesome/fonts' !default;
// $fa-font-path:        "//netdna.bootstrapcdn.com/font-awesome/4.0.3/fonts" !default; // for referencing Bootstrap CDN font files directly

Also Don't forget to @import "font-awesome/scss/font-awesome"; in your main.scss.