Bootstrap Icons not showing in published ASP.NET MVC application


Tags: css,asp.net-mvc,asp.net-mvc-4,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:

@Styles.Render("~/Content/css/bootstrap")

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 to make iframe use all height available to it

    How can I apply an external CSS class to a span created with dojo.create?

    How to remove hover effect from a column of a table

    How to show and hide fieldset content on click of the legend

    How to properly adjust CSS Form Select field if content is larger than image

    How do I make entire div a link? [duplicate]

    CSS Button Animation - How to Accomplish?

    How to add a css transition color change for a link/div background

    How to Position a CSS Element on the page? Without position properties?

    How can I make a div height automatically fit screen and expands if the content exceeds height

    How can I get a CSS/jQuery animated menu similar to ajusto.com?

    How to arrange three flex div side by side

    How can I use CSS to select and style all LI elements that have UL sub-elements? [duplicate]

    How to get css to work in Django [closed]

    How to position an element at the TOP LEFT corner of a page using CSS?

    How can I set the Eclipse JS to edit a file as CSS

    Knockout - How to bind outer container css from set of checkboxes?

    How can i achieve this style in Html/Css?

    How to enable links if a parent element uses a fullscreen pseudo-element?

    How to target div within a modal box with CSS

    How to apply css overflow property on specific content

    how to make
  • add css class active after refreshing page?
  • How to scale content for displays keeping the ratio [closed]

    How to set hyphenation at the end of word when to break word in CSS?

    How to put 3 of these tables into the correct spot with CSS

    How to make a shape which is made using css borders responsive?

    How can I resize the height of an image to crop with the browser window?

    Show an image from b&w to color as if it were loading (left to right)

    CSS, IE7… how to not move down the content

    How to style a PHP generated label?