Bundling and minifying the font awesome css. in mvc 4 - css

Question

I am trying to minify the font awesome.css but when i minimize it shows the different junk characters for content like :
{ content: "\f048"; }
above are content icons like up arrow etc....
What are the option to overcome this problem?
Thanks

Answer 1

Maybe I'm mis-understanding what you're asking, but those aren't junk characters. Those are the Unicode code points that Font Awesome uses (specifically the Private Use Area). They absolutely should be in your minified CSS. Or you can use the minified CSS that comes with Font Awesome.

Answer 2

I've run into this before. When you minify you need to specify a charset.
In your project's config set the xml's encoding to:
<?xml version="1.0" encoding="utf-8"?>
If you're uncomfortable messing with the config or don't have access you can modify the CSS.
#charset "UTF-8";
In both cases it must be the first line of the file. If you are concatenating it needs to be only in the first file.

Answer 3

I solved it using YUI Bundle Transformer
Installed it via NuGet Packages
Code looks like this:
var cssBundle = (new StyleBundle("~/bundles/css").Include(
"~/Content/css/font-awesome.css");
cssBundle.Transforms.Add(new CssTransformer(new YuiCssMinifier()));
bundles.Add(cssBundle);

Answer 4

Try to register via CssRewriteUrlTransform.
For example:
bundles
.Add(new StyleBundle("~/Content/utilities")
.Include("~/Content/font-awesome.min.css", new CssRewriteUrlTransform()));