Last Updated: February 25, 2016

Semantic and accesible icon web fonts

This could be applied to any icon font you use but I love icomoon, not just because it offers lots of free web icon fonts, it's because the way they implement the output code that I think is almost the best way you can apply it to your projects to ensure compatibility, accesibility and semantic.

1 - Goto http://icomoon.io/app

2- Choose icons for your font (you can even import any svg file to create custom library)

3- Download your custom font and copy to your project

4- To make it work you must use a code similar to this:

// Defining the font route

@font-face {
  font-family: 'my-font';
  src: asset-url('my-font.eot');
  src: asset-url('my-font.eot?#iefix') format('embedded-opentype'),
   asset-url('my-font.ttf') format('truetype'),
   asset-url('my-font.woff') format('woff'),
   asset-url('my-font.svg#icon-aragon') format('svg');
  font-weight: normal;
  font-style: normal;
}

// Declare a "icon" class prefix that will apply the font to any icon-* class

[class^="icon-"], [class*=" icon-"] {
  font-family: 'my-font';
  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;
}

// Some example icons generated

.icon-arrow-right:before {
  content: "\3e";
}
.icon-female:before {
  content: "\4e";
}
.icon-male:before {
  content: "\4d";
}

Now we can call any icon to any element in this way:

<html>
  <body>
      <div><span class="icon-arrow-right"></span><p>Some content...</p></div>
  </body>
</html>

I use a <span> to avoid give all elements in the div the font-family of the icon font and also this is a best practice to avoid problems with screen readers.
So inside the span simply we call our icon you need to show, in this example 'icon-arrow-right'.

Hope it helps.