Super semantic multicolor font icons in pure CSS
Font icons rule. They’re easy to implement, well supported, and infinitely scalable without loss of quality. Even ol’ IE supports them! But there’s a downside: a font icon — like the letter A in a normal font — can only be one color.
Just one single color. Boring!
But what if I told you we can have colorful font icons like these?
The lion asked the whale “Where did owl and parrot fly off to?”
These four critters are drawn by the talented Eva Galesloot and are recreated with good old font icons and some straightforward CSS. 1
The basic technique is simple: we overlap multiple glyphs and give each “layer” a different color. You can have two-color icons this way in pure CSS (using :before and :after), or more colors if you don’t mind creating extra elements through unsemantic HTML or by using JavaScript. It’s been done before.
But two colors ain’t enough, and polluted HTML just rustles my jimmies. So let’s try to come up with a cleaner method.
Four-color icons with basic CSS and webfonts
We’re going to use four different colors by transferring all the work to CSS and the font file. All we need on the HTML side is a span with the icon’s character set to the data-icon attribute:
<span data-icon="p"></span>After we’re done with the CSS and the font file, this turns into a colorful parrot:
Easy peasy! Let’s take a look at how this is done.
Step one: prepping the font file
The first step is to create the four glyphs we’re going to use in the font. For this we need an SVG for each color in the original design:
We need to assign these glyphs to four different characters in our font — for instance A, B, C and D. But this would result in an unwieldy data attribute, especially since we need to weasel a newline in there (the \a bit — more on that later):
<span data-icon="AB\a CD"></span>So to keep the HTML tidy, we map each glyph to the same character in four different font files. This allows us to assign each one of them to a different font-weight. The parrot, for instance, is mapped to the letter p. The first font holds the first shape (the parrot’s body) and will be assigned to font-weight: 100. The next two fonts will be assigned to font-weight: 200 and font-weight: 300, and the last one to font-weight: 400.
The end result is four different font files, each file containing one layer for every icon. Loading four external files isn’t ideal, so I chose to base64 ‘em and combine them in one stylesheet. 2
I turned these into fonts by using Font Custom, but you could use a tool like Icomoon as well.3
Step two: putting CSS to work
We’ve created the font files, now it’s time to make those critters show up on our page and give them their appropriate position and color.
Remember, we’re working with just a single element. The drawback of not using extra HTML elements is that we can’t use selectors like :nth-child() to address individual characters with CSS. But there are a couple of CSS pseudo selectors we can use if we arrange our characters like this:
pp
This allows us to use:
span:first-letter { weight: 100; color: greenyellow; }span:first-line { weight: 200; color: darkgreen; }span { weight: 300; color: orange; }span:after { weight: 400; color: orangered; }
With all four layers properly styled, the last step is to overlap them. Since we’re not using real elements, we can’t use absolute positioning, so we summon the powers of negative letter-spacing and zero line-height to get the job done. And there we have it: four differently styled glyphs on top of each other!
This is the full CSS for the Skwirrol icon set:
[data-icon] {
font-family: "Skwirrol-Icons"; /* See @font-face declarations at bottom */
speak: none;
font-style: normal;
font-variant: normal;
text-transform: none;
text-align: left;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
display: inline-block; /* So we can set its width */
white-space: pre; /* Turn newlines into actual newlines */
letter-spacing: -1em; /* Overlap icons horizontally */
line-height: 0; /* Overlap icons vertically */
padding: 0.5em 0; /* Compensate for zero line height */
width: 1em; /* Compensate for negative letter spacing */
font-weight: 300; /* Weight for third layer */
}
[data-icon]:before {
/* Insert the three first layers */
content: attr(data-icon)
attr(data-icon) "\a"
attr(data-icon);
}
[data-icon]:first-letter {
font-weight: 100; /* Weight for the first layer */
}
[data-icon]:first-line {
font-weight: 200; /* Weight for the second layer */
}
[data-icon]:after {
/* Insert the last layer */
content: attr(data-icon);
font-weight: 400; /* Weight for the fourth layer */
}
/* Colors for Skwirrol's lion */
[data-icon="l"] {
color: #ffef9f;
}
[data-icon="l"]:first-line {
color: #ffde3f;
}
[data-icon="l"]:first-letter {
color: #de6d36;
}
[data-icon="l"]:after {
color: #000;
}
/* Colors for Skwirrol's owl */
[data-icon="o"] {
color: #7a6155;
}
[data-icon="o"]:first-line {
color: #3c2313;
}
[data-icon="o"]:first-letter {
color: #593a2a;
}
[data-icon="o"]:after {
color: #fcb040;
}
/* Colors for Skwirrol's whale */
[data-icon="v"] {
color: #41a1c1;
}
[data-icon="v"]:first-line {
color: #c5deeb;
}
[data-icon="v"]:first-letter {
color: #4ebfe5;
}
[data-icon="v"]:after {
color: #c1417e;
}
/* Colors for Skwirrol's parrot */
[data-icon="p"] {
color: #fcb040;
}
[data-icon="p"]:first-line {
color: #4d7125;
}
[data-icon="p"]:first-letter {
color: #8ebf48;
}
[data-icon="p"]:after {
color: #f7953d;
}
@font-face {
/* Skwirrol Solid */
font-family: 'Skwirrol-Icons';
src:url(data:application/x-font-woff;base64,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) format('woff');
font-weight: 100;
font-style: normal;
}
@font-face {
/* Skwirrol Color 1 */
font-family: 'Skwirrol-Icons';
src:url(data:application/x-font-woff;base64,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) format('woff');
font-weight: 200;
font-style: normal;
}
@font-face {
/* Skwirrol Color 2 */
font-family: 'Skwirrol-Icons';
src:url(data:application/x-font-woff;base64,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) format('woff');
font-weight: 300;
font-style: normal;
}
@font-face {
/* Skwirrol Color 3 */
font-family: 'Skwirrol-Icons';
src:url(data:application/x-font-woff;base64,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) format('woff');
font-weight: 400;
font-style: normal;
}Browser support, caveats and heads ups
This little trick works on all modern browsers I tested (Chrome, Firefox, IE11, Opera). I was surprised that it even works on all versions of IE upward from 8 (if you create an EOT file — for this demo I just stuck with WOFF).
Opera 12 and several mobile browsers have trouble showing these icons correctly. This seems to be caused by two main reasons: no font-face support at all, or more obscure differences in implementation of things like letter-spacing. Opera 12, for instance, doesn’t like letter-spacing: -1em (-0.99em is fine, though). A solution to this would be to create zero-width glyphs in your font, which is entirely possible and supported but outside the scope of this little hack.
Some other things to keep in mind:
-
Some browsers are picky about what exactly constitutes a
:first-letter. If you use Unicode private area chars, these might be considered non-letters and won’t be styled with:first-letter. -
The edge of the vector image will be anti-aliased by the browser, and each one does this in a slightly different way. Keep this in mind where glyphs touch or overlap — the bottom one might shine through at the anti-aliased outline of the glyph on top of it. You can prevent the page’s background color from seeping though by using the full design’s contours for the first glyph, like I did with the parrot’s body.
-
The icons should have a consistent bounding box across all fonts. This greatly simplifies alignment and sizing. I do this by including a control character in all the font files.
Souping up the semanticism
I’ve taken a bit of a poetic license with the title of this post, and some of you have rightly pointed out an empty span isn’t all that super semantic. So, here’s a variation of the hack, which’ll work with the following HTML:
<span data-icon="p">parrot</span>You can now inject just two p values into the :before, and use the content of the span for the third p. The rest of the word will be chopped off by a simple overflow: hidden. The end result is the same, but now the HTML is truely semantic.
You can see this variation in this Codepen:
See the Pen zuwLe by Roel N (@RoelN) on CodePen.
(Screen readers would read “ppparrotp” though, and when @font-face isn’t supported you’d have to undo this hack — otherwise visitors would see four overlapping ps instead of the parrot or the word “parrot”. Web crawlers and Lynx users will properly read your site now, though!)
Edit: This solution doesn’t work in IE11. Looks like overflow:hidden is the culprit. Anybody know what’s going on here?
And that’s that
And there you have it — a sweet little trick to get multicolor font icons. Is it a hack? Are you probably better off with SVG? Did I have a lot of fun squeezing extra colors out of a limited technology? Why yes, probably and yes!
Feel free to dig into the code on Github or Codepen! Let’s bring some color to font icons!
-
Fun fact: when I contacted Eva Galesloot if I could use her colorful icons, she pointed me to front-end hacker Rafal Bromirski who recreated these exact same icons in pure CSS3! ↩
-
You can reduce the number of files to two if you also use lowercase and uppercase letters. ↩
-
Be sure to include a control character that represents the widest width and the highest height of all the designs combined, so each font will have the same bounding box. If they don’t, your glyphs will vary in width and height and won’t align properly. Font Custom needs some extra work because otherwise a line feed will show up as missing glyph. Drop me a message if you need help ! ↩