Farbe des Glyphicon-Symbols ändert sich in der Druckvorschau nicht

Ich habe die Farbe des Glyphicon-Symbols so geändert, dass sie blau ist. Um die Farbe zu ändern, habe ich den folgenden Code verwendet.Farbe des Glyphicon-Symbols ändert sich in der Druckvorschau nicht

<!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>

Im Bildschirm wird es als blaue Farbe

Aber in der Druckvorschau zeigt das Symbol als schwarze Farbe angezeigt wird

I Chrome-Browser verwenden. Ich muss das Symbol in der Druckvorschau in blauer Farbe erscheinen lassen

Quelle

2016-07-29 Vaishali

http://stackoverflow.com/questions/7615681/grey-font-color-printing –

Es kann helfen Ihnen –

Dank für Ihre Hilfe danken. Aber die Textfarbe wird geändert, nur die Farbe des Glyphyon-Symbols ändert sich nicht im Druck. – Vaishali

Nach der Überprüfung Ihres Symbols wird offensichtlich, dass Sie :before als Selektor für Ihr Symbol haben müssen, damit Sie die Farbe im Druck richtig anwenden können. Siehe Abbildung unten:

Das heißt, müssen Sie Ihre CSS entsprechend ändern. Führen Sie das folgende Snippet aus und drücken Sie Ctrl+P. Sie werden feststellen, dass Ihr Symbol in der Druckvorschau jetzt blau ist.

  .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>

Quelle

2016-07-29 06:33:48 Noel

Farbe des Glyphicon-Symbols ändert sich in der Druckvorschau nicht

Antwort

Verwandte Themen