I’ve been pretty bored lately, so I decided to redesign my site and found an awesome social icon set by Alex Peattie (http://www.alexpeattie.com) to go with the new design. The set is minimalistic and really cool! Unfortunately, I wasn’t as happy to work with it as I would have liked to mainly because, I couldn’t decide on what size I wanted the icons on the new site and thus, I found myself opening photoshop and resizing them far too often. I eventually, as you might have guessed by the post’s title, decided that such an icon set would make an awesome font. So, I created a font file which included most icons from the set* . This would allow me to embed the font and get nice icons which, I can resize and recolor with css.
I am very happy with the results, I’ll be updating it soon as I wanna get rid of some of the icons I included and replace them for others that I might think are more useful. The whole icon set is huge. So I’ll keep all versions I make around just in case the icon you’re looking for is in one of them. The main ones (Twitter, Facebook, Tumblr, etc.) will be on all versions of the set.
I’ve created a @font-face kit using fontsquirrel. So it’s pretty much ready to be downloaded and used as it is right now. You can check out Alex’s demos right here.
The font is distributed under the same license as the icons, the Free Art License which, allows you to pretty much do anything you want with it. Read the license if you want details.
* I didn’t include all icons because, fonts have limited glyph spots available and I wanted to support as many keyboard layouts as possible by only including icons in common keys. For example, I didn’t use any of the accent keys I have access to because, I know most English keyboards wouldn’t support them. (I have a Spanish keyboard)
I found the first font a little hard to navigate so, I created a second version in which icons are now arranged alphabetically (mostly) and empty spaces where no icons could go were filled in with additional icons. This font version has less glyphs than the first version because it only uses letters and numbers. If you need some of the additional icons you can use the first one.
- When you use these icons add a text-shadow. It’ll make the images smoother. Something like:
text-shadow: 0 0 1px #000;would do the trick.