Icon Fonts are Awesome

Because you can easily change the size

Because you can easily change the color

Because you can easily shadow their shape

Because they can have transparent knockouts, which work in IE6 unlike alpha transparent pngs. Because you can do all the other stuff image based icons can do, like change opacity or rotate or whatever. You'll be able to do things like add strokes to them with text-stroke or add gradients/textures with background-clip: text; once browser support is a bit deeper.

⇝ ◌ ▨ ◎ + ☀ data-icon="⇝" data-icon="◌" data-icon="▨" data-icon="◎" data-icon="+" data-icon="☀"

◈ ✉ ⚠ ⊗ ⌚ ⇷ data-icon="◈" data-icon="✉" data-icon="⚠" data-icon="⊗" data-icon="⌚" data-icon="⇷"

The icon font used on this page is Fico by Lennart Schoors then ran through IcoMoon for custom mappings. Here's a large collection of more choices. For quick usage, the code is below. To learn about usage in more detail, see this article.

How To Use To Enhance a Word

Stats

<h3> <span aria-hidden="true" data-icon="⇝"></span> Stats </h3>

How To Use for Stand Alone Icons