Dê um Tuning em suas Fontes com Ícones

10:04

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.

escolhendo-as-fontes-dica-turbosite

 

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:

fontello

 

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