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="&#xe003;"><a href, etc.) to display the icon in my navigation.

What could the problem be?

Answer 1

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

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