Font Awesome Icons nur in Schwarz drucken

Ich entwickle eine Website, die eine Seite drucken muss, die Font Awesome Icons enthält. Das Problem besteht darin, dass beim Drucken keine Schriftfarbe-Symbole angezeigt werden.Font Awesome Icons nur in Schwarz drucken

Im Browser werden sie in Farbe angezeigt, aber wenn die Seite gedruckt wird, sind die Symbole durchgehend schwarz. Gibt es trotzdem, die Font Awesome Icons in Farbe zu drucken? Vielleicht über CSS mit @media print {}?

EDIT: Auch ich entwickle in Firefox.

Quelle

2015-03-29 Wellspring

Es stellt sich heraus, dass das Element, das Sie tatsächlich benötigen, nicht das i selbst sondern sein :before Element ist. Also:

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

Quelle

2016-04-06 22:22:41 owensmartin

Ich habe einfach ein einfaches HTML-Beispiel mit font-awesome erstellt und es scheint in Chrome und Firefox für mich gut zu funktionieren. Ich sehe das Symbol auf dem Bildschirm in Rot und es wird auch ohne weitere Aktionen in Rot gedruckt. Abgesehen davon ist die Erstellung eines separaten Medien-CSS eine gute Idee, wenn Ihre HTML-Seite dies rechtfertigt, da es eine bessere Benutzererfahrung bietet (die Bildschirmansicht ist nicht immer ideal zum Drucken).

Sind Sie sicher, dass keine Druckereinstellung geändert wurde, um nicht in Farbe zu drucken? Ist der Drucker nicht mehr in dieser Farbe und daher standardmäßig wieder schwarz? Hast du es in einem anderen Browser versucht (Chrome, Safari, Opera, IE)? Hier

ist der einfache Code, den ich für den Test verwendet:

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

Quelle

2015-04-07 23:00:00

Wenn Sie mit Bootstrap Sie müssen ihre CSS bearbeiten, da es schwarze Farbe für „@media print“ gibt

Quelle

2015-05-13 15:17:26 Stan

Vielen Dank. Ja, ich benutze Bootstrap. Ich hätte das in meiner Frage sagen sollen. Danke für Ihre Hilfe! – Wellspring

Sicherlich gibt es einen Weg, es zu tun, ohne den Bootstrap zu modifizieren? – owensmartin

Font Awesome Icons nur in Schwarz drucken

Antwort

Verwandte Themen