グリフコンアイコンの色が印刷プレビューで変更されていません

グリフコンアイコンの色を青に変更しました。色を変更するには、次のコードを使用しました。グリフコンアイコンの色が印刷プレビューで変更されていません

<!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ブラウザを使用してい

しかし、印刷プレビューでアイコンは黒い色として表示されるような青色を示しています。

出典

2016-07-29 Vaishali

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

それは –

はあなたの助けをありがとう、あなたに役立つかもしれません。しかし、文字の色は変更されていますが、グリフコンアイコンの色だけが印刷時に変化しません。 – Vaishali

アイコンを確認した後、アイコンを選択するには: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>

出典

2016-07-29 06:33:48 Noel

グリフコンアイコンの色が印刷プレビューで変更されていません

答えて

関連する問題