CODEWITHSUNDEEP
htmlcssprintingfontsfont-awesome
Daniel Congrove
Daniel Congrove

Reputation: 3679

Font Awesome Icons only printing in Black

I am developing a website that must print a page that contains Font Awesome icons. The issue is that when you go to print, the Font Awesome icons will not print in color.

In the browser they show up in color, but when the page is printed the icons are solid black. Is there anyway to make the Font Awesome icons print in color? Perhaps through CSS with @media print { }?

EDIT: Also, I am developing in firefox.

Upvotes: 9

Views: 7785

Answers (3)

owensmartin
owensmartin

Reputation: 393

It turns out that the item that you actually need colored isn't the i itself but its :before element. Thus:

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

Upvotes: 13

Stan
Stan

Reputation: 1430

If you are using bootstrap you need to edit its CSS since it's specifies black color for "@media print"

Upvotes: 12

SomeGuyDevelopingCode
SomeGuyDevelopingCode

Reputation: 96

I just put together a simple HTML example using font-awesome and it seems to work fine in Chrome and Firefox for me. I see the icon in red onscreen and it also prints in red without any further action. Having said that, creating a separate media CSS is a good idea if your HTML page warrants it, since it can provide a better user experience (onscreen view isn't always ideal for printing).

Are you sure you don't have a printer setting modified to not print in color? Is the printer out of that color and thus defaults back to just 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>

Upvotes: 0

Related Questions