An icon is a graphic device that represents an object or action, the graphic device being ascribed. Their purpose is to quickly communicate the nature of a message.

A well crafted icon can communicate a message in a fraction of the time that a [!--Start--]fully worded description takes. They’re also language independent – meaning that the same symbol can be used whether you are communicating to a French, Welsh, or English user. 

The best example of icons in use today is probably the British road sign designed in the early 1960’s by Jock Kinnear and Margaret Calvert. These signs have stood almost unchanged for over half a century and their design has been copied throughout the world.

Today, icons are synonymous with web design. Hardly a site design goes by without some sort of icon being designed for or applied to it. Traditionally these icons have been created as sprites or images, but technology moves on and with the advent of webfonts so comes the ability to create icons as webfonts.

Sprites vs web fonts

A sprite is basically an image file - it can be a JPEG, PNG etc. They are pixel based and have a finite size. Web font icons on the other hand are vector-based, which means they can be scaled easily without any reduction in quality.

scaled-dog

Icons as sprites do have their advantages. Since they are images they can use as many colours as you wish, but, in terms of design, whether this is a good thing or not depends on personal taste. In the current trend for minimal and clean design, this does not sit well, and it can be argued that the more intricate an icon is the less effective it will be.

Successful implementation of an icon font

There are two primary reasons icons are used in web design.

  1. You want to enhance a word or title or link

  2. The icon wants to be stand alone but informative

In our markup they want to be as semantic as possible and easily accessible for screen readers. Traditionally we might do this...

Stats

Traditionally we might add some padding to the left and insert a background image, but sadly, unlike sprites, webfont icons can’t be used as background images. Other options may include the use of a pseudo element or incorporate the use of the aria-hidden.

The HTML

Parks & Gardens

The CSS

 .icon-tree:before {  font-family: icons; /*Replace with your fonts*/  content: "\e654";  speak: none; }

If you’re using Contensis, the method above utilises classes to create the content of the pseudo element and enables the style to be available to you in the editor stylesheets; but of course using the data-* attribute is equally valid.

So what about stand alone icons?

It happens a lot in design and rightly so – to avoid clutter and unnecessary text getting in the way of an efficient design, whole sentences can be communicated with a single icon. This is easily created in markup isn’t it?

h2:before {font-family: icons;content: "\e654";speak: none; }

But what about screen readers? And what about the empty element? Anyone who uses Contensis knows that it doesn’t like empty elements, and for good reason.

So what do we do? In actual fact the answer is quite simple. Inside our element we create a span with some descriptive text and give that span a class.

Parks & Gardens

.sys_screen-reader-text {  position: absolute;top: -9999px;left: -9999px;}

The CSS is remarkably simple and works by kicking the content away visually. And it has the double whammy of not only being accessible for screen readers, its good for SEO to boot.

Creating your very own icon font

Of course to do all of the above you need to have a useable icon font. The biggest issue is that if you simply use an off the shelf font – one that you might use day to day - each icon is mapped to letter. Well that’s obvious isn’t it, how else would we type? But on your website, that means these letters become content and get picked up by search engines – and worse – screen readers.

Fortunately, unicode has a “private use area”, so when you create your font you can map your icons to this area and avoid them being picked up by screen readers and search engines.

The easiest way to create your icon font is to use a service such as IcoMoon. You can use a pre-designed set of icons, or create your own using a vector based drawing package such as Adobe’s Illustrator. IcoMoon and other services like them contain full instructions on their use, so take a look and have fun!

Subscribe to our stories 

More stories from Zengenti