Using Glyphicons in an ASP.NET MVC app that has Bootstrap Bundled

Question

I have an ASP.NET MVC app that includes bootstrap. My directory structure looks like this:

/
  /App_Start
    BundleConfig.cs
  /Content
    app.css
    bootstrap.min.css
  /Fonts
    glyphicons-halflings-regular.eot
    glyphicons-halflings-regular.svg
    glyphicons-halflings-regular.ttf
    glyphicons-halflings-regular.woff
    glyphicons-halflings-regular.woff2

I need to bundle Bootstrap in my app. In my BundleConfig.cs file, I have the following:

public static void RegisterBundles(BundleCollection bundles)
{
  bundles.Add(new StyleBundle("~/public/bundles/css")
    .Include("~/Content/bootstrap.min.css")
    .Include("~/Content/app.css")
  );

  bundles.Add(new ScriptBundle("~/public/bundles/scripts")
    .Include("~/Scripts/jquery-2.1.4.min.js")
    .Include("~/Scripts/jquery-ui-1.11.4.min.js")
    .Include("~/Scripts/bootstrap.min.js")
    .Include("~/Scripts/jquery.validate.min.js")
    .Include("~/Scripts/jquery.validate.unobtrusive.min.js")
  );
}

When bundling is turned OFF, everything renders fine. When I turn bundling ON, everything renders fine, except for the font icons. When I look in the console window, I see 5 404 errors related to the font icons. Its like its trying to reference the font files like the following:

http://localhost:9090/public/fonts/glyphicons-halflings-regular.woff2

Yet, they do not exist in the public directory. I'm not sure how to remedy this problem.

score 5 · Accepted Answer · answered Jul 03 '15 at 17:23

The problem is that the fonts are referenced using a relative URL:

../fonts/glyphicons-halflings-regular.woff2

Your CSS bundle is served from a URL in the folder ~/public/bundles/. Since the relative URL only specifies a single "parent folder" navigation, the font URL ends up as ~/public/fonts/....

There appear to be three options:

Update the font URLs in the bootstrap.min.css file to use ../../fonts/... - you'll need to remember to re-apply that change every time you update the Bootstrap files;
Change your bundle URL to have the same folder depth as the CSS file - something like ~/public/css;
Add a CssRewriteUrlTransform to your bundle. This will re-write the relative URLs to absolute URLs.

Eg:

bundles.Add(new StyleBundle("~/public/bundles/css")
    .Include("~/Content/bootstrap.min.css", new CssRewriteUrlTransform())
    .Include("~/Content/app.css")
);

Note the .min. in the answer. Your file _must_ have `.min.` in the path or `CssRewriteUrlTransform` doesn't work. See the annoying bug described here https://stackoverflow.com/questions/19619086/cssrewriteurltransform-is-not-being-called I wasted a _lot_ of time on this — Nick.Mc, Apr 23 '19 at 13:28

Using Glyphicons in an ASP.NET MVC app that has Bootstrap Bundled

1 Answers1

Linked