class.html

.icon-foo:before {
  font-family: 'icons';
  content: 'foo'
}

<span class="icon-foo"></span>

data-icon.html

[data-icon]:before {
  font-family: 'icons';
  content: attr(data-icon);
}

<span data-icon="foo"></span>

SVG

@matthew-andrews how do you colour/style SVG's using CSS?

For CSS properties that inherit (color, fill, stroke-width,...) you can stylize SVG icons. We do this in Polymer's icon svg icon set: http://www.polymer-project.org/docs/elements/icons.html#styling-with-css

One limitation of icon fonts is that if a user with accessibility needs forces their own font e.g. a dyslexic uses a special font, then the desired icons won't appear and will be replaced with what ever glyph matches in the user font

@wilsonpage colour them with sprites, or use foreground svg, and css. depends on browser requirements

Depends on where you want to manage the icon content: in CSS or in HTML?

Really, the best improvement you can make to your icon font implementation is to add a font load check. I talk about this here: https://github.com/zachleat/fontfaceonload and here https://speakerdeck.com/zachleat/bulletproof-font-icons