字体真棒图标不会在IE11中打印

Question

我们正在开发的项目是Angular Web App。我正在尝试打印一个内容列表，其中使用FontAwesome图标作为复选框和其他一些内容。当我致电$window.print()时，预览会正确显示IE11，Firefox和Chrome。页面在Firefox和Chrome中正确打印（带图标）但不是IE。我们正在从一个新窗口进行打印，但我认为这不会影响，因为在打印对话框出现之前，图标会在新窗口中正确加载。

TL; DR

在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就是其中之一。