Bootstrap Icons not showing in published ASP.NET MVC application

Tags: css,,,twitter-bootstrap,less

Problem :

--- 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):

Local Icons

In booth, IE and Chrome.

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

  • Chrome

Published Chrome

  • IE (10)

Published IE

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

Local CSS Chrome

  • IE

Local CSS IE

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

  • Chrome:

Published CSS Chrome

  • IE:

Publisehd CSS 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:

Network Tab

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:

New Requested files

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:

files tree

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!

Solution :

If your bundling your scripts and css then assets like images may not be found.

In your BundleConfig.cs file, create your bundle with CssRewriteUrlTransform:

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

Include in _Layout.cshtml:


Everything should be good. And yes, viewing what's happening over the network to see what URL is generating the 404s will help.

    CSS Howto..

    How do I draw the lines of a family tree using HTML CSS?

    How to clone an element using class name and append it to the body

    how to overwrite css style in page?

    How do I properly set width to a percentile and keep a min-width in pixels?

    How to make entire div clickable with css only

    How to prevent randomly positioned images from overlapping using Angular

    How to center a border-width shape properly, relative to its parent input button?

    How to center div using JQuery or CSS

    How to rotate the background image in css?

    How to apply style rules that are tied to a model in AngularJS?

    How to over-ride img-width from bootstrap? Set css rule to null?

    how to scroll down|up animatedly in jquery css?

    How to restrict character limit by line or # of characters with css?

    Primefaces: how to change the default icon on the button of the calendar field?

    How to Change the hover image in CSS

    how to set anchor tag text width using css?

    How I do edit the css for just the home page on Magento?

    How to apply CSS correctly to iFrame?

    How to create table with resizable row and columns like HTML, CSS, JS boxes on JSFiddle?

    How to implement min left/right in css

    Why the space after the table, and how to remove it?

    How to arrange two butons side by side in Struts2

    How do I align elements using CSS?

    How to implement a webpage with tabs in my case?

    How to fix css and jQuery slide show? [closed]

    How to edit .css file from html via jquery

    How can a

    how to i target a another div with jquery or css

    Can someone help explain how the css3 calc() method actually works?

    How to prevent HTML element moving when resizing window?