CSS-Tricks Example

Icon Fonts are Awesome

  1. Because you can easily change the size
  2. Because you can easily change the color
  3. Because you can easily shadow their shape
  4. Because they can have transparent knockouts, which work in IE6 unlike alpha transparent pngs.
  5. Because you can do all the other stuff image based icons can do, like change opacity or rotate or whatever.
  6. 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


  <span aria-hidden="true" data-icon="&#x21dd;"></span>

How To Use for Stand Alone Icons

RSS Bookmark Email
<a href="#" class="icon-alone">
  <span aria-hidden="true" data-icon="&#x25a8;"></span>
  <span class="screen-reader-text">RSS</span>