字形图标的颜色在打印预览中没有改变答案

【问题标题】：colour of the glyphicon icon is not changing in print preview字形图标的颜色在打印预览中没有改变
【发布时间】：2016-12-03 17:29:30
【问题描述】：

我将字形图标的颜色更改为蓝色。要更改颜色，我使用了以下代码。

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
    <style>
          .colorful {
                color: blue !important;
            }
            @media print {
              .colorful {
                color: blue !important;
            }
        }
    </style>
</head>
<body>
    <span class="glyphicon glyphicon-comment colorful" style="padding-left:100px;padding-top:100px"></span>
</body>
</html>

在屏幕上显示为蓝色

但在打印预览中，图标显示为黑色

我正在使用 chrome 浏览器。我需要让图标在打印预览中显示为蓝色

【问题讨论】：

stackoverflow.com/questions/7615681/grey-font-color-printing
可能对你有帮助
感谢您的帮助。但是文本颜色正在改变，只有 glyphyicon 图标颜色在打印中没有改变。

标签： twitter-bootstrap-3

【解决方案1】：

检查您的图标后，很明显您需要将:before 作为图标的选择器，以便您可以在打印中正确应用颜色。请看下面的截图：

也就是说，您需要相应地修改您的 CSS。运行下面的 sn-p，然后按 Ctrl+P。您会注意到您的图标现在在打印预览中是蓝色的。

          .colorful {
                color: blue !important;
            font-size:41px;
            }
            @media print {
              .colorful:before {
                color: blue !important;
            }
        }

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
    <span class="glyphicon glyphicon-comment colorful" style="padding-left:100px;padding-top:100px"></span>

【讨论】：