33

--- 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!

Improve this question
4
  • I'm creating another answer for the more specific problem of why the files are not being copied when publishing the application Commented Dec 13, 2013 at 9:57
  • The new question: stackoverflow.com/q/20563752/2776550 Commented Dec 13, 2013 at 10:07
  • IIS 7. I restart my site and then the requests was showed: the problem is the request look for the files /Content/themes/fonts/glyphicons-halflings-regular.* but the files are in: /Content/themes/base/fonts/glyphicons-halflings-regular.* Commented Dec 13, 2013 at 12:26
  • actually this resolved my problem stackoverflow.com/questions/12458444/… Commented Mar 11, 2015 at 6:22

17 Answers 17

Reset to default
20

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.

Improve this answer
Sign up to request clarification or add additional context in comments.

8 Comments

you nailed it! CssRewriteUrlTransform does the job!
afeter updating System.Optimization to version 1.1.3 it's broken again :(
Hey there, I have the following package installed: Microsoft.AspNet.Web.Optimization, version 1.1.3. That is working for me. Maybe check to see if anything else was altered during the update.
It seems like a bug in version 1.1.3, I'm rolling back to 1.1.0, thanks!
@sabotero, I just came across something else that can cause your problem. The relative bundle url needs to be the same as the url to your css file (stackoverflow.com/questions/30434867/…). So if you have something like /Content/MyJSLib and it has /css, /images, etc. then the bundle path must be "~/Content/MyJSLib/css". I found that the CssRewriteUrlTransform is not needed in that scenario even though the images were in a different folder than the CSS files.
|
20

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>
Improve this answer

4 Comments

This seems to break all of the built-in default MIME types, or something. Whenever I add this to my web.config file, none of the other static content is served - no CSS, images, other fonts, etc.
Please do not make my mistake and note the exact web app you are changing if you host your static files on some other app
This is fun, i have bootstrap css and js declared on html, fonts are in place, mimes are ok and I'm also getting the troll little squares what else can I be missing? Edit: NVM, i was missing glyphicon class. Was trying to glyphicon-something without the glyphicon base class.
Ryan, it seems that IIS (not sure if all versions) can have problems with overriding mime types like I explained, the safer way is to remove explicitly handler and re-add it, see: stackoverflow.com/questions/13677458/… I'll update my answer.
14

Try disabling bundle optimizations, what happens is that the path to the bundled css stylesheet conflicts with referenced images. For example. You might have a css file /Content/css/style.css => in a bundle "~/Content/css" in which an image is specified as such

    .someclass { background-image:url(img/someimg.png) }

This would resolve the image to /Content/css/img/someimg.png

Now you deploy the release build and the css file is now rendered to a bundle URL such as /Content/css Now the image URL resolves to /Content/img/someimg.png

You can change this behaviour in App_Start\BundleConfig.cs

    System.Web.Optimization.BundleTable.EnableOptimizations = false;
Improve this answer

2 Comments

Thanks it worked for me. But I preferred the igorludi solution but my web server doesn't accepted that section in web config !!!
I marked this answer as useful because disabling the Bundle Optimization worked (I'm running MVC5 web app). However, the issue in my case was that I had BundleTable.EnableOptimizations = true; in my Application_Start() function. Simply removing that line resolved the issue.
2

Run Fiddler or use the network tab on your browser's developer tools. What you should look for is 404 results for the requests that download the font files.

Also make sure that the published site contains ~/Fonts/glyphicons-halflings-regular.[eot,svg,ttf,woff] files.

The differences you are seeing in the computed CSS rules are because of minified CSS files (controlled by debug=true/false setting in web.config file). The value \e013 is just another way of writing the symbol you are seeing.

Improve this answer

4 Comments

Well I have three 404 errors in chrome's network tab for this three files you mentioned. I will look how can I include this files in the publication. Thank you!
I did not understand your last paragraph what are the change in the computed CSS when changing debug settings. By the way, my debug settings are debug=false
Well I think I answer myself, I change the settings to debug=true and understand what you mean!
I get the files to be included when application is published, but the icons continue to be showed as I mentioned before!
2

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:

chrome network tab font download

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

Improve this answer

6 Comments

The files are not being copied when I publish my application, the only file being copied is the .svg file. The .eot, .ttf and woff files are missing!
ooops, happens on friday, 13th. :P
ok, I managed to include the files, so I think I'm back to this question because the icons are not showed correctly even with the files being included. Though I don't see the same request you have here. It seems like my application does not request the fonts files. The weird thing is that they were being requested before including the files as I had 404 errors for those files. I edited my question to include this.
Also, I dont customized bootstrap, I take the full.zip version
Check my update answer on your status code and iis sneaks. if does solve your issue dont forget to accept this answer, so other will benefit on this.
|
2

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

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

Improve this answer

Comments

1

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.

Improve this answer

Comments

1

You have to set the property Copy to Output Directory of the files on Copy always

Improve this answer

1 Comment

Are you referring to webforms?
1

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/";

Improve this answer

Comments

1
  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" />
Improve this answer

4 Comments

The problem here is not that but The resquest is then looking for the files in: /Content/themes/fonts/ but they are in: /Content/themes/base/fonts/ ...
By the way, I checked my project. I have also Bootstrap installed but there is no such a thing as 'Fonts' folder inside 'Content' nor inside the 'base' folder. How about you try to uninstall bootstrap and then reinstall it again from NuGet?!
where is the font folder then?
the Fonts folder is a main folder at the same level as Content.
0

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

Improve this answer

4 Comments

Yes they are included to the project, though not being published
@sabotero are the images included?
In the img folder? Yes I have two files (black icons and white icons) included in it when published.
I'm creating another answer for the more specific problem of why the files are not being copied when publishing the application.
0

try <link rel="stylesheet" href="~/Content/bootstrap/bootstrap.css" /> and try @Styles.Render("~/bootstrap/css") The only difference that I found

Improve this answer

Comments

0

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

Improve this answer

Comments

0

I had this problem too. Rather than have to move files around you can create a virtual directory in the root of the project in IIS.

Improve this answer

Comments

0

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.

Improve this answer

Comments

0

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
Improve this answer

Comments

0

Anyone still looking for an alternate answer, this method suggested on another StackOverflow answer resolves the issue.

Change the Build action on the .eot, .ttf, & .woff files to "Content" instead of the default value of "None". Doing this solved my issue.

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.