Font-Awesome Get Request Failure when EnableOptimizations is enabled.

Question

I am having a problem with font enhancement and ASP.NET optimization / layout.

If the EnableOptimizations parameter is set to false, the font that I use for the uploaded image works fine:

However, if EnableOptimizations is set to true, the font is no longer found, and the following is displayed:

Ive noticed that there is a mismatch between the paths that push GET requests:

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 node under consideration is as follows:

bundles.Add(new StyleBundle("~/Content/BootstrapAndFontAwesome").Include( "~/Content/bootstrap/bootstrapLabel.css", "~/Content/font-awesome/font-awesome.css" )); 

What is going on here and what is the best way to fix it?

Greetings

Update

In the Rowan suggestion, in the comments on this post, I have implemented the following code from this https://stackoverflow.com/a/2129609/ 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 some practical deployments to make sure they are robust (like using IIS virtual directories, etc.). Looks nice!

Please note that I had to separate the font-awesome file into its own package, since it cannot be linked to another resource when making the CssRewriteUrlTransform decision.

Thanks.

Answer 1

Use CssRewriteUrlTransform .

Rewrites URLs to be absolute, so assets will still be found after linking.

Example:

 bundles.Add(new StyleBundle("~/Content/mycss") .Include("~/Content/font-awesome.css", new CssRewriteUrlTransform())); 

Answer 2

This SO post has a helpful solution to this problem, and it seems to be written by someone who really works for Microsoft in the ASP.net Bundle code.

Probably the problem is that the icons / images in the css files are using relative paths, so if your package does not live in the same application the relative path is like your split css files, they become broken links.

We have reloading the URLs in css in the todo list, but for now, the thing is, your bundle of packages should look like a css directory, so relative URLs just work, that is:

 new StyleBundle("~/Static/Css/bootstrap/bundle") 

Update: we added support for this in version 1.1beta1, so automatically rewrite the URLs of images, you can add a new ItemTransform that automatically reloads.

 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 of getting 404 errors on the awesome font icons on the production server due to misuse of relative paths.

 bundles.Add(new StyleBundle("~/Content/font-awesome/css/bundle").Include( "~/Content/font-awesome/css/font-awesome.css", new CssRewriteUrlTransform())); 

Answer 3

Theres knows a little class called CssRewriteUrlTransform in the Sytem.Web.Optimization namespace that will help us solve this problem or any css file that references relative URL resources. The new code will now look something like this:

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