Social Icons Font Set

So there’s all these websites that have little square icons allowing you to RSS the site, link the site to another site, etc.. I’d been reading about CSS’s ability to include a font in your stylesheet using @font-face, expanding the number of fonts you can see on a web page beyond just the standard set. I was thinking it would be neat to have an RSS symbol that was a font character rather then an image, so I downloaded FontForge. At some point in all of this I decided to convert a bunch of the most often used social networking icons into font characters, 26 in all. Useful for embedding into websites, or just for dumping into Photoshop to make your own icon images. Check them out!

I used CSS3 to spice them up. These are not meant to be a font set in and of itself, but more of my playing with CSS to explore the possibilities. Also, if you are viewing this in IE or an older browser, the icons may look a bit bland.

There is a lot that you can do with “box-shadow” involving layering shadows of different offsets, radius widths, and colors. I was particularly happy with how the LastFM icon came out.

I really wish there was a means of using CSS to apply shading directly on top of text. As I know of no way to do this, I had to figure out other means for icons that require multiple colors. The Picasa logo uses 5 different colors in the logo on a white background, so I instead made a 5-colored background using box-shadow and placed a white logo on top of that. This has it’s limitations, though, as I couldn’t quite get the green background segments of the Newsvine icon to look as they should.

There’s no way to outline text using CSS, but you can create an outline using by layering multiple “text-shadow” elements together, offsetting them in all directions around your text character. I used this on the AIM, Yelp, and Netvibes icon. This isn’t a perfect method, as you can tell by the jagged edges on the AIM icon. It works quite well on 90 degree angles, though, as you can see from the Netvibes icon.

The biggest pains were the Flickr and Delicious icons. Delicious is simple in that it just uses two squares, but it’s two differently colored squares. So I made one solid and the other comprised of lines, and hoped for the best. It’s still a little odd looking as it currently is. The Flickr icon is the same situation, but with circles instead. Most of the icons exist as just link html, but this one is a link within a span tag. I set the font character to be a blue, and then the link’s left margin to be a negative value, meaning you only see one of the dots. I used “text-shadow” to create the pink circle on it’s right. Incidentally, this is the only one I couldn’t figure out an IE CSS hack for, so it’s not quite usable in IE if you want the Flickr icon in it’s multi-colored glory. StumbleUpon was also a pain, and one I still don’t have looking quite right.

These icons are not all that ideal right now, and here’s why: First off, IE does not support CSS3 tags like text-shadow and box-shadow. Meaning that, though these are for the most part functional in IE, they’re not all that pretty. Also, not every browser supports @font-face right now. If this entire post is confusing to you, as all you see in the icons above is the alphabet, you’re probably using one of those browsers. I look forward to all of these things being adopted by the browsers that currently don’t support them, which will hopefully be sooner then later.

View a page with just these icons on them, or download a zipped file of the HTML, CSS, and fonts for these icons. Or, you can download just the font from the Open Font Library.

I’ve also got the icons posted here on varoper.com, essentially showing everything already displayed in this post, but with far fewer words and minus the fabulous yet jarring fish background.

Leave a Reply