无法使用 MVC 5 在 IE 11 中使用 FontAwesome答案

【问题标题】：Cannot Get FontAwesome Working in IE 11 with MVC 5无法使用 MVC 5 在 IE 11 中使用 FontAwesome
【发布时间】：2014-03-20 01:19:01
【问题描述】：

我有一个新的 MVC 5 项目，我正在尝试让 FontAwesome 显示 _Layout 页面中的图标。它在 Chrome、Firefox 甚至 Visual Studio 中的 Page Inspector 中都能正常工作。当我在 IE 11 中启动该网站时，它只显示一个空白区域。

到目前为止我已经尝试过：

确保 font-awesome.css 和字体正在下载到浏览器中
检查字体所在目录的路径是否正确
从 BundleConfig 加载并将链接直接放在布局页面上
使用 Nuget 安装 FontAwesome 并尝试使用 Nuget Html Helper for FontAwesome
尝试将字体的 MIME 类型添加到 web.config 中
尝试使用 CDN 和完全限定路径而不是相对链接
尝试了标记的几种变体
验证控制台中没有错误或网络调试器中没有 404

我不确定我还能尝试什么，感觉我已经花了很多时间来尝试让一些图标正常工作。令人沮丧的是，该网站在 Chrome 和 Firefox 中看起来非常好。

我正在使用从 WrapBootstrap 下载的模板，但他们的示例在 IE 11 中有效，我已尽力模仿他们的标记。

下面是我正在使用的布局页面中的标记，这直接来自他们的模板，它适用于 FF/Chrome。

<i class="icon-dashboard"></i>

我试过了

<i class="fa fa-dashboard"></i>

我们将不胜感激任何有关故障排除的指导。

【问题讨论】：

如果你从 CDN 获得 fontawesome 是否有效
不，我试过了，得到了相同的结果。适用于 Chrome/FF，但不适用于 IE。
其实没那么复杂。如果它可以在 Chrome 和 Firefox 中运行，它将在 IE11 中运行。我的猜测是，您要么在某个时候将渲染引擎切换到 IE7 并忘记了，不小心点击了兼容模式按钮（呈现为 IE7），要么在兼容模式下工作（取决于您的本地或 GP 设置，如果这是一台工作机器，兼容模式可能是本地和/或 Intranet 站点的默认设置）。
@ChrisPratt 非常感谢！！在早期的一些故障排除过程中，我已将此站点置于兼容模式，但没有将其关闭。你死定了。我希望这对我来说和对你一样容易。将此作为答案，我会接受。
完成。很高兴你能解决它。

标签： html css asp.net-mvc asp.net-mvc-5 font-awesome

【解决方案1】：

其实并没有那么复杂。如果它可以在 Chrome 和 Firefox 中运行，它将在 IE11 中运行。我的猜测是，您要么在某个时候将渲染引擎切换到 IE7 并忘记了，不小心点击了兼容模式按钮（呈现为 IE7），要么在兼容模式下工作（取决于您的本地或 GP 设置，如果这是一台工作机器，兼容模式可能是本地和/或 Intranet 站点的默认设置）。

【讨论】：

谢谢！我为此扯了一天的头发（这是为了 Glyphicons，而不是 FontAwesome）。 SO 和其他地方的大多数点击都是关于 MIME 类型、字体库位置等，这些都很好。它在 IE 上对 localhost 有效，但对机器名无效。在 Chrome 和 Firefox 中工作。事实证明，我正在开发一个 Intranet 应用程序，并且我们在工作中的 IE 策略默认情况下为 Intranet 站点打开了兼容性视图。解决方法（因为我们依赖于许多其他应用的这种行为）是使用 <meta http-equiv="X-UA-Compatible" content="IE=10"/> 方法。
对于它的价值，您的基础架构团队可以简单地管理需要兼容模式的站点列表，无论是否有 Intranet，而不是强制 Intranet 上的所有东西都使用它。这只是比单击一个复选框并去吃午饭要困难一点。
是的，但在我们的例子中，该列表将是“大部分 Intranet”。此时，在我们构建新应用程序时，将逐个项目的元标记添加到主/布局页面更容易。希望未来我们的 LOB 应用程序供应商能够赶上 21 世纪，然后我们可以开始让兼容性视图成为例外，而不是常态。我只是希望有办法提出这个 SO 问题并在搜索排名中获得更高的答案！

【解决方案2】：

我刚遇到这个问题，但发现它实际上是由于字体文件位于不同的子域上造成的。在提供字体时添加 Access-Control-Allow-Origin 标头可以解决问题。

Apache .htaccess sn-p

<FilesMatch "\.(ttf|otf|eot|woff)$">
  <IfModule mod_headers.c>
    Header set Access-Control-Allow-Origin "*"
  </IfModule>
</FilesMatch>

nginx虚拟主机文件sn-p

location ~* \.(eot|otf|ttf|woff)$ {
    add_header Access-Control-Allow-Origin *;
}

更多信息可以在here（sn-ps的原始来源）找到。

【讨论】：

【解决方案3】：

另一种可能性（我只花了 4 小时调试）是 IE-11 在您不知情的情况下退回到旧的文档兼容模式。要做的是确保自动检测到的目标确实读取“边缘”。就我而言，它是空白的。

文件正在下载。
MIME 类型和标头是正确的。
我的文档设置了正确的兼容性元标记。
我可以冲浪。
控制台未显示 JS 错误（或任何类型的错误）。

但仍然没有 Fontawesome。

如果您的 HD 与我的 VM 一样，空间不足，并且可用的临时缓存低于某个大小，IE 会默默恢复为以兼容模式显示所有网站（无论您的设置是什么）使用兼容模式）。

【讨论】：

【解决方案4】：

在你的 web.config 中试试这个。它应该适用于 Font-awesome 4.7：

<system.webServer>
    <staticContent>
      <remove fileExtension=".svg" />
      <remove fileExtension=".eot" />
      <remove fileExtension=".woff" />
      <remove fileExtension=".woff2" />
      <remove fileExtension=".otf" />
      <mimeMap fileExtension=".svg" mimeType="image/svg+xml"  />
      <mimeMap fileExtension=".eot" mimeType="application/vnd.ms-fontobject" />
      <mimeMap fileExtension=".woff" mimeType="application/font-woff" />
      <mimeMap fileExtension=".woff2" mimeType="font/woff2" />
      <mimeMap fileExtension=".otf" mimeType="application/font-sfnt" />
    </staticContent>
</system.webServer>

【讨论】：