Using Glyph Fonts in CSS

Question

I'm attempting to use a .woff font from Icomoon so I can add glyphs to various elements on the page. But, how do I use them? Here's what I've tried:

fonts.less

@font-face {
  font-family: 'Icomoon';
  font-style: normal;
  font-weight: 400;
  src: local('Icomoon'), local('Icomoon'), url('fonts/Icomoon.woff') format('woff');
}

header
{
   #steps span
   {
       font-family: Icomoon;
   }
}

index.php

....
<header>
   <ul id="steps">
       <li><span>A</span> Sign Up</li>
   </ul>
</header>
....

The font seems to have changed, but there's no glyph. The icon set I am using is IcoMoon Free from: http://icomoon.io/app/#/select

Am I missing something here? I am using Bootstrap, and was hoping to include them the same way Bootstrap does (without having to include a letter with the span tags).

Any ideas?

Answer 1

Fonts can be a pain in the but sometimes,

I use font squirrels webfont generator:

http://www.fontsquirrel.com/tools/webfont-generator

That should work!