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.

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.

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.

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.

I’ve just fixed the font-rendering for this site in Chrome and Firefox for Windows. I believe the problem had something to do with the @font-face-implementation in the various browsers and/or various font formats in different operating systems. The @font-face-code that I know use is from Andy Clarke’s book Hardboiled Web Design and from en article by Paul Irish called @font-face gotchas. I will likely write a longer blog post about this later but for now, here is the code I used.

@font-face {
font-family : "Regular";
src : url("fonts/Bergamo/BergamoStd-Regular-webfont.eot");
src : local("☺"),
url("fonts/Bergamo/BergamoStd-Regular-webfont.svg#Regular") format("svg"),
url("fonts/Bergamo/BergamoStd-Regular-webfont.ttf") format("truetype"),
url("fonts/Bergamo/BergamoStd-Regular-webfont.woff") format("woff");}