Virtually every site on the web utilizes social icons to display links to their Twitter, Facebook, LinkedIn and other social addresses on the web. Modern browsers offer the opportunity to embed fonts, allowing limitless possibilities in the design of your web presence.
We were working on a beautiful client site that was designed by KA+A, a very successful branding and design firm. We’ve partnered on many clients… they roll out the branding and design and then we customize it, optimize it and integrate it for our clients. It’s been fantastic since their designers not only build beautiful sites, they also write beautiful code.
Our client asked us to add a LinkedIn image and link to the bottom right of their site. When we took a closer look, we found that it wasn’t an image at all. It was a font that was displaying Twitter and Facebook! Doing some quick hacking, we were able to see that they had implemented social icons from Symbolset.
Symbolsets are semantic symbol fonts. They work in modern browsers and anywhere OpenType features are supported.
This is incredibly efficient! Fonts can be resized, have any color, and have other stylings applied via CSS, like hover for instance. And fonts load incredibly fast. From a development standpoint, we didn’t have to have our designer reproduce new social icons that were the same colors, size and style of the other ones. We simply had to utilize the HTML code for the LinkedIn icon, wrap it in an anchor tag, and away we went!
The Social Symbolset is only $3 and comes with the current social icons:
Kudos to KA+A for such a cool implementation. I’m sure we’ll find a ton of other opportunities to incorporate Symbolset icons into our own sites. Last note, they don’t just have Social Icons, they’ve got several series of other fonts… er… symbols.