Question

我将glyphicon图标的颜色更改为蓝色。要更改颜色，我使用了以下代码。

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
    <style>
          .colorful {
                color: blue !important;
            }
            @media print {
              .colorful {
                color: blue !important;
            }
        }
    </style>
</head>
<body>
    <span class="glyphicon glyphicon-comment colorful" style="padding-left:100px;padding-top:100px"></span>
</body>
</html>

在屏幕中显示为蓝色

但在打印预览中，图标显示为黑色

我正在使用Chrome浏览器。我需要在打印预览中使图标显示为蓝色

Answer 1

检查完图标后，显然需要:before作为图标的选择器，以便正确应用打印颜色。见下面的截图：

那就是说，你需要相应地修改你的CSS。运行下面的代码段，然后按Ctrl+P。你会发现你的图标在打印预览中现在是蓝色的。

          .colorful {
                color: blue !important;
            font-size:41px;
            }
            @media print {
              .colorful:before {
                color: blue !important;
            }
        }

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
    <span class="glyphicon glyphicon-comment colorful" style="padding-left:100px;padding-top:100px"></span>

glyphicon图标的颜色在打印预览中没有变化

1 个答案: