8

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: enter image description here

However, when EnableOptimizations is set to true, the font is no longer found and the following is displayed:enter image description here

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.

Community
  • 1
  • 1
onefootswill
  • 3,296
  • 5
  • 39
  • 83
  • Do you have a minified version as well (`font-awesome.min.css`)? –  Sep 17 '14 at 00:18
  • @StephenMuecke yes. There is a minified version. I believe the font-awesome css is using a relative path and that is where the issue is. Makes me wonder why this is not a common thing as I installed it using Nuget. – onefootswill Sep 17 '14 at 00:19
  • It may well be a problem with the minified file. Try deleting it and let the bundler do the minification of the standard file. –  Sep 17 '14 at 00:25
  • @StephenMuecke I just tried your suggestion, and alas, it has not rectified the issue. – onefootswill Sep 17 '14 at 00:40
  • Does using [`CssRewriteUrlTransform`](http://msdn.microsoft.com/en-us/library/system.web.optimization.cssrewriteurltransform(v=vs.110).aspx) help? I somehow recall it being a possible solution? Eg `bundles.Add(new StyleBundle("~/Content/mycss").Include("~/Content/font-awesome.css", new CssRewriteUrlTransform()));` – Rowan Freeman Sep 17 '14 at 01:15
  • @RowanFreeman That pretty much worked, I used a wrapper for it which I will put in the original post as an edit/update. Thank you. – onefootswill Sep 17 '14 at 04:14
  • Unfortunately, neither this or Rowan's anwsers didn't help me after publishing - it is still not working. Only disabling optimization works. – Marek Mar 22 '18 at 15:23

3 Answers3

7

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()));
Rowan Freeman
  • 14,151
  • 8
  • 61
  • 96
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()));
Community
  • 1
  • 1
Ted
  • 2,315
  • 1
  • 27
  • 52
0

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"));
user1573219
  • 1