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.
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
glyphtag in the SVG file
- Grab the path from the
glyphtag and paste it into a
pathtag surrounded by
- Bind the whole thing inside an
svgtag with the pixel size you need and a sane
viewBoxto 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).
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.