Bootstrap Icons not showing in published ASP.NET M

Question

--- NB: Go to the EDITED 2 section for summary ----

I have an ASP.NT MVC (4) application. I integrated (twitter)Bootstrap to it. Bootstrap is working perfectly, but the icons does not show correctly when I publish the application.

I tried to republish the application without success.

For clarify I put some images here below.

When I run my application from VS2013 the result is this (which is OK):

In booth, IE and Chrome.

But when I run the published application the result is this (which is NOT ok):

• Chrome

• IE (10)

This problem has, somehow, to be with the evaluated CSS but I don't know at which point this could be happening.

The evaluated css in the local application are this (which is OK):

• Chrome

• IE

But In the published application I have this (which is NOT ok):

• Chrome:

• IE:

Some has experienced this behavior?

What can I do for solve this weird problem?

--------------------------- EDITED ------------------------------

I get the font files (.eot, .svg, .ttf and .woff) to be included when publishing my application. When I access the default page (application root http://localhost/) which is the page showing the icons the files being showed in the Chrome's Developper Tools Network tab are:

Before including the files I was getting 404 errors for the files, so I could guess they continue to be requested even if they are not showed in the Network Tab.

Though, the icons are not showed correctly.

------------------------ EDITED 2 ---------------------------

Well, I restart my site in the IIS 7. And the request start to be triggered. These are the file requests showed in the Chrome's Developper Tools Network Tab:

The resquest is then looking for the files in: /Content/themes/fonts/ but they are in: /Content/themes/base/fonts/

The base folder containt a bootstrap folder which containt the bootstrap.css file. In the CSS file there are this class referening the fonts files:

@font-face {
  font-family: 'Glyphicons Halflings';
  src: url('../fonts/glyphicons-halflings-regular.eot');
  src: url('../fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), url('../fonts/glyphicons-halflings-regular.woff') format('woff'), url('../fonts/glyphicons-halflings-regular.ttf') format('truetype'), url('../fonts/glyphicons-halflings-regular.svg#glyphicons-halflingsregular') format('svg');
}

It seems the references to the fonts files are good as the the files tree is this:

I could change the class to be:

@font-face {
      font-family: 'Glyphicons Halflings';
      src: url('../base/fonts/glyphicons-halflings-regular.eot');
      src: url('../base/fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), url('../base/fonts/glyphicons-halflings-regular.woff') format('woff'), url('../base/fonts/glyphicons-halflings-regular.ttf') format('truetype'), url('../base/fonts/glyphicons-halflings-regular.svg#glyphicons-halflingsregular') format('svg');
    }

But, I would actually know what this is happening and how to solve it! Besides, the icons will be showed in the published site but not in the local site (running from VS2013 with iisexpress). Thank you in advance for your help!

Answer 1

I had the same problem. If you still can't solve it, the problem is in the reference to the archives of the icons.

For your case the reference should be : "../Content/themes/base/fonts/glyphicons-halflings-regular..."

Finally, Sorry for my english if you don't understand because i talk spanish and i'm just practicing the english language. :D

Answer 2

I was also having this issue with MVC 5 and Bootstrap v3.3.6.

Failed to load resource: the server responded with a status of 404 (Not Found) http://NameOfSite/Error/NotFound?aspxerrorpath=/bundles/fonts/glyphicons-halflings-regular.woff2

You need to update the @icon-font-path in theContent/bootstrap/variables.less file from "../fonts/"; to "/Content/fonts/";

Answer 3

1. Make sure .woff extension is added correctly to IIS MIME Types of your website in order to get rid off possible 404 errors

2. Fix caching issues by removing the following web.config lines because Internet Explorer does not seem to like it:

   <add name="Cache-Control" value="no-cache, no-store" />
   <add name="Pragma" value="no-cache" />
   

Answer 4

IIS doesn't know how to handle (serve) those files (MIMEs).

Add this to your system.webServer node in the web.config file and you'll be golden:

<staticContent>    
      <mimeMap fileExtension=".otf" mimeType="font/otf" />
      <mimeMap fileExtension=".woff" mimeType="font/x-woff" />
      <!-- add more MIMEs if needed... -->
</staticContent>

--Edited, see Ryans and mine comment below: Even better, to be safe, remove and add the mime type maping:

<staticContent>    
    <remove fileExtension=".otf" />
    <mimeMap fileExtension=".otf" mimeType="font/otf" />
    <remove fileExtension=".woff" />
    <mimeMap fileExtension=".woff" mimeType="font/x-woff" />
    <!-- add more MIMEs if needed... -->
</staticContent>

Answer 5

The solution from igorludi should working fine.

And I think, we can tell the IIS to handles those "new" MIME TYPE by:

• Select the site;

• Go to IIS >> MIME Types;

• Adds those new extension and type (see the XML on igorludi answer).

• Restart the site.

Answer 6

Have you included your bootstrap files into the project? Only the files, included into the solution are to be published.