2015-03-29 19 views
8

Zajmuję się tworzeniem strony internetowej, która musi wydrukować stronę zawierającą ikony z czcionkami fantastycznymi. Problem polega na tym, że po przejściu do druku ikony czcionek nie będą drukowane w kolorze.Czcionka Niesamowite drukowanie tylko ikon w kolorze czarnym

W przeglądarce są wyświetlane w kolorze, ale po wydrukowaniu strony ikony są czarne. Czy mimo to ikony czcionek są kolorowe? Być może poprzez CSS z @media print {}?

EDYCJA: Ponadto rozwijam się w firefox.

Odpowiedz

9

Okazuje się, że przedmiot, który rzeczywiście potrzebuje kolorów, nie jest sam w sobie, ale jego elementem jest :before. Tak więc:

<style type="text/css"> 
    .fa:before { color:red; } 
</style> 
0

Po prostu stworzyłem prosty przykład HTML z użyciem font-awesome i wygląda na to, że działa dobrze w Chrome i Firefox. Ikona jest wyświetlana na czerwono na ekranie i drukuje również na czerwono bez żadnych dalszych czynności. To powiedziawszy, utworzenie oddzielnego pliku CSS dla mediów jest dobrym pomysłem, jeśli strona HTML to gwarantuje, ponieważ zapewnia lepszą wygodę użytkownika (widok na ekranie nie zawsze jest idealny do drukowania).

Czy na pewno nie masz zmodyfikowanego ustawienia drukarki, aby nie drukować w kolorze? Czy drukarka jest tego koloru, a więc domyślnie powraca do zwykłej czerni? Czy próbowałeś go w innej przeglądarce (Chrome, Safari, Opera, IE)?

Oto prosty kod użyłem do testowania:

<html> 
 
\t <head> 
 
     <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"> 
 
\t \t <title>Fontawesome Test</title> 
 
\t \t <style type="text/css"> 
 
\t \t \t .fa { color:red; } 
 
\t \t </style> \t 
 
\t </head> 
 

 
\t <body> 
 
\t \t <i class="fa fa-camera-retro"> Testing color</i> fa-camera-retro 
 
\t </body> 
 
</html>

7

Jeśli używasz bootstrap musisz edytować swój CSS, ponieważ jest to określa kolor czarny dla „print @media”

+0

Dziękuję. Tak, używam bootstrap. Powinienem był to powiedzieć w moim pytaniu. Dziękuję za pomoc! – Wellspring

+2

Na pewno istnieje sposób, aby to zrobić bez modyfikowania bootstrap? – owensmartin