Re-using Individual FontAwesome Glyphs

Sometimes it’s the trivial little hacks that are most satisfying.

I’ve thrown together a couple of iOS web apps over the past couple of days, partly out of ennui and partly due to my hard disk having given up the ghost, as a consequence of which I’m going iPad-only for an extended period of time.

So I’ve been building myself some simple UI wrappers around some labour-saving JavaScript, and of course I wanted some nice scalable icons.

Since we use FontAwesome in Ink that was the first thing I thought of, but it’s pretty insane to toss in an entire framework and a bucketload of font files solely for the sake of having icons on a couple of buttons.

So I dug into the SVG font files and figured out how to re-use the glyphs. To make a long story short, font files conventionally have the y axis reversed and the glyph bounds are huge, so you need to take the glyph path and apply a transform to it. I broke it down into two, since it makes it easier to tweak the results.

There are three basic steps to convertin an individual FontAwesome glyph outline into something you can re-use:

Search the FontAwesome CSS file for the class (icon-foobar) of the icon you need
Take the Unicode reference and find the matching glyph tag in the SVG file
Grab the path from the glyph tag and paste it into a path tag surrounded by scale and translate transforms
Bind the whole thing inside an svg tag with the pixel size you need and a sane viewBox to give it a coordinate reference (I typically use 0 0 100 100)

The result looks like this:

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="20" height="20" viewBox="0 0 100 100">
    <g transform="translate(10,70) scale(0.05,-0.05)">
       <path d="M888 352l116 116l-152 152l-116 -116v-56h96v-96h56zM1328 1072q-16 16 -33 -1l-350 -350q-17 -17 -1 -33t33 1l350 350q17 17 1 33zM1408 478v-190q0 -119 -84.5 -203.5t-203.5 -84.5h-832q-119 0 -203.5 84.5t-84.5 203.5v832q0 119 84.5 203.5t203.5 84.5h832 q63 0 117 -25q15 -7 18 -23q3 -17 -9 -29l-49 -49q-14 -14 -32 -8q-23 6 -45 6h-832q-66 0 -113 -47t-47 -113v-832q0 -66 47 -113t113 -47h832q66 0 113 47t47 113v126q0 13 9 22l64 64q15 15 35 7t20 -29zM1312 1216l288 -288l-672 -672h-288v288zM1756 1084l-92 -92 l-288 288l92 92q28 28 68 28t68 -28l152 -152q28 -28 28 -68t-28 -68z" />
    </g>
</svg>

…and you can just stick it inside your HTML and tweak either transform to taste (I’ve only needed to tweak the scale once so far, but I wanted a slightly larger icon for a specific purpose).

WebKit (on both iOS and Android) will render the glyph in-place as a block element of the desired size, and you and also tweak it further using JavaScript if you like (changing colour to provide feedback, duplicating it, etc.).

Of course this is pretty useless if you need a dozen identical icons but, again, it’s perfect to spruce up a couple of buttons.

Glyph long and prosper.

Tao of Mac

Re-using Individual FontAwesome Glyphs