Question

我有一个新的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和完全限定路径而不是相对链接
尝试了标记的几种变体
在控制台或网络调试器中的404s中验证没有错误

我不确定我还能尝试什么，觉得我花了很多时间来尝试让一些图标工作。这令人沮丧，因为该网站在Chrome和Firefox中看起来非常不错。

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

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

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

我试过

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

任何有关故障排除的指导都将受到赞赏。

Answer 1

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

Answer 2

我刚遇到此问题，但发现它实际上是由字体文件驻留在不同的子域中引起的。在提供字体时添加Access-Control-Allow-Origin标题可以解决问题。

Apache .htaccess代码段

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

nginx虚拟主机文件摘要

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

可以找到更多信息here（片段的原始来源）。

Answer 3

另一种可能性（我只花了4个小时调试）是IE-11在你不知情的情况下又回到了旧的文档兼容模式。要做的是确保自动检测到的目标真正读取＆＃34; Edge＆＃34;。就我而言，它是空白的。

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

但仍然没有Fontawesome。

如果您的HD空间不足，因为我的VM已经运行不足并且可用的临时缓存低于特定大小，IE会默默地恢复为以兼容模式显示所有网站（无论您的设置是何时关于何时到使用兼容模式）。

Answer 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>

无法获得FontAwesome使用MVC 5在IE 11中工作

4 个答案: