Internet Explorer 9 上的零星字体图标

Question

我有一个网站在两个不同的页面上使用 Glyphicons 和 Font-Awesome 字体图标，具有相同的行为：这些图标在 IE9 中不显示，但在 Chrome/Firefox 中完美运行。

做的事情：

• 从外部 CDN 加载图标

  <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"  rel="stylesheet">
  

  从外部 CDN 加载 font-awesome css/fonts 可以使图标可靠地工作。不幸的是，这个网站是一个内联网，不能访问互联网。 这是不行的。

  • 通过重定向加载页面

  出于某种原因，每当我重定向到其中一个页面时，IE9 都会中止 GETing 一些 css 文件，然后才重新加载它们。

  在这种情况下，图标会按预期显示。所以我猜异常请求是相关的。但是以正常方式加载页面会导致图标消失，并且 css 可以正常加载。 如果有人可以向我解释这一点，那就太好了。

不起作用的事情：

• 配置服务器为字体文件正确设置Content-Type。我已经匹配了 CDN 上使用的 mime 类型，所以即使我的值错误，也无法解决问题
• 在 IE 中关闭 compatibility view
• 减少IE security settings
• 在页面中添加html5shiv/respond.js (html5shiv)
• 将font-awesome css 文件移动到页面上的其他位置。

• 在页面上手动加载glyphiconeot字体文件，如下所示：

  <link rel="stylesheet" type="application/vnd.ms-fontobject" href="/some/absolute_path/fonts/glyphicons-halflings-regular.eot"/>
  

我看过的东西：

这些可能有用也可能没用，但似乎代表了事物的状态。

• compatibility view
• security settings
• html5shiv
• 错误的重定向问题：
  • Unsolved SO question
  • Unsolved MSDN question

Answer 1

这似乎是在 github 上为 Font Awesome 报告的错误。查看thorst's solution，它似乎可以为大多数人解决问题。

对于链接恐惧：

I had to change font-awesome.css

发件人：

src: url('../font/fontawesome-webfont.eot?#iefix') format('eot'), url('../font/fontawesome-webfont.woff') format('woff'), url('../font/fontawesome-webfont.ttf') format('truetype'), url('../font/fontawesome-webfont.svg#FontAwesome') format('svg'); 

收件人：

src: url('../font/fontawesome-webfont.eot?#iefix') format('embedded-opentype'), url('../font/fontawesome-webfont.woff') format('woff'), url('../font/fontawesome-webfont.ttf') format('truetype'), url('../font/fontawesome-webfont.svg#FontAwesome') format('svg');