Css 彩色引导图示符图标打印为黑色

我无法使用我设置的颜色打印彩色图标。它是黑色的

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

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

CSS媒体设置为all，我使用PHP？t=time（）确保没有缓存；在CSS文件之后

---

关于如何让它在字形图标上也起作用，你有什么想法吗？

如果屏幕上的颜色是对的，而印刷品上的颜色是错的，你可能需要找到印刷品的css规则

---

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

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

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

---

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

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

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

编辑：

---

如果您不介意在html中使用css，您可以尝试在html标签中添加这些样式。

远离！重要，除非绝对必要。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;
}

正如你所看到的，他们已经开始执行了！重要的。创建自己的打印媒体查询，使用类名而不是星号（表示所有内容）更具体

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

---

如果仍然没有覆盖样式，则使用！重要的。关键是使用打印媒体查询来查询类似的内容。

好的，所以我尝试了建议的解决方案，但无法实现

我最后不得不去Bootstraps自己的

@media print

设置并删除它

color:#000！重要信息

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

---

谢谢大家的投入

我也有同样的问题。实际上，在引导样式表中

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

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

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

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

---

更新：根据Andreas在年的建议，无需删除整个“@media print”部分。如果您只想使GlyphIcon颜色正确，则从本节中删除以下行实际上就足够了：

color: #000 !important;

---

永远不要修改无引导文件，它最终将成为一个维护地狱。 您的问题很可能是图标将呈现给i:before，而不是i元素的内容。 因此，您需要有自己的css：

---

.text success:before{color:688c2a！important}

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

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

---

你在用彩色打印机吗？我就知道有人会问这个问题。非常有趣对不起，我无法抗拒。你能举个代码示例吗？我猜你没有把规则放在打印样式表中。示例就在问题中。它只适用于文本，不适用于图标。非常令人沮丧。我指的是JSFIDLE、codepen或类似的例子。以这种方式制作一个最小的测试用例通常可以帮助您解决问题，如果您仍然无法解决问题，请发布示例。感谢您的输入。我已将您的建议添加到我的打印表中，但它仍然只适用于文本，而不适用于字形图标。您可以将其缩小到.glyphicon:before在@media查询中将引导文件设置为media=“all”。奇怪的是，颜色只应用于文本。如果您查看打印样式包含在打印媒体查询中，那么我认为这将覆盖它。好的，我在引导文件中找到了这一行：@media print{，：before，*：after{背景：透明！重要；颜色：#000！重要；…删除的颜色：#000！重要；现在它可以工作了。@media print.text success{*{-webkit print color adjust:exact；print color adjust:exact；}这不起作用。我必须从引导媒体打印中删除颜色：#000！重要。这与我之前发布的解决方案接近。我只删除了行：颜色：#000！重要；它成功了。

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