I`m working on a project in ASP.NET MVC 4 and I did following steps:
Downloaded twitter bootstrap from http://blog.getbootstrap.com/2013/12/05/bootstrap-3-0-3-released/
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
Added to RouteConfig.cs
routes.IgnoreRoute("{folder}/{*pathInfo}", new { folder = "Content" });
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>
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));
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.
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>
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With