Font Awesome Icons only printing in Black

Sto sviluppando un sito Web che deve stampare una pagina contenente icone Font Awesome. Il problema è che quando vai in stampa, le icone Font Awesome non stamperanno a colori.Font Awesome Icons only printing in Black

Nel browser vengono visualizzati a colori, ma quando la pagina viene stampata le icone sono di colore nero. Esiste comunque la possibilità di stampare a colori le icone Font Awesome? Forse attraverso i CSS con @media print {}?

EDIT: Inoltre, sto sviluppando in firefox.

fonte

2015-03-29 Wellspring

Si scopre che l'elemento che è effettivamente necessario colorato non è lo i ma l'elemento :before. Quindi:

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

fonte

2016-04-06 22:22:41 owensmartin

Ho appena creato un semplice esempio HTML usando font-awesome e sembra funzionare perfettamente con Chrome e Firefox. Vedo l'icona in rosso sullo schermo e stampa anche in rosso senza ulteriori azioni. Detto questo, creare un media separato CSS è una buona idea se la tua pagina HTML lo garantisce, dal momento che può fornire un'esperienza utente migliore (la visualizzazione su schermo non è sempre ideale per la stampa).

Sei sicuro di non aver modificato le impostazioni della stampante per non stampare a colori? La stampante è fuori dal colore e quindi torna al nero normale? Hai provato in un altro browser (Chrome, Safari, Opera, IE)?

Ecco il semplice codice che ho usato per la prova:

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

fonte

2015-04-07 23:00:00

Se si utilizza bootstrap è necessario modificare il suo CSS dal momento che è specifica di colore nero per "stampa @media"

fonte

2015-05-13 15:17:26 Stan

Grazie. Sì, sto usando il bootstrap. Avrei dovuto dirlo nella mia domanda. Grazie per l'aiuto! – Wellspring

Sicuramente c'è un modo per farlo senza modificare il bootstrap? – owensmartin

Font Awesome Icons only printing in Black

risposta

Problemi correlati