Font Awesome 图标仅以黑色打印

Question

我正在开发一个必须打印包含 Font Awesome 图标的页面的网站。问题是当您打印时，Font Awesome 图标不会以彩色打印。

在浏览器中它们以彩色显示，但在打印页面时图标为纯黑色。有没有办法让 Font Awesome 图标以彩色打印？也许通过 CSS 和 @media print { }?

编辑：另外，我正在 firefox 中开发。

Answer 1

我只是使用 font-awesome 整理了一个简单的 HTML 示例，它似乎在 Chrome 和 Firefox 中对我来说工作正常。我在屏幕上看到红色图标，并且它也打印为红色，无需任何进一步操作。话虽如此，如果您的 HTML 页面允许，创建一个单独的媒体 CSS 是个好主意，因为它可以提供更好的用户体验（屏幕视图并不总是适合打印）。

您确定没有将打印机设置修改为不进行彩色打印吗？打印机是否没有那种颜色，因此默认恢复为纯黑色？您是否在其他浏览器（Chrome、Safari、Opera、IE）中尝试过？

这是我用来测试的简单代码：

<html>
 <head>
        <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
  <title>Fontawesome Test</title>
  <style type="text/css">
   .fa { color:red; }
  </style> 
 </head>

 <body>
  <i class="fa fa-camera-retro">  Testing color</i>  fa-camera-retro 
 </body>
</html>

Answer 2

如果您使用的是 bootstrap，则需要编辑它的 CSS，因为它为“@media print”指定了黑色

Answer 3

事实证明，您实际需要着色的项目不是 i 本身，而是它的 :before 元素。因此：

<style type="text/css">
  .fa:before { color:red; }
</style>

Font Awesome 图标仅以黑色打印

Font Awesome Icons only printing in Black

html

css

printing

fonts

font-awesome