Geek Answers Handbook

Font Awesome Icons print only in black

I am developing a website that should print a page containing awesome font icons. The problem is that when you print, the Font Awesome badges will not print in color.

They are displayed in color in the browser, but when the page is printed, the icons are solid black. Is there a way to make awesome font icons print by color? Perhaps via CSS using @media print {}?

EDIT: Also, I am developing firefox.

+8
html css fonts printing font-awesome
source share
3 answers

It turns out that the element that you really need is not i itself, but its element :before . Thus:

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

If you use bootstrap, you need to edit its CSS as it indicates the black color for "@media print"

+7
source share

I just put together a simple HTML example using the awesome font, and it seems to work fine in Chrome and Firefox for me. I see the icon on the red screen, and it also prints in red without any further action. Having said that, creating separate media CSS is a good idea if your HTML page guarantees this, as it can provide a better user interface (the on-screen presentation is not always ideal for printing).

Are you sure you do not have a printer setting changed to not print in color? Does the printer get out of this color and thus go back to plain black? Have you tried it in another browser (Chrome, Safari, Opera, IE)?

Here is the simple code I used for testing:

 <html> <head> <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"> <title>Fontawesome Test</title> <style type="text/css"> .fa { color:red; } </style> </head> <body> <i class="fa fa-camera-retro"> Testing color</i> fa-camera-retro </body> </html>
0
source share

More articles:


All Articles