Using Font Awesome Icons without <i> Tags
If you've not used glyph icon libraries like Font Awesome before, you're really missing out. They're incredibly useful, flexible, and are easy to implement via markup. The normal method for using font awesome is by using an <i> element with an icon-specific CSS class:
This works beautifully in most cases but what if you don't want to inject an <i> tag or simply can't? If you run into this case, you can still use Font Awesome glyphs! All you need to do is use the :before pseudo-element of the element you want to use and set its content and font-family:
/* more styling for the icon, including color, font-size, positioning, etc. */
This is essentially what Font Awesome does for <i> tags so it's only natural that we do so for our custom purpose. To find the content string for the icon you'd like, just open the font-awesome.css and look up the icon you'd like to use!