My Beefy Adventure with Icon Fonts pt 2: Symbolset

Symbolset

Next up! Symbolset is very pretty. And they have great response time to issues, both on Twitter and in email. That rules so ridiculously hard. As I ran into a couple of issues while using the font.

Symbolset offerse multiple sets. This is great if you want to save money by not buying all of them, but a bit tedious when it comes to implementing more than one set. I dropped in imports to both sets of CSS files into my SCSS file, but only one set was showing up. It turned out the order I listed them in was determining which one would load.

Their blog explains how to use multiple sets, which solved the mystery for me. Whichever one you listed last claimed rule on the default .ss-icon class defined in the stylesheets, and so for the other set, you have to specify two class names instead of one, like this:

 <a href="#" class="ss-icon">User</a>
 <a href="#" class="ss-icon ss-social">Mail</a>

This is because the symbols can have duplicate names like “ss-mail”, so you need to specify which font to use. I found this to be kinda annoying to have two class names, so in the social set CSS I altered all the declarations to use sc-icon instead and then updated the source to use <a href="#" class="sc-icon">Mail</a>. Then, while mid-dev cycle, Symbolset made updates to the sets, so instead of overriding the styles again, I gave into to the multiple class names. Passing this off to a client meant if they want to keep up-to-date with the files from Symbolset they’d have to alter the CSS every time, and I don’t want to ask anyone to do that. It’s great that their updates are always free to existing customer, but I do wish each set would have its own prefix to avoid this though.

The next issue I had was some compatibility with older Internet Explorers. The VMware emulators I was using did NOT like this icon font. That old image/font missing box was showing up and everything I tried failed hard. Help from the Symbolset Twitter account identified this as an emulator issue, as it worked on full Windows installs just fine. So be warned when testing, friends!

One of the coolest things about Symbolset is the semantics involved in their mapping to keywords. I had not studied their browser support chart thoroughly enough though and was confused when this wasn’t working in IE. Turns out, it only works in IE 10 and above. I’m used to things not working in 6 and 7, but not 8 or 9, so this was a surprise. You can use JavaScript to patch this, but y’all know me, I’m not a fan of JS fixes like that, so I changed all my keyword usage to unicode instead and added title tags where needed to help the understanding.

Symbolset does not work in IE6. I found that this was mostly okay, as most symbols were design enhancements like adding the Twitter bird after the heading “Twitter Updates”, so that was fine. But for the search button, that took a bit of extra styles for IE6 so that it was still apparent that it was a search input.

Now that I know these “quirks” and how good their support is, I would use Symbolset again. And if you feel the same and want to try the $5 Social set, now’s the time. During November, they are donating 100% of profits for that set to the Red Cross in the wake of Hurricane Sandy.

Up next: Web Symbols Typeface

Previously: Pictos