Font-Awesome Get Request Failure When Bundling EnableOptimizations is true - asp.net-mvc

Question

I am experiencing a problem with font-awesome and ASP.NET’s optimisation/bundling feature.
When EnableOptimizations is set to false, the font which I'm using for a loading image works perfectly:
However, when EnableOptimizations is set to true, the font is no longer found and the following is displayed:
I’ve noticed there is a disparity between the paths which the GET requests are hitting:
EnableOptimizations = false: localhost:3620/Content/fonts/fontawesome-webfont.woff?v=4.1.0
EnableOptimizations = true: localhost:3620/fonts/fontawesome-webfont.svg?v=4.1.0
The bundle in question looks like this:
bundles.Add(new StyleBundle("~/Content/BootstrapAndFontAwesome").Include(
"~/Content/bootstrap/bootstrapLabel.css",
"~/Content/font-awesome/font-awesome.css"
));
What’s going on here and what’s the best way to fix it?
Cheers
Update
On Rowan's suggestion in the comments to this post, I implemented the following code from this stackoverflow answer which has fixed the problem on my dev machine:
public class CssRewriteUrlTransformWrapper : IItemTransform
{
public string Process(string includedVirtualPath, string input)
{
return new CssRewriteUrlTransform().Process("~" + VirtualPathUtility.ToAbsolute(includedVirtualPath), input);
}
}
I will need to do a few practice deployments to make sure it is solid (e.g. use virtual IIS directories etc.). Looks good so far!
Note that I did have to separate out the font-awesome file into it's own bundle as it cannot be bundled with another resource when adopting the CssRewriteUrlTransform solution.
Thanks.

Answer 1

Use CssRewriteUrlTransform.
Rewrites urls to be absolute so assets will still be found after bundling.
Example:
bundles.Add(new StyleBundle("~/Content/mycss")
.Include("~/Content/font-awesome.css", new CssRewriteUrlTransform()));

Answer 2

This SO post has a useful solution to this issue, and it appears to have been written by someone who actually works for Microsoft on the ASP.net Bundle code.
The issue is most likely that the icons/images in the css files are
using relative paths, so if your bundle doesn't live in the same app
relative path as your unbundled css files, they become broken links.
We have rebasing urls in css on our todo list, but for now, the easist
thing to do is to have your bundle path look like the css directory so
the relative urls just work, i.e:
new StyleBundle("~/Static/Css/bootstrap/bundle")
Update: We have added support for this in the 1.1beta1 release, so to
automatically rewrite the image urls, you can add a new ItemTransform
which does this rebasing automatically.
bundles.Add(new StyleBundle("~/bundles/publiccss").Include(
"~/Static/Css/bootstrap/bootstrap.css",
"~/Static/Css/bootstrap/bootstrap-padding-top.css",
"~/Static/Css/bootstrap/bootstrap-responsive.css",
"~/Static/Css/bootstrap/docs.css", new CssRewriteUrlTransform()));
This fixed my issue with getting 404 errors on Font Awesome icons, on the production server, due to the relative paths not being used correctly.
bundles.Add(new StyleBundle("~/Content/font-awesome/css/bundle").Include(
"~/Content/font-awesome/css/font-awesome.css", new CssRewriteUrlTransform()));

Answer 3

There’s a little know class called CssRewriteUrlTransform in the Sytem.Web.Optimization namespace that will help us solve this issue, or any css file that references url relative resources. The new code would now look something like:
bundles.Add(new StyleBundle("~/content/smartadmin")
.Include("~/content/css/font-awesome.css", new CssRewriteUrlTransform())
.Include("~/content/css/dataTables.responsive.css")
.IncludeDirectory("~/content/css", "*.min.css"));