So called ”Social Media Icons”, links to Twitter, Facebook, RSS-feeds, linkedin etc., are everywhere. You can’t possibly have missed them.  They are definitely a big buzz and something that a lot of people want to have on their web sites. A while ago I designed and developed a site called Prinsessans Rockband that among other things needed some social media icons.

At first this seemed like a problem, all though a small one, since I’m first and foremost a developer. I prefer to leave the pixel-craft to others. Sure, I could find some sort of free or semi-free icons online and use them, but I really wanted another solution. I stumbled upon two great things that led me to an idea. The first great thing was Dan Cederholm’s article ”An all CSS button”. It’s a write-up on how to style links to look like real world buttons and is well worth a read.

This got me thinking, maybe I could use CSS3’s @font-face and find the original fonts for some of the social media logos. Especially Twitter, Vimeo and Facebook often use a letter (T, V and F respectively) for their icons. I had previously found the font that Vimeo used, so I started googling. In the process I found the second great thing; The SocialIcons font by ptocheia. It’s a font that replace the letters with the look of popular social media and web company’s logos. It was almost to good to be true.

I combined the ideas from Dan Cederholm’s article with the font and got my social media icons for Prinsessans Rockband. It worked great, but they were removed in a small re-imagining of the layout. However the idea is still useful and I will likely use it more in the future.

One problem with this is the degradation. For some icons is works just fine when the letters shows up in another font. A t in a light blue box is easily identified as a Twitter-logo etc. However, some of them (and a instead of the RSS/Atom-logo for instance) degrades less graceful. So for this article I re-wrote some of the code in order to make it degrade better. For this I used some jQuery-based Javascript and the font-face-function in Modernizr.

Let’s start with the basic html.

<a href="http://feeds.feedburner.com/mrhenko" data-social-letter="a" class="socialicon rss">Subscribe to RSS/Atom</a>

The thing worth noting here is the data-attribute for social letter. The data-attribute is one of the many new great things in HTML5. You can read more about it at HTML5 Doctor. The content between <a> och </a> is then replaced by jQuery.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js">
</script>

<script type="text/javascript">
	(function ($) {
		$(document).ready(function() {
			$('.fontface body').children('[data-social-letter]').each(function() {
				var letter = $(this).attr('data-social-letter');
				$(this).text(letter);
			});
		});
	})(jQuery)
</script>

So what this does is it finds every element that has a ”data-social-letter”-attribute, if it is the child of an element with the class ”fontface”. That class is set by Modernizr to indicate that the browser supports CSS @font-face. That means that if my browser doesn’t support this, the original ”Subscribe to RSS/Atom” text will remain and the degradation is thereby sort of graceful. Now all we got to do is set the font and do some styling in css.

/* Import the font. */
@font-face {
	font-family: "SocialIcons";
	src: url("SocialIcons.otf");
}

/* Make it look like an icon */
a.socialicon {
	display: block;
	width: 40px;
	height: 40px;
	padding: 5px;
	line-height: 40px;
	font-size: 35px;
	border-radius: 5px;
	box-shadow: 2px 2px 8px rgba(0,0,0,0.9), -2px -2px 12px rgba(0, 0, 0, 0.2);
	color: #fff;
	text-decoration: none;
	text-align: center;
	font-family: "SocialIcons";
	text-shadow: 0 -1px 1px rgba(19,65,88,.8);
}

/* Use http://www.colorzilla.com/gradient-editor/ to generate great-looking gradients */
.rss {
	background: #e34d14; /* Old browsers */
	background: -moz-linear-gradient(top, #e34d14 0%, #f2780c 50%, #e34d14 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e34d14), color-stop(50%,#f2780c), color-stop(100%,#e34d14)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, #e34d14 0%,#f2780c 50%,#e34d14 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, #e34d14 0%,#f2780c 50%,#e34d14 100%); /* Opera11.10+ */
	background: linear-gradient(top, #e34d14 0%,#f2780c 50%,#e34d14 100%); /* W3C */
}

The result will look something like this:

So that’s the basic idea and a starting point. I hope it will be useful for you.