Social media icons and print styles

I saw this tweet a while back:

https://twitter.com/trepmal/status/233640847005081600

There are a couple simple solutions using print css styles.

<div class="smLinks">
	<a href="https://twitter.com/NowellVanHoesen">
		<img src="/twitter-icon.png" alt="twitter" />
		<span class="sMediaLink">Twitter.com</span>
	</a>
	<a href="http://www.facebook.com/nowell.vanhoesen">
		<img src="/facebook-icon.png" alt="facebook" />
		<span class="sMediaLink">facebook.com</span>
	</a>
</div>

1. Hide the icons

@media print {
	.smLinks {
		display: none;
	}
}

2. Hide the URL for all media except print.

@media print {
	.smLinks a {
		display: block;
	}
}
@media screen {
	.sMediaLink {
		display: none;
	}
}

See an example

Leave a Reply