цвет символа глификона не меняется в предварительном просмотре

Я изменил цвет значка глификона на синий. Чтобы изменить цвет, я использовал следующий код.цвет символа глификона не меняется в предварительном просмотре

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

В экране он показывает, как синий цвет

Но при предварительном просмотре отображается значок в виде черного цвета

Я использую хром браузер. Мне нужно, чтобы значок отображался синим цветом в предварительном просмотре печати

источник

2016-07-29 Vaishali

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

Это может помочь вам –

Спасибо за вашу помощь. Но цвет текста меняется, только цвет значка glyphyicon не изменяется в печати. – 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

цвет символа глификона не меняется в предварительном просмотре

ответ

Смежные вопросы