bootstrap icons not being displayed in internet explorer

Question

I'm using bootstrap, very new to it all. On my production side of things my icons are appearing fine, under safari and chrome they appear fine also. The code I use to link the icons to appear is as follows:

<a href="/Admin/God/Admin.aspx" class="button rectangular"><i class="icon-group icon-large"></i><span class="button-text">Users</span></a>

The site is iskittle.co.uk if you view it other apart from IE the icons appear. I'm somewhat stumped...I guess it will have something to do with how IE is handling the how the CSS gets the images.

Like I said I am new to this but I think it gets the icons from a larger image http://iskittle.co.uk/images/icons/glyphicons-halflings-white.png

Why would chrome and safari be able to work out how to do this but no IE...any ideas/help would be great, I have done a lot of searching on the net but cant seem to a straight forward answer...

Answer 1

The font isn't loading as IE is unable to download the .woff file. Internet Explorer is much more picky about permissions to use fonts. To fix it, check:

1. Make sure the file exists on the server and is accessible from http://iskittle.co.uk/font/fontawesome-webfont.woff .

2. If it is already there make sure your IIS server is set up correctly to deploy woff files. In your web.config , make sure the following exists:

    <staticContent> <remove fileExtension=".woff" /> <mimeMap fileExtension=".woff" mimeType="application/octet-stream" /> </staticContent> 

Answer 2

In your CSS File look for this:

@font-face {
  font-family: "FontAwesome";
  src: url("../font/fontawesome-webfont.eot");
  src: url("../font/fontawesome-webfont.eot") format("eot"), url("../font/fontawesome-webfont.woff") format("woff"), url("../font/fontawesome-webfont.ttf") format("truetype"), url("../font/fontawesome-webfont.svg#FontAwesome") format("svg");
  font-weight: normal;
  font-style: normal; }

Change this part:

src: url("../font/fontawesome-webfont.eot") format("eot"), url("../font/fontawesome-webfont.woff") format("woff"), url("../font/fontawesome-webfont.ttf") format("truetype"), url("../font/fontawesome-webfont.svg#FontAwesome") format("svg");

To this:

src: url('../font/fontawesome-webfont.eot?#iefix') format('embedded-opentype'), url('../font/fontawesome-webfont.woff') format('woff'), url('../font/fontawesome-webfont.ttf') format('truetype'), url('../font/fontawesome-webfont.svg#FontAwesome') format('svg');