My Beefy Adventure with Icon Fonts pt 3: Web Symbols typeface

Web Symbols Typeface

You know what rules about this one? It’s free. So they’ve got a good thing going right away.

Web Symbols has chosen the character mapping for you. This is fine, but worth keeping the page up at all times so you can remember what’s what.

They provide you the font files and the @font-face rules to use in your CSS. So far, very easy.

I’ve only implemented one icon with this, the list icon (under the category: “other”). It so happens that the list icon is mapped to a superscript 2. I’m passing off some of these icon additions to clients. Surely, they can copy and paste this unicode character into the already built CMS, but that’s kinda confusing to explain. It’s not the worst thing I’ve seen, but let’s say I can do without it.

I’ve also found that at certain font-sizes, in this case 13px, the list icon looks great on a retina display, but way too blurry on my majority-of-the-population display. </sassy> So I had to adjust font-sizes to compensate for that.

I’m also slightly confused at their browser support. They offer this:

Web Symbols is a set of vector html-compliant typefaces, so it might be used in any size, color and browser (okey, mostly — but IE7 for sure).

So I’m assuming that means everything but IE6.

My markup for this looks like this:

 <a href="#" class="nav-head"><span class="glyph" aria-hidden="true">²</span> Menu</a>

I’m not mad at it, but all these icon fonts could be making me soft.

Previously looked at on The Nerdary:

• Pictos
• Symbolset