Bootstrap Icons not showing in published ASP.NET MVC application

Question

--- NB: Go to the EDITED 2 section for summary ----

I have an ASP.NT MVC (4) application. I integrated (twitter)Bootstrap to it. Bootstrap is working perfectly, but the

Answer 1

try <link rel="stylesheet" href="~/Content/bootstrap/bootstrap.css" /> and try @Styles.Render("~/bootstrap/css") The only difference that I found

Answer 2

I had the same problem. If you still can't solve it, the problem is in the reference to the archives of the icons.

For your case the reference should be : "../Content/themes/base/fonts/glyphicons-halflings-regular..."

Finally, Sorry for my english if you don't understand because i talk spanish and i'm just practicing the english language. :D

Answer 3

adding: BundleTable.EnableOptimizations = False fixed my issue.

Public Sub RegisterBundles(ByVal bundles As BundleCollection)
    BundleTable.EnableOptimizations = False
    bundles.Add(New StyleBundle("~/DefaultStyles").Include(
      "~/Content/custom3.css"))
End Sub

Answer 4

Run Fiddler or use the network tab on your browser's developer tools. What you should look for is 404 results for the requests that download the font files.

Also make sure that the published site contains ~/Fonts/glyphicons-halflings-regular.[eot,svg,ttf,woff] files.

The differences you are seeing in the computed CSS rules are because of minified CSS files (controlled by debug=true/false setting in web.config file). The value \e013 is just another way of writing the symbol you are seeing.

Answer 5

If your bundling your scripts and CSS then assets like images may not be found.

In your BundleConfig.cs file, create your bundle with CssRewriteUrlTransform:

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

Include in _Layout.cshtml:

@Styles.Render("~/Content/css/bootstrap")

Everything should be good. And yes, viewing what's happening over the network to see what URL is generating the 404s will help.

EDIT: Ensure you are using Microsoft.AspNet.Web.Optimization v1.1.0. Confirmed version 1.1.3 causes this error as well.

Answer 6

Try disabling bundle optimizations, what happens is that the path to the bundled css stylesheet conflicts with referenced images. For example. You might have a css file /Content/css/style.css => in a bundle "~/Content/css" in which an image is specified as such

    .someclass { background-image:url(img/someimg.png) }

This would resolve the image to /Content/css/img/someimg.png

Now you deploy the release build and the css file is now rendered to a bundle URL such as /Content/css Now the image URL resolves to /Content/img/someimg.png

You can change this behaviour in App_Start\BundleConfig.cs

    System.Web.Optimization.BundleTable.EnableOptimizations = false;