Font Awesome 图标不会在 IE11 中打印

Question

我们正在开发的项目是一个 Angular Web App。我正在尝试打印使用 FontAwesome 图标作为复选框和其他一些内容的内容列表。当我调用

$window.print()

时，IE11、Firefox 和 Chrome 的预览会正确显示。该页面在 Firefox 和 Chrome 中可以正确打印（带有图标），但在 IE 中则不行。我们正在从新窗口进行打印，但我认为这不会产生影响，因为在打印对话框出现之前，图标会在新窗口中正确加载。

TL；博士

在 IE 中，页面以正确的样式打印，但所有 Font Awesome 图标均丢失。这可能是什么原因造成的？

相关信息

字体真棒已加载（图标在打印前显示在页面上）。

我正在尝试设计这个：

<span class="fake-checkbox checked">
    <div class="checkbox-selection-mark"></div>
</span>

使用此规则（为简洁起见，排除其他规则）：

<style>
   .fake-checkbox.checked::before {
      font-family: FontAwesome; 
      content: "\f00c";
    }
</style>

它应该看起来像这样

我已经包括了这个：

<meta http-equiv="X-UA-Compatible" content="IE=edge">

Answer 1

当你添加时它通常会起作用

<meta http-equiv="X-UA-Compatible" content="IE=edge">

但是由于您已经包含了此内容并且它仍然无法正常工作，因此请尝试将以下内容添加到 font-awesome.css 文件的开头（在 @font-family 调用之前）：

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

Firefox（以及较小程度上的 Chrome 和 IE）存在无法下载字体的问题，因此无法正确显示任何图标。

在许多位置都发现了一个非常简单的修复，cdnjs/cdnjs#755 就是其中之一。

Answer 2

我遇到了类似的情况，对我来说，我必须在图标本身上指定宽度和/或高度。

在浏览器中设置字体大小似乎可以很好地调整大小，但由于某种原因在打印时没有正确应用。

我在 React 中使用 fontawesome 作为上下文。