IcoMoon icons not working in Internet Explorer 8

Question

I'm using IcoMoon icons on my site and while they work perfectly in all modern browsers they don't work at all in Internet Explorer 7 and show as little boxes in Internet Explorer 8. The CSS is as follows which is from IcoMoon apart from the relative path to the font:

@font-face {
    font-family: 'icomoon';
    src:url ('../fonts/icomoon.eot');
    src: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;
}

I'm using the data-icon attribute (e.g. <li data-icon=""><a href, etc.) to display the icon in my navigation.

What could the problem be?

Answer on your problem is in your question: IE8 ;) – Damonsson Feb 16 '13 at 14:47 — Damonsson, Feb 16 '13 at 14:47

score 1 · Answer 1 · answered May 05 '15 at 15:37

When you generate your icons on iconmoon, go to preferences and check support for ie6 and ie7 check this box

You will get a seperate ie7 folder inside your fonts, then use something like this in your head.

<!--[if lte IE 8]>
        <link rel="stylesheet" href="ie7/ie7.css">
<![endif]-->

There are two files you can use either ie7.css or ie7.js

score 0 · Answer 2 · edited May 23 '17 at 12:21

I have been trawling the Internet looking for the answer to this self-same dilemma as I use Joomla 3x with Bootstrap and IcoMoon. It too doesn't work in Internet Explorer 7 or Internet Explorer 6. According to this Stack Overflow question your issue could be:

Giving the offending elements hasLayout by assigning zoom:1 through CSS (Internet Explorer proprietary).
The @font-face declaration is different for Internet Explorer 7 (outlined in the last response to the question).
It could also be that your font type is not properly supported.

And I think @Damonsson is referring to Internet Explorer's startling ability to never do anything as expected... or required... or even pleadingly, sobbingly begged to do.

Happy hunting!

score -1 · Answer 3 · edited Nov 21 '14 at 19:35

-1

The following might help you out. PPseudo elements aren't supported prior to Internet Explorer 8. I am trying to figure out the Internet Explorer 8 dilemma myself...

http://icomoon.io/#docs/lte-ie7

edited Nov 21 '14 at 19:35

Peter Mortensen

30,738
21
105
131

answered Nov 26 '13 at 01:28

LT86

635
2
15
29

So you go around correcting typos and you end up making one yourself. 'PPseudo' isn't a word. – LT86 Nov 24 '14 at 10:20

IcoMoon icons not working in Internet Explorer 8

3 Answers3