Como transformar seus ícones em uma fonte da Web
Eu havia criado alguns ícones para o redesenho do site que estava fazendo e visualizei o novo site em um iPad antigo. O layout parecia OK em tamanho normal, mas ampliando parte da página, de repente eu vi que meu ícone estava uma bagunça embaçada, enquanto o cabeçalho baseado em texto ainda estava nítido e nítido. Em um novo iPad com tela Retina, os ícones não pareciam muito nítidos, mesmo em tamanho normal.
A primeira ideia que tive foi criar imagens de sprite de tamanho duplo, configurando-as para exibir metade do tamanho usando CSS. Enquanto isso fazia com que parecessem melhor em um display Retina em tamanho normal, assim que você começava a apertar e dar zoom, a falta de nitidez retornava. Mas o texto ainda era tão nítido e bem definido.
A resposta foi óbvia. Eu precisava transformar meus ícones em uma fonte.
Neste tutorial, veremos como transformar ícones vetoriais em uma fonte da Web usando um ótimo aplicativo gratuito chamado IcoMoon. Em seguida, veremos como usar os arquivos de fontes gerados e CSS em uma página da web.
As vantagens de usar uma fonte de ícone
Uma fonte de ícones tem várias vantagens sobre imagens de bitmap, além da nitidez da imagem.
- Adequação: uma fonte de ícone será muito menor em tamanho de arquivo do que uma série de imagens, especialmente se você usou imagens de tamanho duplo para telas Retina. E assim que a fonte for carregada, seus ícones serão renderizados instantaneamente, sem a necessidade de baixar uma imagem.
- Escalabilidade: uma fonte de ícone pode ser definida para qualquer tamanho
font-sizepropriedade no CSS acompanhante. Isso permite que você experimente diferentes tamanhos; Considerando que, para imagens de bitmap, você teria que produzir um arquivo de imagem em cada tamanho. - Flexibilidade: os efeitos de texto podem ser facilmente aplicados ao seu ícone, incluindo cores, sombras e estados de rolagem. Eles também serão exibidos bem contra qualquer fundo de cor ou imagem.
- Compatibilidade: fontes da web são suportadas por todos os navegadores modernos e navegadores legados, também, até mesmo o IE 6 e versões anteriores.
Então vamos começar!
Criando uma fonte de ícone
As fontes Symbol podem ser construídas usando um aplicativo de criação de fontes dedicado, como Glifos , mas uma ferramenta de tipografia profissional está muito além das necessidades ou requisitos da construção de uma fonte de ícones simples, na qual a relação entre os caracteres (ou seja, kerning e ligaduras) não é importante.
De longe, a maneira mais fácil é usar um ótimo aplicativo on-line gratuito chamado IcoMoon , por Keyamoon, que tira todos os problemas de converter símbolos em uma fonte da web.
Este aplicativo HTML5 tira toda a dor de criar arquivos de fonte para usos simples, como a construção de fontes de ícones. O IcoMoon vem com vários conjuntos de ícones já carregados, e você pode adicionar mais à sua biblioteca, a maioria dos quais pode ser usada gratuitamente (verifique o licenciamento). Se você estiver procurando por ícones razoavelmente padronizados, como "download de arquivo" e "carrinho de compras", poderá descobrir que usar um deles é preferível à criação do seu próprio.
Passo a passo
1. Prepare suas ilustrações
Para começar, você precisa criar os ícones em um programa de desenho vetorial capaz de exportar para o formato SVG, como o Illustrator ou o Inkscape.
Enquanto você está projetando, você pode trabalhar com as cores que quiser, mas os ícones devem ter uma cor sólida. Certifique-se de que cada ícone tenha aproximadamente o mesmo tamanho. Ter um ícone muito mais alto ou mais longo do que o outro dificultará a construção de uma fonte consistente. Aqui, eu tive que reduzir a largura do meu ícone de dirigível para que ele corresponda aos outros.
2. Limpar
Verifique cada ícone cuidadosamente para garantir que não haja imperfeições - detalhes que parecem bons em tamanhos menores podem ocultar pequenos defeitos ao aumentar o zoom. No ícone mostrado abaixo, preciso remover as etapas irregulares que surgiram nos elementos de camadas.
No Illustrator, use a ferramenta Pathfinder para unir elementos sobrepostos e o elemento Minus Front para remover elementos de recorte, como a estrela nesses ícones.
O princípio fundamental é garantir que seu ícone seja legível em pequenas escalas. Simplifique o máximo possível.
3. Exportar para SVG
Agora, selecione um ícone e copie e cole-o em um novo documento quadrado (por exemplo, 200 × 200 pixels). Escale o ícone para que ele caiba. Você pode achar útil definir uma régua de linha de base. Cor o ícone de modo que seja preto sólido em um fundo branco.
Agora, escolha File… Save as e salve o arquivo como um arquivo SVG. Use as configurações padrão do SVG. Depois de fazer isso para todos os ícones, você está pronto para criar uma fonte da web.
4. Importe para o IcoMoon
Abra o Aplicativo web IcoMoon . Para importar um ícone, clique no botão “Importar ícones” e selecione os arquivos SVG que deseja adicionar - você pode adicionar vários arquivos de uma só vez. Eles aparecerão em "Seus ícones personalizados". Se estiverem destacados em amarelo, eles farão parte da fonte do ícone que você criará. Neste exemplo, você pode ver que eu decidi não exportar um dos meus ícones e adicionei um dos ícones dos "Mini- ícones".
5. Fonte de exportação do IcoMoon
Você pode clicar no botão "Editar" se quiser ajustar a posição, o dimensionamento ou a rotação do ícone. Use o botão "Salvar cópia" para criar variações de ícone (por exemplo, uma imagem espelhada de um ícone). Adicione uma tag significativa ao ícone, porque isso será usado para gerar o nome da classe para ele.
Quando estiver pronto, clique no botão "Fonte" na parte inferior da tela para começar a gerar a fonte. É aqui que você pode atribuir qual ícone é mapeado para qual caractere; por exemplo, se o seu conjunto de ícones for seis imagens de uma bola giratória, você poderá atribuir os caracteres q, w, e, r, te aos seis quadros. Nas preferências, escolha um nome de fonte. Também é possível ajustar as métricas da fonte, mas, a menos que você defina sua fonte personalizada ao lado do texto padrão, você não precisa se preocupar com isso.
6. Baixe os arquivos de fonte
Clique em “Download” para baixar o pacote de fontes para sua máquina. Será uma subpasta contendo as próprias fontes (nos formatos WOFF, EOT e TTF), bem como uma página HTML de amostra e o CSS correspondente. Existe até um arquivo JavaScript com uma solução alternativa se você precisar dar suporte ao IE 6 ou 7.
Para adicionar as fontes ao seu projeto, copie a subpasta de fontes para o seu site. Você pode copiar e colar o CSS de style.css no arquivo CSS do seu próprio site, mas minha abordagem é renomeá-lo como fonts.css e mantê-lo como um arquivo CSS separado. Você precisa adicionar uma referência a este arquivo CSS no seu arquivo HTML usando o link relativo:
<link rel="stylesheet" href="fonts.css" />No elemento @ font-face do arquivo CSS, você precisará alterar a referência de URL para o novo local relativo das fontes ou simplesmente soltar a pasta de fontes em sua pasta de folhas de estilo.
7. Chamando a fonte
Como você pode ver no arquivo index.html de amostra, há duas maneiras de referenciar a fonte personalizada, seja pelo caractere (unicode ou nome) ou pelo nome da classe. O primeiro exemplo usa a condição de ícone de dados HTML5
<div aria-hidden="true" data-icon="g"></div>Aqui, a classe fs1 é usada para definir o tamanho da fonte. A referência oculta por aria ajuda a garantir que o caractere não seja falado por nenhum leitor de tela.
O segundo método usa um elemento span:
<span aria-hidden="true"></span>Esse método é útil quando você deseja que o símbolo fique alinhado com o texto normal.
Se você quiser tornar o ícone um link, você pode incluir tudo em um href :
8. Ideias Avançadas
Como acabamos de descobrir com o estado de foco, mudar a cor do ícone é tão fácil quanto configurar a propriedade color em nosso CSS, e alterar o tamanho é tão fácil quanto configurar a propriedade font-size. Você também pode definir outras propriedades, como sombra de texto e transparência, mantendo a independência da resolução de uma fonte.
Experimente e garanto que você nunca mais usará ícones de bitmap.
Você já tentou usar fontes para ícones? Como você achou isso? Deixe-nos saber nos comentários.