Цветные бутстрапы Глификон напечатаны черными

Question

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

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

У меня была такая же проблема при печати обычного текста, но я добавил важный в файле CSS, как так:

.text-success {color:#688c2a !important} 

Я также пытался добавить его к его родителей но с тем же результатом. Он выглядит хорошо на экране. Я использую Bootstrap 3.

Формат CSS имеет значение все, и я не уверен в кеше с использованием PHP ? T = time(); после CSS-файла.

Любые идеи о том, как заставить его работать с глификонами?

Answer 1

Хорошо, поэтому я пробовал предлагаемые решения, но я не мог заставить его работать.

я, наконец, должен был пойти в бутстрапирования собственные @media print установки и удаления color:#000 !important

Так странно, что я только мог получить цвет печати на текст перед удалением этой строки. Я не знаю, есть ли лучшее решение, но я решил это.

Спасибо за каждый вход!

Answer 2

Если цвет прав на экране и что-то не так в печати, вам, вероятно, нужно найти правила CSS для печати.

Попробуйте искать медиа-запрос «@media print» в ваших таблицах стилей. Вероятно, вы найдете неправильное правило цвета где-то ниже.

Answer 3

код кажется правильным и работает на моем конце. попробуйте очистить кеш и файлы cookie браузера. и если до сих пор проблема возникает попытаться изменить его с помощью JQuery

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

Answer 4

печати таблиц стилей могут иметь такие проблемы. Какой браузер вы используете для печати?

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

Попробуйте добавить этот код в свой стиль. Кроме того, перед печатью проверьте свой формат и параметры печати в своем браузере. надеюсь это поможет.

Редактировать: Если вы не против иметь css в своем html, вы можете попробовать добавить эти стили в свои теги html <style>.

Answer 5

Держитесь подальше от! Важно, если это абсолютно необходимо. 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; 
} 

Если он по-прежнему не отменяет стиль, то используйте! Important. Ключ должен использовать запрос на печать для чего-то подобного.

Answer 6

У меня такая же проблема. На самом деле, в таблице стилей Bootstrap у вас есть

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

фрагмент выше происходит от исходного файла Bootstrap CSS, не копировать-вставить это, это не решит проблему. Это делает каждый символ (включая глификоны) черным при печати. Единственное решение, которое я нашел, - это удалить этот раздел из таблицы стилей загрузки bootstrap. После этого я могу распечатать страницу с соответствующими цветами в PDF-файле, используя принтер PDF из моего браузера.

Кстати, это позволяет восстановить все цвета фона и тени, которые также переопределены (однако они могут быть восстановлены с использованием ваших собственных определений с помощью печати @media и важны в соответствии с другими сообщениями).

Неудобство такого решения заключается в том, что после обновления версии Bootstrap вам потребуется выполнить ту же самую (ручную) операцию, чтобы фиксировать печать.

---

UPDATE: Как предложено Andreas в his answer, не нужно, чтобы удалить весь раздел «@media печати». Это на самом деле достаточно, чтобы удалить следующую строку из этого раздела, если вы хотите, чтобы сделать glyphicons право цвета:

color: #000 !important; 

Answer 7

НЕ НАВСЕГДА изменять бутстрэпами меньше файлов, он будет в конечном итоге является поддержание ад. Скорее всего, ваша проблема в том, что значок будет отображаться в i: до и не быть содержимым элемента i. Так есть свой собственный CSS быть:

.text-success:before {color:#688c2a !important}