Transformando seus ícones em uma fonte Web

Oi oi gente! No meu primeiro post, com incentivo e apoio dos meus 'coworkers', trago uma experiência muito boa que tivemos em um dos nosso mais recentes trabalhos, a transformação de ícones disponibilizados pelos nosso queridos 'web designers' em uma fonte Web.

Ao criar um layout é comum deparar-se com um velho problema: ao visualizar ou ampliar os ícones no navegador você percebe que eles perderam alguma qualidade. Por outro lado, a parte do texto está perfeita, com contornos e cores bem delineados. A solução para esse problema é transformar os ícones em uma fonte.
Testei dois métodos práticos e úteis de fazer isso e trago aqui as vantagens e desvantagens dos dois métodos, para melhorar a qualidade dos nossos trabalhos.

As vantagens da utilização de um ícone como fonte

Além de nitidez da imagem, um ícone transformado em fonte tem diversas outras vantagens:

Escalabilidade: O ícone de fonte pode ser ajustado para qualquer tamanho, definindo o atributo de font-size no CSS. Para imagens de bitmap, você teria que produzir um arquivo de imagem em cada tamanho desejado.

Desempenho: Uma vez que a fonte é carregada, seus ícones aparecerão instantaneamente, sem a necessidade de esperar o tempo de baixar as imagens.

Flexibilidade: Efeitos como cores e sombras podem ser facilmente inseridos nos seus ícones.

Compatibilidade: fontes da web são suportados por todos os navegadores, mesmo o Internet Explorer versão 6 e anteriores.

Enfim, com tantas vantagens, você ainda tem dúvida de que transformar os seus ícones em fontes é uma grande ideia? Então vamos a um breve tutorial.

  • Inicialmente você vai precisar dos ícones em formato SVG.

    As soluções:

    Para quem trabalha com Javascript, este é um utilitário para gerar fonte por linha de comando, muito simples. Ele permite algum grau de personalização, também faz um par de coisas extras, como a criação de um arquivo .json contendo os ícones mapeados para caracteres unicode, que depois pode ser usado em estilos, modelos, etc.

    icon-font-generator

    https://www.npmjs.com/package/icon-font-generator

    Como instalar:

    npm install -g icon-font-generator

    Como usar:

    icon-font-generator path-com-icones/*.svg -o path-destino

    São gerados os seguintes arquivos, que devem ser inseridos no seu projeto:
    geracao

    O que chamou a minha atenção foi que a fonte já foi gerada nos formatos mais comuns e utilizados para fontes: EOT, TTF e WOFF. Não há um formato único que funcione em todos os navegadores, por isso os vários formatos gerados.

    Pode-se observar que foi gerado um arquivo css contendo as classes de cada ícone. A partir daí é sucesso, basta utilizar a classe desejada no seu html.
    css

    Uma desvantagem é que foram gerados estilos para toda tag <i>, forçando a utilização da minha nova fonte gerada, impactando o uso de outras fontes como o Font Awesome.
    A forma que usei para solucionar este problema foi alterar o css gerado para modificar apenas os ícones que contém a classe ".icons-".
    geracao


    Glyphter

    Pra quem não quer utilizar suas habilidades com Javascript, exitem outras alternativas, inclusive online. Testei a Glyphter, super simples de usar. Possui versão gratuita e a versão paga com algumas regalias nem tão interessantes assim. No Glyphter basta você clicar em cada quadrado do grid, escolhendo os ícones que você tem e quer que estejam presentes na sua fonte.
    Na lateral direita da ferramenta é fornecido alguns ícones que também podem ser utilizados nos seus projetos.

    Ao clicar em "Font", você faz download da fonte gerada á partir dos ícones que você selecionou. Os arquivos gerados são bem parecidos com os arquivos da ferramenta apresentada anteriormente.

    Esses foram os métodos que eu experimentei, teste esses e eu garanto que você nunca mais vai querer usar ícones como imagens novamente! (Eu estou exagerando, eu sei! Mas vale muito a pena experimentar). Espero que gostem...e até a próxima!