tuning font – Turbosite – Blog https://www.turbosite.com.br/blog Wed, 03 Dec 2014 12:04:36 +0000 pt-BR hourly 1 https://wordpress.org/?v=7.1.2 https://www.turbosite.com.br/blog/wp-content/uploads/2026/09/cropped-logo_turbo_vermelha-32x32.png tuning font – Turbosite – Blog https://www.turbosite.com.br/blog 32 32 Dê um Tuning em suas Fontes com Ícones https://www.turbosite.com.br/blog/de-um-tuning-em-suas-fontes-com-icones/ Wed, 03 Dec 2014 12:04:36 +0000 http://blog.turbosite.com.br/?p=3865 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!

]]>