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

Including the below line in RegisterBundles() of BundleConfig.cs file worked for me.

System.Web.Optimization.BundleTable.EnableOptimizations = false;

Answer 2

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.

EDIT: Ensure you are using Microsoft.AspNet.Web.Optimization v1.1.0. Confirmed version 1.1.3 causes this error as well.

Answer 3

Note to readers: be sure to read @user2261073's comment and @Jeff's answer concerning a bug in the customizer. It's likely the cause of your problem.

---

The font file isn't being loaded correctly. Check if the files are in their expected location.

@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 might also be a mimetype issue. Chrome's dev tools show downloaded fonts in the network tab:

The bootstrap customizer seems to be sending different sized fonts than the ones that are inside the whole bootstrap package that comes with the examples. If you use customized bootstrap, try replacing font files..

Update

You get a status code 304 which represents "not modified static files that downloaded or in client cache." So its related to client cache and requires some peek into iis.

This will be helpful in solving your issue

Answer 4

adding: BundleTable.EnableOptimizations = False fixed my issue.

Public Sub RegisterBundles(ByVal bundles As BundleCollection)
    BundleTable.EnableOptimizations = False
    bundles.Add(New StyleBundle("~/DefaultStyles").Include(
      "~/Content/custom3.css"))
End Sub

Answer 5

I had this problem also. The solution that I used is within this question: https://stackoverflow.com/questions/27254055/manually-added-directory-not-automatically-included-with-one-click-file-system-d

• unload the project
• edit the csproj file
• change None include to Content Include for the relevant Font files.

Use one-click deploy again and the files are published.