Bootstrap Icons not showing in published ASP.NET MVC application

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.


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.


IIS doesn't know how to handle (serve) those files (MIMEs).

Add this to your system.webServer node in the web.config file and you'll be golden:

<staticContent>    
      <mimeMap fileExtension=".otf" mimeType="font/otf" />
      <mimeMap fileExtension=".woff" mimeType="font/x-woff" />
      <!-- add more MIMEs if needed... -->
</staticContent>

--Edited, see Ryans and mine comment below: Even better, to be safe, remove and add the mime type maping:

<staticContent>    
    <remove fileExtension=".otf" />
    <mimeMap fileExtension=".otf" mimeType="font/otf" />
    <remove fileExtension=".woff" />
    <mimeMap fileExtension=".woff" mimeType="font/x-woff" />
    <!-- add more MIMEs if needed... -->
</staticContent>

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;