Colored Bootstrap Glyphicons 打印成黑色

Question

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

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

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

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

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

CSS 媒体设置为 all 并且我使用 PHP ?t= 确保没有缓存time(); 在 CSS-file.

之后

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

Answer 1

如果屏幕上的颜色正确而印刷品中的颜色不正确，您可能需要找到印刷品的 css 规则。

尝试在您的样式表中查找媒体查询“@media print”。可能你会在它下面的某个地方发现错误的颜色规则。

Answer 2

代码似乎是正确的并且在我这边工作。尝试清除浏览器的缓存和 cookie。如果仍然出现问题，请尝试使用 jquery

进行更改

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

Answer 3

打印样式-sheets 可能有这样的问题。您使用哪个浏览器进行打印？

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

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

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

Answer 4

除非绝对必要，否则请远离 !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。使用 class 名称创建您自己的更具体的印刷媒体查询，而不仅仅是星号，这意味着一切。

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

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

Answer 5

好的，所以我已经尝试了建议的解决方案，但无法正常工作。

我最终不得不转到 Bootstraps 自己的 @media print 设置并删除 color:#000 !important

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

感谢大家的参与！

Answer 6

我遇到了同样的问题。实际上，在 Bootstrap 样式表中你有

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

以上片段来自原BootstrapCSS文件，请勿复制粘贴，解决不了问题这样每打印时符号（包括字形）为黑色。我找到的唯一解决方案是从 bootstrap CSS 样式表中删除此部分。完成此操作后，我可以使用浏览器中的 PDF 打印机将设计好的页面以适当的颜色打印成 PDF 文件。

顺便说一句，这允许恢复所有被覆盖的背景颜色和阴影（但是，根据其他帖子，它们可以使用您自己的定义和 @media print 和 !important 来恢复）。

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

更新：正如 Andreas 在中提议的那样，没有必要删除整个“@media print”部分。如果您只想使字形图标颜色正确，那么从本节中删除以下行实际上就足够了：

color: #000 !important;

Answer 7

永远不要修改 Bootstraps less 文件，它最终会变成维护地狱。您的问题很可能是图标将呈现为 i:before 而不是 i 元素的内容。所以让自己的css成为：

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

Answer 8

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

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

Colored Bootstrap Glyphicons 打印成黑色

Colored Bootstrap Glyphicons is printed black

css

printing

twitter-bootstrap

glyphicons

twitter-bootstrap-3