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.
The problem was that font-awesome.min.css is referencing fonts in:
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.
A simpler way would be to re-define the
$fa-font-path
in yourSCSS
/LESS
file:Also Don't forget to
@import "font-awesome/scss/font-awesome";
in yourmain.scss
.