Dê um Tuning em suas Fontes com Ícones

Boa parte dos Designers acabam por não utilizar 80% de recursos dos ícones de uma fonte, exemplo a Font Awesome. São tantos ícones, que normalmente vamos utilizar uns 10 a 15, ficando então mais de 400 sem utilizar.

Porque não otimizar? Diminuir o tamanho do arquivo e entregar ao usuário apenas o que ele precisa é primordial, tanto que até o Google leva este requesito em consideração na hora de rankear o seu site.

A maneira mais fácil que encontramos é utilizando o recurso do site Fontello. Neste site você seleciona os ícones que deseja e depois faz download da Font compilada e otimizada, simples, rápido e fácil.

Após fazer o download, sua utilização é extremamente simples, basta inserir os arquivos em seu site e utilizar a nova fonte.

Código de exemplo de inserção dos arquivos:

<link rel="stylesheet" href="css/fontello.css">
<link rel="stylesheet" href="css/animation.css">
<!--[if IE 7]><link rel="stylesheet" href="css/fontello-ie7.css"><![endif]-->

Depois inserir os ícones desejados:

<i class="icon-emo-wink"></i>
<i class="icon-emo-thumbsup">
<i class="icon-vkontakte"></i>
<i class="icon-level-down"></i>

Veja o exemplo que o Fontello nos entrega ao efetuar download da fonte compilada:

Tudo muito simples, desta forma você e seu usuário serão beneficiados.  Alguma dica ou sugestão? Deixe nos comentários!