Fonte awesome

Muitos de vocês ja devem ter ouvido falar da fonte awesome, outros não. Para quem não sabe trata-se de uma fonte que reúne centenas de ícones em uma única fonte, que é de fácil uso e mais fácil ainda de instalar.

Instalação
Acesse o site http://fortawesome.github.io/Font-Awesome e baixe a fonte disponibilizada ali, e hospede ela no seu servidor favorito. Para quem não tiver ou não souber como fazer de graça é possível usar a CDN deles.
Ao baixar o arquivo CSS basta adicionar ele ao seu documento com o código abaixo:

Código:

<link href="LINK ONDE VOCÊ HOSPEDOU" rel="stylesheet">

Caso vá usar a CDN fica mais fácil ainda, é só colar isso no head do seu documento

Código:

<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">

Pronto, já está instalada e pronta para uso!

Métodos de uso
Você pode usar as fontes dentro de elementos HTML ou manipulando o CSS, veja exemplos:

Primeiro escolha um ícone aqui
http://fortawesome.github.io/Font-Awesome/icons

Agora vamos adicionar um ícone dentro de um botão, veja:

Código:

<button>
 <i class="fa fa-apple"></i> Apple
</button>

Isso cria um botão com um ícone da Apple a esquerda do nome "Apple", para criar do lado direito basta inverter o "i"

Exemplo de como usar manipulando CSS

Digamos que você tenha esse elemento

Código:

<span class="apple"></span>

E quer adicionar seu ícone antes do nome da Apple, você precisa usar os métodos before ou after do CSS, veja como:

Código:

.apple:before{
 content:"\f179";
 font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
    text-decoration: inherit;
}

Aqui você encontra uma lista completa dos códigos usado no CSS (content)
http://astronautweb.co/snippet/font-awesome

No site deles você encontrar várias e várias formas de manipular e estilizar os ícones (é possível até fazer ele ficarem rotacionando apenas com CSS), são muitas possibilidades vale a pena conferir
http://fortawesome.github.io/Font-Awesome/examples/

Veja um live view de nossos exemplos:
http://jsfiddle.net/Wagner/9ksJ7/embedded/result/

A vantagem de usar é que você não necessita de imagens, é tudo feito com uma fonte

Espero que gostem! E até breve...

Muito interessante isso, mas os ícones que aparecem dentro do "content" fazem parte desse arquivo?

JS

muito massa não sabia dessa, e mais uma alternativa disponível.

@JScript, creio que sim, nunca testei o uso sem o arquivo instalado...