css - 彩色 Bootstrap Glyphicons 打印成黑色

Question

我无法让彩色 Glyphicons 以我设置的颜色打印。它是黑色打印的。

<i class="glyphicon glyphicon-time text-success"></i>

我在打印普通文本时遇到了同样的问题，但我在 CSS 文件中添加了 !important，如下所示:

.text-success {color:#688c2a !important}

我也尝试过将它添加到它的父级，但结果相同。它在屏幕上看起来不错。我正在使用 Bootstrap 3。

CSS 媒体设置为 all 并且我在 CSS 文件之后使用 PHP ?t=time(); 确保没有缓存。

关于如何让它也适用于 Glyphicons 的任何想法？

Answer 1

除非绝对必要，否则请远离 !important。 Bootstrap 3 有一个打印样式的媒体查询，它继承了字形的这种样式:

@media print *, :after, :before {
    color: #000!important;
    text-shadow: none!important;
    background: 0 0!important;
    -webkit-box-shadow: none!important;
    box-shadow: none!important;
}

如您所见，他们已经在执行 !important。创建您自己的更具体的打印媒体查询，使用类名而不是仅代表一切的星号。

@media print .text-success {
    color:#688c2a !important;
}

如果它仍然没有覆盖样式，那么使用 !important。关键是使用打印媒体查询来做这样的事情。