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:
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.
One thing of note is that in Chrome, in the data-icon attribute source I see a little square . . . I’m guessing this is because it’s a (possibly pasted-in) Unicode character or something? Following @chrisburton‘s suggestion might do the trick for you.
Hi Chris….yes weird it is, it’s driving me crazy because yesterday when I tested in IE 8 it worked. I’ll give you’re suggestion a wirrel and replace the html value with a letter and see what happens. I’ve noticed that in IE9 the same box appears for a milli second before the icon loads.
Using a clean install of IE8 in a virtual machine running Win XP, it just seems as if the icon font simply isn’t loading. Taking a look in IE9 on Win7, it loads fine, but if I set browser mode to IE8, it seems as if none of your [data-icon]:before styles are being recognized, as they’re all marked out within the IE Developer Tools window.
Edit: Nope, that doesn’t seem to be the problem, as any new styles added under that declaration clearly take effect. Curiouser and curiouser.
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.
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.