scottelwood

Thoughts from a web developer

More Interesting Examples

I threw some more polished examples together today. Check them out by clicking here.

Leave a comment »

Multi-layer Font Icons: An exploration into scalable, multi-color web icons

I have always been a fan of the ding library of font icons, as I am not much of a designer and they aid me in getting some basic mock ups done quick. I recently read an article over at css-tricks.com which described in detail the benefits of using web-fonts, and I immediately jumped on board. I downloaded several different types of font creation tools and I was having a go at making my own set of icons, eager to get this high customization into my projects.

That’s when I ran into a problem. I had to decide whether my icons would be all a solid color, with maybe some shadow thrown in to give it more style, or if they deserved to be fancier but used as images. I noticed several websites did completely fine with a solid icon color (for instance, YouTube), but they all blended in together. I believe images are a very important way that users can find their favorite section of a website, and I began thinking maybe this font-icon route wasn’t the road I should take.

I have been debating this back and forth in my head for about a week now, when it occurred to me that there was a solution to this problem. Instead of building a font icon library that had icons which serve an individual purpose, maybe I could figure out a way to overlap these fonts into several elements, each layered on top of each other. Bear in mind that I only came up with this idea about an hour ago, so these examples are not polished and are just a prototype to see if this was really feasible.

Here is the first icon set that I made. These are all at 30px font size.

Then, with some basic HTML…

<!DOCTYPE HTML>
<html lang="ru-RU">
<head>
    <title></title>
    <meta charset="UTF-8">
    <style type="text/css">
    body {
      font-family: Untitled1;
    }

    .ipart {
      font-size: 60px;
      position: absolute;
    }

    .ipart.background {
      color: green;
      z-index: 1;
    }

    .ipart.middle {
      color: black;
      z-index: 2;
    }

    .ipart.foreground {
      color: white;
      z-index: 3;
    }
  </style>
</head>
<body>
    <span class="icon">
      <span class="ipart background">
        y
      </span>
      <span class="ipart middle">
        z
      </span>
      <span class="ipart background">
        x
      </span>
    </span>
</body>
</html>

Which resulted in this:

A completely css based icon with multiple colors. I am going to look into the best way of formatting the HTML for this, as it might be overloaded with span tags. I am also going to try to develop a polished icon set for one of my next project that will take full advantage of this and see where my results get me. I for sure will be using either LESS or SASS to make life easier when incorporating rollovers as well. If you have any tips or ideas how to better implement this, please let me know!

1 Comment »

Follow

Get every new post delivered to your Inbox.