9

With a default install of ASP.NET MVC 5 and an updated Bootstrap 3, loading my project's home page does not display CSS styles or the included font glyphicons (404 file not found error).

The CSS styles get a 403 "Forbidden to view folder contents" error to the /Content/css address.

The fonts get a 404 error to /fonts folder.

Why?

Dan Sorensen
  • 11,403
  • 19
  • 67
  • 100

2 Answers2

14

When you install Bootstrap 3 into the Content folder, it includes a folder structure like this:

~/Content/css/boostrap.min.css
~/Content/fonts/glyphincons-halflinkgs-regular.(eot|svg|ttf|woff)

The 403 "Forbidden" error, is likely because the default CSS bundle route "~/Content/css" matches a valid folder name, and MVC cannot resolve the conflict between a route and folder.

Fix the 403 by renaming your route to something that doesn't match a real folder like, "~/Content/cssbundle".

When you change the bundle name, the 404 "file not found" error occurs for the fonts as the relative path from the CSS files to the fonts is no longer valid.

Fix the 404 by moving your fonts folder to the root of your project. (I wish I had a better solution here)

Dan Sorensen
  • 11,403
  • 19
  • 67
  • 100
  • (Note: I posted my own answer under the SO community tenant of sharing knowledge in the Q&A format. If you can improve upon my answer, PLEASE do so. This is to help all of us.) – Dan Sorensen Aug 22 '13 at 18:31
  • 1
    Also note that IIS 7 does not add a MIME type mapping for .woff files by default. Here is a link to set that up: http://www.dirigodev.com/blog/web-development/404-errors-in-iis7-for-embedded-woff-font-files/ – groksrc Jun 13 '14 at 14:49
  • Great explanation. Followed your instructions step by step and it worked like a charm. – zszep Feb 12 '15 at 08:12
  • Any way round this without messing with iis? – Worthy7 Oct 07 '16 at 06:45
  • 1
    I found I also had to fix the `woff2` file type by using this fix (Solution 2 & adding `2` to the end of all extensions): https://stackoverflow.com/questions/4015816/why-is-font-face-throwing-a-404-error-on-woff-files#7374640 – SharpC Mar 07 '18 at 11:17
3

I too was struggling with this miserably.

There has been an update to the Twitter.Bootstrap nuget package from 3.0.1 => 3.0.1.1. The Twitter.Bootstrap package is now just Bootstrap and has been moved to be managed by the Outercurve foundation.

Chris Kirby has changed the folder structures by eliminating the Content/Bootstrap directory and placing all boostrap.css files directly in the Content folder. He also moved the fonts directory into the root of the site.

See more here; (http://chriskirby.net/bootstrap-nuget-package-moving-to-outercurve/)

This resolved the issue I was having and resolved all my glyphicon font issues.

Ryan Anderson
  • 937
  • 10
  • 23
  • Nice followup! That is useful info. I believe I was using the source directly from the Bootstrap project at the time, but this might be a good alternative route. – Dan Sorensen Nov 05 '13 at 00:36