Icon fonts not working in IE8

[simplybikes]

I’m using icon fonts from Icomoon in my most recent project. They work perfectly in all browsers except IE8.
What I get is a little box instead of the icon.
Has anybody had a similar experience. My css looks like this:

@font-face {
font-family: ‘icomoon’;
src:url (‘../fonts/icomoon.eot’);
src: local(‘☺’), url(‘../fonts/icomoon.eot?#iefix’) format(’embedded-opentype’),
url(‘../fonts/icomoon.woff’) format(‘woff’),
url(‘../fonts/icomoon.ttf’) format(‘truetype’),
url(‘../fonts/icomoon.svg#icomoon’) format(‘svg’);
font-weight: normal;
font-style: normal;
font-variant:normal;
}

[data-icon]:before {
font-family: ‘icomoon’;
content: attr(data-icon);
speak: none;
font-weight: normal;
line-height: 1;
-webkit-font-smoothing: antialiased;
}

I then use the relvant icon in my html (data-icon=””)

Anybody got any suggestions.

Many thanks.

[chrisburton]

@font-face {
font-family: ‘icomoon’;
src:url (‘../fonts/icomoon.eot’);
src: local(‘☺’),
url(‘../fonts/icomoon.eot?#iefix’) format(’embedded-opentype’),
url(‘../fonts/icomoon.woff’) format(‘woff’),
url(‘../fonts/icomoon.ttf’) format(‘truetype’),
url(‘../fonts/icomoon.svg#icomoon’) format(‘svg’);
font-weight: normal;
font-style: normal; font-variant:normal;
}

[data-icon]:before {
font-family: ‘icomoon’;
content: attr(data-icon);
speak: none;
font-weight: normal;
line-height: 1;
-webkit-font-smoothing: antialiased;
}

[chrisburton]

Can we see a live site?

[chrisburton]

Weirddd. I think this has happened to a few others as well. What I would do is go back to icomoon and reselect those icons. When you click on font, you will see your icons within boxes. At the top of each box there is a question mark that you can click, give them a letter and use that for the data icon value.

What I did for mine was use h (heart), d (dribbble), i (instagram), etc.

[chrisburton]

Nothing at all shows up for me in IE8 but I do see the `?` within a box in view source.

[simplybikes]

That’s interesting as I would have thought that the html code would appear in there, the likes of data-icon=””
instead of just data-icon=”?”. Mmmmm

[chrisburton]

You get an x inside of a box, I get a ? inside of a box. That’s what I meant.

[simplybikes]

It’s a bit of a puzzler. IE9 is fine, IE7 nothing at all but that’s OK, IE 8 a box. I agree Josh, the icons are just not being recognised. What I’m going to do is use a different set of icons like Heydings icons and not using the data icon attribute but using psudo classes and see what happens. I think a bit of trial and error is called for. I’ll let you know what happens. Have a good weekend.

[simplybikes]

Chris / Josh…following on from the IE8 issue on Friday I’ve looked at various suggestions but none worked until I tried implementing the one here: http://andymcfee.com/2012/04/04/icon-fonts-pseudo-elements-and-ie8/.
Basically I think it forces a page reload and it works once I ignore an error message that I get in relation to the following script:

I get an error which says – Error: $ is undefined. Since looking at js for me is like looking into a black hole would you have any idea what the issue is.

Many thanks.

[simplybikes]

can’t thank you enough.

[simplybikes]

Josh…just when I thought I was sorted I get this message:

Error: ‘$.browser.msie’ is null or not an object

My code is as follows:

Any ideas? This approach definitely works as when I ignore that warning the page works fine everytime.

[simplybikes]

I am using 1.9.1 and testing the site on IETester to get it to work on iE8

[simplybikes]

Thanks Josh. You’re right about IE Tester as all sorts of weirdness started happening today when I changed the $.browser reference. The icons started to swop positions, absolutely bizarre.

Am I on the right lines with the following:

if ($.support.msie && 8 == parseInt($.browser.version)) { $(function() { var $ss = $(‘#base-css’); $ss[0].href = $ss[0].href; }); }

or should I change ($.browser.version) to ($support.version).

Thanks.

[Author]

Posts