彩色 Bootstrap Glyphicons 打印为黑色

Posted 2023-03-06

【中文标题】彩色 Bootstrap Glyphicons 打印为黑色

【英文标题】：Colored Bootstrap Glyphicons is printed black

【发布时间】：2016-05-14 03:43:43

【问题描述】：

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

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

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

.text-success color:#688c2a !important

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

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

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

【问题讨论】：

您使用的是彩色打印机吗？

我知道有人会这么问。非常有趣！ ;)

抱歉，无法抗拒。你能放一个代码示例吗？我猜你没有把规则放在打印样式表中。

示例在问题中。它仅适用于文本而不适用于字形图标。非常令人沮丧。

我的意思是 jsfiddle、codepen 或类似的例子。以这种方式制作最小的测试用例通常可以帮助您解决问题，如果您仍然卡住，请发布示例。

【参考方案1】：

如果屏幕上的颜色正确而打印出来的颜色不对，你可能需要找到打印的 css 规则。

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

【讨论】：

我已将引导文件设置为 media="all"。奇怪的是颜色只应用于文本。

如果您查看bootstrap source code，打印样式包含在打印媒体查询中，所以我认为这将覆盖它。

好的，所以我在引导文件中找到了这一行：@media print,:before,*:afterbackground:transparent !important;color:#000 ！重要的; ...并删除了颜色：#000 !important;现在它正在工作。

【参考方案2】：

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

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

【参考方案3】：

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

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

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

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

【讨论】：

@media print .text-success * -webkit-print-color-adjust: 精确；打印颜色调整：精确；这不起作用。我不得不从 Bootstraps 媒体打印中删除 color:#000 !important。

【参考方案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。创建您自己的印刷媒体查询，使用类名而不是星号来更具体地表示一切。

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

如果它仍然没有覆盖样式，则使用 !important。关键是使用打印媒体查询来处理类似的事情。

【讨论】：

感谢您的意见。我已将您的建议添加到我的打印表中，但它仍然只适用于文本而不适用于字形。

:before 为我在 PDF 上添加了一个白色字形图标。您可以在@media 查询中将其缩小到 .glyphicon:before

【参考方案5】：

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

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

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

感谢大家的意见！

【参考方案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;
  
...

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

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

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

---

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

color: #000 !important;

【讨论】：

这与我之前发布的解决方案很接近。我只删除了这一行： color:#000 !important;它成功了。

【参考方案7】：

永远不要修改 Bootstrap 更少的文件，这最终会成为维护的地狱。 您的问题很可能是图标将呈现给 i:before 而不是 i 元素的内容。 所以有你自己的css：

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

【参考方案8】：

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

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