Icon Stacks

Combining icon font glyphs to create complex mega-icons.

If you’ve recently joined the ranks of designers and devs using icon fonts, you’re likely still in the honeymoon phase. I know for me it was a god-send when I first starting using these sweet scalable glyphs in my app. Ahhh…goodbye messy sprites, farewell PNGs, GIFs, and JPGs, no more will I torture myself with the pains of nudging my background positioning to -1384px—or was it -1385?

In my quest to delete all the sprites and images from my repo, I hit a brick wall, the multi-colored icon. That’s right, with icon fonts I could only create flat, boring, single-color, icons…but I needed more! So I came up with the idea of Icon Stacks™. The premise is simple, split apart the components of your multi-color vector, add each element to your icon font, and then stack them to create a mega-icon. Let’s look at an example.

I Want Scalable Weather

With a typical icon-font implementation you’d have to use an icon like: . Using an Icon Stack you can have an icon more like:

The HTML

<i class="icon-stack">
    <i class="icon icon-upper-sun"></i>
    <i class="icon icon-cloud-w-upper icon-stack-base"></i>
</i>

The CSS

.icon,
.icon-stack {
    font-family: 'conorcc';
    font-size: inherit; // So icon adapts to the size of its parent
    position: relative; // To allow for nudging icons up and down for vertical alignment
    display: inline-block; // So we get the crispest icons possible at all times
    line-height: 0.9; // Without this the line-height can screw up the height of containers in FF
    *line-height: 1; // Old IE needs a slightly different value =)
}

.icon-stack .icon {
    position: absolute; // Icons within the stack are positioned one on top of the other
    top: 0;
    left: 0;
}

.icon-stack .icon-stack-base {
    position: relative; // One of the icons needs to be identified as a base so it won't be positioned absolutely
}

.icon-cloud-w-upper {
    color: #AFD2EB;
}

.icon-upper-sun {
    color: #e7be00;
}

So that gets us an improvement over the monochrome icons, but wouldn’t it be nice if we could add a little more depth.

.backgroundcliptext .icon-cloud-w-upper {
    background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(40%, rgba(255, 255, 255, 0.95)), color-stop(50%, rgba(250, 250, 250, 0.95)), color-stop(100%, #CCC));
    background: -webkit-linear-gradient(rgba(255, 255, 255, 0.95) 40%, rgba(250, 250, 250, 0.95) 50%, #CCC);
    background: -moz-linear-gradient(rgba(255, 255, 255, 0.95) 40%, rgba(250, 250, 250, 0.95) 50%, #CCC);
    background: -o-linear-gradient(rgba(255, 255, 255, 0.95) 40%, rgba(250, 250, 250, 0.95) 50%, #CCC);
    background: linear-gradient(rgba(255, 255, 255, 0.95) 40%, rgba(250, 250, 250, 0.95) 50%, #CCC);
    -webkit-background-clip: text;
    -moz-background-clip: text;
    background-clip: text;
    color: transparent;
}

And here’s a more complete set for our weather:

Update: I posted a follow-up article on how you can use Icon Stacks to create textured vector icons.