Twitter bootstrap glyphicons do not appear in release mode 404

Question

I`m working on a project in ASP.NET MVC 4 and I did following steps:

1. Downloaded twitter bootstrap from http://blog.getbootstrap.com/2013/12/05/bootstrap-3-0-3-released/

2. Set Build action on font files to Content (files are located in ~/Content/font folder)

   glyphicons-halflings-regular.eot
   glyphicons-halflings-regular.svg
   glyphicons-halflings-regular.ttf
   glyphicons-halflings-regular.woff
   

3. Added to RouteConfig.cs

   routes.IgnoreRoute("{folder}/{*pathInfo}", new { folder = "Content" });

4. Added following elements to Web.config

   <?xml version="1.0" encoding="UTF-8"?>
   <system.webServer>
      <staticContent>
          <remove fileExtension=".eot" />
          <remove fileExtension=".ttf" />
          <remove fileExtension=".otf"/>
          <remove fileExtension=".woff"/>
          <mimeMap fileExtension=".eot" mimeType="application/vnd.ms-fontobject" />
          <mimeMap fileExtension=".ttf" mimeType="font/ttf" />
          <mimeMap fileExtension=".otf" mimeType="font/otf" />
         <mimeMap fileExtension=".woff" mimeType="font/x-woff" />
      </staticContent>
   </system.webServer>
   

5. Included following code in BundleConfig.cs

   bundles.Add(new StyleBundle("~/bundles/maincss")
                       .Include("~/Content/bootstrap/bootstrap.css")
                       .Include("~/Content/bootstrap/bootstrap-theme.css")
                       .Include("~/Content/hbl-full.css"));
   

   Also tried with following code

   IItemTransform cssFixer = new CssRewriteUrlTransform();
   
   bundles.Add(new StyleBundle("~/bundles/maincss")
                       .Include("~/Content/bootstrap/bootstrap.css", cssFixer)
                       .Include("~/Content/bootstrap/bootstrap-theme.css", cssFixer)
                       .Include("~/Content/hbl-full.css", cssFixer));
   

6. Called in main Layout.cshtml

   @Styles.Render("~/bundles/maincss")

Still in localhost icons are shown normally, but when I push code to release server, I can only see square instead of icon and in Chrome`s Console tab I get

GET http://domain.apphb.com/fonts/glyphicons-halflings-regular.woff 404 (Not Found) test:1

GET http://domain.apphb.com/fonts/glyphicons-halflings-regular.ttf 404 (Not Found) test:1

GET http://domain.apphb.com/fonts/glyphicons-halflings-regular.svg 404 (Not Found) test:1

Thank you.

Answer 1

I had this problem and I found it was happening due to the minification when building in release mode.

Rather than downloading the files manually from the bootstrap site and configuring bundling I use the nuget package which does it for me.

If you would like to do that take the following steps.

Run the following command to install Bootstrap:

Install-Package Twitter.Bootstrap.MVC

This downloads all the bootrap files and includes the below pre-defined Bootstrap bundle config:

public class BootstrapBundleConfig
{
    public static void RegisterBundles()
    {
        // Add @Styles.Render("~/Content/bootstrap") in the <head/> of your _Layout.cshtml view
        // For Bootstrap theme add @Styles.Render("~/Content/bootstrap-theme") in the <head/> of your _Layout.cshtml view
        // Add @Scripts.Render("~/bundles/bootstrap") after jQuery in your _Layout.cshtml view
        // When <compilation debug="true" />, MVC4 will render the full readable version. When set to <compilation debug="false" />, the minified version will be rendered automatically
        BundleTable.Bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include("~/Scripts/bootstrap.js"));
        BundleTable.Bundles.Add(new StyleBundle("~/Content/bootstrap").Include("~/Content/bootstrap.css"));
        BundleTable.Bundles.Add(new StyleBundle("~/Content/bootstrap-theme").Include("~/Content/bootstrap-theme.css"));
    }
}

The above also includes comments describing how to render out the bundles.

I think the original 404 font error was due the fonts folder being at a different level to what is specified in the minified css.

If you prefer to keep your current solution the only way I could fix the 404 was to copy the font folder to the root of the web application.

To test it locally simply remove debug="true" from your web config to save deploying to AppHarbor.