Question

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

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

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

Answer 1

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

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

Answer 2

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

Answer 3

我只是使用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>

字体真棒图标仅以黑色打印

3 个答案: