Font-Awesome Get Request Failure When Bundling EnableOptimizations is true

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()));