Css 字体面图标字体跨浏览器和移动浏览器兼容性

我正在使用CSS在我正在创建的分析工具上提供矢量图标来代替图像。这使得加载速度更快，图像缩放更清晰。它们在chrome和firefox上运行良好。然而，它们并没有出现在IE9或更老的android手机上（我认为是v4.0之前）

我已经复制了下面的相关CSS。我应该在CSS中添加一个并行部分，指定浏览器或屏幕大小以适应这些设备吗？或者我可以在这个CSS中做些什么来修复一个bug，或者提供一个回退图像？目前，浏览器根本没有显示图标应该在哪里

@font-face {
    font-family: 'unicorns';
    src: url('font/unicorns.eot');
    src: url('font/unicorns.eot') format('embedded-opentype'),
         url('font/unicorns.woff') format('woff'),
         url('font/unicorns.ttf') format('truetype'),
         url('font/unicorns.svg#unicorns') format('svg');
}


.icon:before {
    font-family: "unicorns", sans-serif !important;
    -webkit-font-smoothing: antialiased;
    -o-transform: scale(1);
    /*text-rendering: optimizeLegibility; not supported in all browsers
    The text-rendering property is an SVG property that is not defined in any CSS standard. However, Gecko and WebKit browsers let you apply this property to HTML and XML content on Windows, Mac OS X and Linux.*/
}
.boy:before {content: "a";}
.girl:before {content: "b";}

.respect:before {content: "r";}
.freedom:before {content: "m";}
.fun:before {content: "p";}

.icon-green:before {color: #008000;}
.icon-yellow:before {color: #e9b800;}
.icon-red:before {color: #cc0000;}
.icon-pink:before {color: #ff99ff;}

.icon-10:before {font-size: 10px; margin-right: 2px;}
.icon-30:before {font-size: 30px; margin-right: 5px;}
.icon-60:before {font-size: 60px; margin-right: 5px;}
.icon-90:before {font-size: 96px; margin-right: 5px; line-height: 100px;}  

更新：我在'font/unicorns.eot？#iefix'中添加了#iefix，因为它应该修复ie8及以下的问题。但这并不能解释为什么IE9上根本没有出现这种情况。