字体神器图标在IE7上无法显示

Question

Font Awesome图标在IE7上无法显示，但在IE8、IE9、FF和Chrome上可以正常显示。

示例HTML：

<span rel="tooltip" data-placement="top" data-original-title="Click to add question to favorites">
    <i class="icon-star-empty"></i>
</span>

包含的文件：

<link href="/css/bootstrap.css" rel="stylesheet">
<link href="/css/font-awesome.css" rel="stylesheet">
<link href="/css/font-awesome-ie7.css">

请求 .woff 文件:

Request: 
URL:http://example.com/font/fontawesome-webfont.woff

Response:
Accept-Ranges:bytes 
Connection:Keep-Alive 
Content-Length:41752
Content-Type:application/octet-stream 
Date:Tue, 11 Dec 2012 11:31:51 GMT 
ETag:"4095e-a318-4cf1d75fb20dd" 
Keep-Alive:timeout=5, max=98
Last-Modified:Thu, 22 Nov 2012 23:02:27 GMT Server:Apache/2.2.22 (Ubuntu)

我已经在Apache的/etc/apache2/mods-enabled/mime.conf文件中进行了配置（并重新启动了Apache）：

AddType application/octet-stream .woff

我是否遗漏了任何配置？

- martincho

Answer 1

这篇文章的快速更新。

FontAwesome不再支持IE7，但如果您处于需要支持它的不幸境地，因为您需要支持专有软件（我不会提及软件名称），该软件将其作为唯一浏览器，并且拒绝升级，即使在此帖子发布时，IE8已经发布了近4年，现在我们正在使用IE11，则按照我所做的：

1. 下载ie7.min.css文件并按上面答案中指示的添加部分内容。

2. 打开ie7.min.css文件并将所有“.icon-”更改为“.fa-”，因为FontAwesome已更改其命名约定。

这将为FA 4.0.3中的约95％的图标提供支持（新引入的字体在旧ie7.min.css文件上将不受支持）。

- David Glass

---

支持已在Font Awesome 4.0.0中删除，因此ie文件的最新版本位于最新的3.x版本中：https://github.com/FortAwesome/Font-Awesome/tree/v3.2.1/css - commonpike

那个文件中使用的CSS表达式在IE11的兼容模式下不起作用，因为有一个错误https://connect.microsoft.com/IE/feedback/details/798953/ie11-bug-expression-of-css-is-not-enabled-in-compatibility-mode-with-internet-zone。所以去买一台安装了IE7的旧电脑吧。 - commonpike

抱歉，上面的内容不太清楚。在IE11的仿真模式下它们对我没有起作用。当然，我是在尝试仿真IE7。你的情况可能会有所不同。 - commonpike

您可以始终使用常规字体文件（otf），并将其上传到Font Squirrel的Web字体生成器中，以创建IE6、7所需的.eot文件。无需坚持使用旧版本的FA。 - Erik Pöhler

@iroybot：怎么做？ - Jitendra Pancholi

就像我之前说的那样：请访问http://www.fontsquirrel.com/tools/webfont-generator，上传最新的otf字体并生成Web字体。确保勾选点选项。 - Erik Pöhler

Answer 2

最好使用IE7条件注释，这样文件只会在IE7中加载。（摘自Fontawesome示例）

<link rel="stylesheet" media="all" href="assets/css/your-icons.css" />
<!--[if IE 7]>
<link rel="stylesheet" media="all" href="assets/css/your-icons-ie7.min.css" />
<![endif]-->

- Erik Pöhler

---

你从哪里可以下载your-icons-ie7.min.css文件？ - Jitendra Pancholi

名称仅为示例。如果您想使用Font Awesome，请访问https://fortawesome.github.io/Font-Awesome/并单击下载。 如在此处的评论中所述，IE7在v3之前受支持，因此如果您想要Font Awesome 4.4的IE7 css，则需要编写它。 - Erik Pöhler

Answer 3

配置最终是正确的。由于某种原因，font-awesome-ie7.css 没有正确加载。确保该文件已加载后，一切正常。

- martincho

---

这对我非常有帮助...非常感谢@martincho - abidkhanweb

Answer 4

即使是新图标，也有一种方法可以支持IE7。

首先下载此文件作为基础。 https://gist.github.com/dorajistyle/7461853

然后，如果缺少任何图标，请在图标列表中查找该图标。例如，fa-balance-scale是新的。 http://fontawesome.io/icon/balance-scale/

您将看到Unicode字符为f24e

然后，在font-awesome-ie7.min.css的末尾添加此内容。

.fa-balance-scale {
    *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = 
'');
}

对于您使用的任何图标，请重复此步骤

- harre