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.

+	⊕	a	A	↩	b
.icon-plus	.icon-circleplus	.icon-a	.icon-A	.icon-return-arrow	.icon-b

B	c	C	✔	⌚	☁
.icon-B	.icon-c	.icon-C	.icon-check	.icon-watch	.icon-cloud

The icon font used on this page is Fico by Lennart Schoors. Here's a collection of more by simurai.

Common Arguments Otherwise

• What about screen readers? They just get random letters. If you apply them via pseudo elements to otherwise obvious content, it's not really an issue. Some fonts even map the characters to the best ones possible, like a flag icon being mapped to the unicode flag symbol.

  For instance, a check button:

  Check

  .icon:before { 
          font-family: icons;
          margin-right: 5px;
  }
  .icon-replace {
          text-indent: -9999px;
          overflow: hidden;
          display: inline-block;
          position: relative;
          min-width: 1em;
  }
  .icon-replace:before {
          position: absolute;
          left: 0;  /* Firefox needs to be explicit here */
          top: 0;
          text-indent: 0;
  }
  
  .icon-check:before { content: "✔"; }
  /* Plus your other icon types here */

  Turns into this:

  Check

  So yeah that seems pretty semantic/accessible to me.

  And if you wanted to just add an icon to already existing text (like a header) you could just do this:

  <h3 class="icon icon-C">Stats<h3>

  Which results in:

  Stats

• SVG is better. OK cool, show me, I don't know enough about SVG to understand why it would be better for this.
• Rabble rabble rabble! I hate things that are different from things I already know and am comfortable with. Must be rough.