图标字体不会在Internet Explorer中工作

Question

我必须在作为字体的图标上创建笔触效果。我已经尝试了文本阴影技术，但问题是它非常不稳定，所以我最终做的是将轮廓与图标分离并将其作为字体导出然后再将它们合并到彼此。

它现在完美无瑕！......只是不在IE中。

我并不确定我能解释我的问题，然后再向大家展示： 自定义字体在jsfiddle中不起作用，因此我暂时将其添加到 - http://babysignlanguage.co.za/icon_fonts/

下面是代码：

CSS：

@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;
}
body {background:#99FFCC;}
.menu_icon_gen {font-size: 6em; font-family: 'icomoon';}
.space { letter-spacing:-2em; zoom:1;}
.left {float:left;}
.green {color:#ACBB72;}
.white {color:#FFF;}

HTML

<div class="menu_icon_gen" aria-hidden="true">
    <span class="green space left">&#xe000;</span> 
    <span class="white">&#xe001;</span>

<div class="menu_icon_gen" aria-hidden="true">
    <span class="green space left">&#xe002;</span> 
    <span class="white">&#xe003;</span>
</div>

Answer 1

我将position: relative提供给div，将position: absolute提供给span。

在IE 9中为我工作。