彩色引导字形打印为黑色

Question

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

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

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

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

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

CSS

媒体设置为全部，我已经确保在CSS文件之后使用PHP ？t=time((没有缓存。

关于如何让它在 Glyphicon 上工作的任何想法？

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。关键是使用打印媒体查询进行此类操作。

Answer 2

我遇到了同样的问题。实际上，在引导样式表中，您有

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

上面的片段来自原始的 Bootstrap CSS 文件，不要复制粘贴这个，它不会解决问题。这使得每个符号(包括字形(在打印时都变黑。我找到的唯一解决方案是从引导 CSS 样式表中删除此部分。完成此操作后，我能够使用浏览器中的PDF打印机将具有适当颜色的设计页面打印到PDF文件中。

顺便说一下，这允许恢复所有被覆盖的背景颜色和阴影(但是，它们可以使用您自己的定义进行恢复，@media打印和！important根据其他帖子(。

这种解决方案的一个不便之处在于，一旦您更新了 Bootstrap 版本，您将需要执行相同的(手动(操作以保持打印固定。

---

更新：正如安德烈亚斯在他的回答中提出的，没有必要删除整个部分"@media打印"。实际上，如果您只想使字形正确着色，则从本节中删除以下行就足够了：

color: #000 !important;

Answer 3

好的

，所以我尝试了建议的解决方案，但我无法让它工作。

我终于不得不转到引导程序自己的@media print设置并删除 color:#000 !important

太奇怪了，在删除那行之前，我只能让颜色打印在文本上。我不知道是否有更好的解决方案，但这就是我解决它的方式。

感谢大家的投入！

Answer 4

如果屏幕上的颜色是正确的，而打印的颜色是错误的，您可能需要查找打印的 css 规则。

尝试在样式表中查找媒体查询"@media打印"。也许您会在它下面的某个地方找到错误的颜色规则。

Answer 5

代码似乎是正确的，并且可以在我这边找到。 尝试清除浏览器的缓存和 Cookie。如果问题仍然存在，请尝试使用jQuery进行更改

$('.text-success').css('color', 'red');

Answer 6

打印样式表可能会出现此类问题。您使用哪种浏览器进行打印？

@media print and (color) {
   * {
      -webkit-print-color-adjust: exact;
      print-color-adjust: exact;
   }
}

尝试将此代码添加到样式表中。另外，请在打印前在浏览器中检查您的格式和打印选项。希望这有帮助。

编辑：如果你不介意在你的html中使用css，你可以尝试在你的html <style>标签中添加这些样式。

Answer 7

永远不要

修改引导程序更少的文件，它最终会成为一个维护地狱。很可能您的问题是图标将呈现为 i：before，而不是 i 元素的内容。所以有自己的css是：

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

Answer 8

最好覆盖 css 而不是更改供应商文件;

@media print {
  *, *:before, *:after {
    color: inherit !important;
}