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-

Answer 1

Copying the font folder to the root of the web app and changing the mime types in web.config to

<?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" />
  </staticContent>
</system.webServer>

fixed the issue for me. Please note that the .woff mimeType is different to the one in the question.

Answer 2

I had the same issue. I don't really know why but if I remove the bootstrap.min.css file and set the CssRewriteUrlTransform on the bundle everything is working. I'm using bootstrap v3.1.1

EDIT: After some investigation the solution is defined here : CssRewriteUrlTransform is not being called So removing the bootstrap.min.css or referencing bootstrap.min.css instead of bootstrap.css will force the bundling/minification on your file and so it will call the CssRewriteUrlTransform.

Answer 3

I had the same problem. I got around it by using bootstrap's CDN.

Answer 4

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>

Answer 5

I had the same problem, using IIS 7.5 webserver.

The solution was to add .woff to the list of file name extensions with MIME type application/octet-stream on the webserver.

You could also achieve the same in web.config:

<staticContent>
    <remove fileExtension=".woff" />
    <mimeMap fileExtension=".woff" mimeType="application/octet-stream" />
</staticContent>

Answer 6

In the IgnoreRoute, you specified the "Content" folder. Try also adding one for fonts", since that is what your are requesting.

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