Twitter bootstrap glyphicons do not appear in release mode 404

22db05 picture 22db05 · Jan 21, 2014 · Viewed 25k times · Source

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

Jasen picture Jasen · Jun 9, 2014

Here's how I solved it -- I'm using MVC5 and Bootstrap 3.1.1.

I have my files organized in the project like this:

/Content/Bootstrap/bootstrap.css
                   bootstrap.min.css
/Content/fonts/glyphicons-halflings-regular.eot
               glyphicons-halflings-regular.svg
               glyphicons-halflings-regular.ttf
               glyphicons-halflings-regular.woff

Then I added another level to my virtual path in the bundle config

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

Previously I had used ~/Content/css

And in the view...

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

This worked but I still got a 404 on one of the fonts... so I added Giles' solution.

<?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="application/font-woff" />
        <mimeMap fileExtension=".woff2" mimeType="application/font-woff2" />
    </staticContent>
</system.webServer>