Question

我有一个使用图标字体的网页。此网页在Chrome，Firefox和Safari中运行良好。它在Edge和IE 11中运行良好。但是，我还需要支持IE 8,9和10。我的问题是，在IE 8,9和10中，图标不会出现。您可以通过此Bootply查看问题。在其中，我有以下代码：

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" type="text/css">

<div class="container">
  <ul class="list-inline">
    <li><a href="#"><span class="material-icons">alarm_on</span></a></li>
    <li><a href="#"><span class="material-icons">alarm_off</span></a></li>    
  </ul>
</div>

令人困惑的是，我没有看到任何错误。我不确定是什么错。我还从here本地复制了字体文件。我已在名为/resources/fonts的文件夹中将字体文件添加到我的应用中。在我的应用程序的css文件中，我在顶部添加了以下内容：

@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: url('/resources/fonts/MaterialIcons-Regular.eot'); /* For IE6-8 */
  src: local('/resources/fonts/Material Icons'),
       local('/resources/fonts/MaterialIcons-Regular'),
       url(/resources/fonts/MaterialIcons-Regular.woff2) format('woff2'),
       url(/resources/fonts/MaterialIcons-Regular.woff) format('woff'),
       url(/resources/fonts/MaterialIcons-Regular.ttf) format('truetype');
}

虽然这适用于Chrome，Firefox和Safari，但它仍然无法在IE 8或9中运行。出了什么问题？

Answer 1

您应该为IE9及更低版本使用不同的HTML。您可以在素材图标网站here for alarm_on和here for alarm_off上找到它。

所以它应该是：

{{1}}

Answer 2

IE支持该字体，但只有IE版本10和更低版本，您可以使用十六进制编码。

这是一个例子，它在IE9中完美运行。

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" type="text/css">

<i class="material-icons">&#xE87C;</i>

<i class="material-icons"></i>

有关详细信息，请查看here

资源不在IE 9中呈现

2 个答案: