UX Design and Development course

Icon Fonts

There are multiple articles and tools out there that will absolutely convince you that for iconography you need to be using Icon Fonts. But why? Here are some simply points:

  • They are vector
  • Scalable
  • Encapsulated library
  • Easily manageable in a project
  • Manipulated via CSS

There are a number of techniques out there for using Icon Fonts. Regardless of the technique for getting the Icon Font to appear in the view, one thing you need to learn about are PUA codes.

In the Basic Multilingual Plane (plane 0), the block titled Private Use Area has 6400 code points. Planes 15 and 16 are almost[note 1] entirely assigned to two further Private Use Areas, Supplemental Private Use Area-A and Supplemental Private Use Area-B respectively. In order to encode characters from planes 15 and 16 in UTF-16, a further block of the BMP is assigned to High Private Use Surrogates (U+DB80..U+DBFF, 128 code points).

But what does this have to do with fonts?

Basically, using PUA codes, we can map Icon Font characters to these PUA codes so that when the content appears in the view, the computer just passes it over. Without some sort of mapping in the visual scope, these PUA codes have no meaning. And this is the BEST PART! These are semantically meaningless.

After all, is the icon you are trying to append meaning to or the content the icon is near? I opt for the content and the icon is or visual enhancement.

Iconmoon.io

Now you are asking how this all works? This used to be WAY more difficult, but thanks to smart and helpful people we have tools like iconmoon.io

To create a custom Icon Font library, simply go to the icomoon app and begin selecting icons you want to use.

There are a number of libraries that you can choose from that are free and some that you have to pay for.

If you are skilled enough to create your own fonts, you are able to upload them as well.

Selecting fonts

Using icomoon can be a little confusing so let's go through some simple steps.

  1. Go to iconmoon.io and then click on the IcoMoonApp button
  2. BEFORE YOU BEGIN SELECTING ICONS, click the hamburger icon to the left and then click on Manage Projects
    1. This is where you can manage your icon projects
    2. If you are using the FREE service, your projects are stored in your browser's cache
  3. Create a new project, then give it a name and click LOAD
  4. Add a library of icons to choose from
  5. Start selecting icons!

Once you have selected your icons, click the FONT button at the bottom of the view.

Set the preferences

When you get to the usage view, click the PREFERENCES button at the top. This will open a modal where I suggest you enter a library name that is specific to you. This will help later. My default of choice is to name it ico-fonts.

For the CLASS-PREFIX, I typically leave this at icon-.

When you are done, click the DOWNLOAD button.

Use you new fonts

After you download the Zip file, there are a number of things in there. First off, let's look at the CSS.

@font-face {
  font-family: 'ico-fonts';
  src:url('fonts/ico-fonts.eot?-25452q');
  src:url('fonts/ico-fonts.eot?#iefix-25452q') format('embedded-opentype'),
    url('fonts/ico-fonts.woff?-25452q') format('woff'),
    url('fonts/ico-fonts.ttf?-25452q') format('truetype'),
    url('fonts/ico-fonts.svg?-25452q#ico-fonts') format('svg');
  font-weight: normal;
  font-style: normal;
}

[class^="icon-"], [class*=" icon-"] {
  font-family: 'ico-fonts';
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;

  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-twitter:before {
  content: "\e600";
}
.icon-dribbble:before {
  content: "\e601";
}
.icon-github:before {
  content: "\e602";
}

Pretty much everything you need is in here. You should be able to simply add this to your project.

Put the fonts in a folder

In the Zip file will be a fonts folder. Place that somewhere in your project and make sure that wherever you put it to update the path to this folder in the CSS. That's pretty much about it.

Using the fonts

As you can see, the CSS is pretty simple.

.icon-twitter:before {
  content: "\e600";
}

To get this to appear on a view, you DO NOT HAVE TO USE a <i> tag. Also, don't try and use the HTML/CSS provided for the icomoon example, that will only confuse you. Just throw all that crap away.

Let's say for example that you want to use this on a button. I would write the following HTML:

<button class="icon-twitter">Tweet Me!</button>

Speaking PUA/icons?

Although there is a very low chance of a screen reader picking up the codes in this scenario, we want to protect ourselves from this. Iconmoon is using a CSS technique geared to help with this, speak: none.

As of writing this, support is getting better, but not to be trusted. Chrome, Opera, and Safari are supported. Firefox is not. Sorry, didn't test IE.

If you are in a case where the PUA code is being picked up by screen readers, the resorting to wrapping the content in another HTML element may be necessary. Although this goes 100% against the grain of semantic HTML, we are in a weird world.

<button>
    <span class="icon-twitter" aria-hidden="true"></span>
    Tweet Me!
</button>

The reasoning behind this is that if we placed aria-hidden="true" on the <button> tag, then the button would have been hidden, not the icon. #fail

Save fonts

Since we are using the Free version of icomoon, you want to make sure that you are saving a version of your icon library for team distribution and retention.

Going back to the HAMBURGER button, to the right of your project is a DOWNLOAD option. This will download a .json file to your computer.

I make it a habit to commit this file to the project repo and attach a readme.md doc that explains how this works and how to update the icon library.