O que é uma fonte de ícone? (E como usar um)

As fontes de ícone são uma solução popular para um problema comum de CSS; como incorporar ícones da web ao design do seu site de maneira eficiente e com carregamento rápido.

Com muitos serviços disponíveis para facilitar a escolha e o uso de uma fonte de ícone, você não precisa criar o seu próprio zero. As fontes de ícones estão por toda a internet.

Mas o que exatamente é uma fonte de ícone? E como você os usa? Aqui está um guia para tudo o que você precisa saber sobre fontes de ícones.

Explorar fontes

O que é uma fonte de ícone?

As fontes de ícone são tipos de letra que usam pequenas imagens em vez de letras. Como o tipo, cada caractere é escalável e pode ser modificado usando CSS.

Os principais motivos para usar uma fonte de ícone são que você pode alterar o tamanho, cor, forma, com facilidade. As fontes de ícone são transparentes por natureza, para que você possa colocá-las em qualquer cor ou tipo de plano de fundo e adicionar traços ou alterar a opacidade dos ícones.

Tudo é feito com CSS, para que você não precise criar imagens exclusivas para cada nova instância de um ícone no design. (Isso é ótimo para manter seu site e código leves.)

As fontes de ícone são imagens vetoriais, o que significa que são escaláveis. Como em qualquer outra fonte, você pode torná-las tão grandes ou pequenas quanto desejar. Use fontes de ícone sozinhas como elementos de arte ou mesmo espalhadas por outros campos de texto.

A biblioteca mais popular e conhecida de fontes de ícones é a Font Awesome. É usado em mais de 100 milhões de sites e inclui uma coleção robusta de opções de ícones. Ele funciona com todas as ferramentas populares, incluindo fontes da Web + CSS, SVG + JS, Sketch, aplicativos da Adobe, Vue.js, Angular, React e Ember.

Existem alguns outros conjuntos de ícones de fontes bastante conhecidos também.

• Flaticon
• Icofont
• Fontello
• IcoMoon

Prós e contras do uso de fontes de ícones

Então, por que você usaria - ou evitaria - uma fonte de ícone? Aqui estão alguns dos prós e contras de trabalhar com esse estilo de elemento de arte.

Prós do uso de fontes de ícone

• É fácil dimensionar os ícones, desde que as classes apropriadas existam no seu CSS
• Você pode obter grandes bibliotecas de ícones com poucos problemas
• Alterar as propriedades dos ícones é fácil, não importa o que você usou para criar seu site
• É fácil adicionar ícones a qualquer página do site (basta inserir o nome do ícone)
• Existem milhares de ícones para escolher em todos os tipos de estilos
• Os usuários do WordPress podem adicionar fontes de ícones com um plug-in simples ou copiando o diretório da fonte no código (quase qualquer interface)
• Você pode criar sua própria fonte de ícone se precisar de algo super personalizado

Contras do uso de fontes Icon

• Os ícones são uma única cor ou gradiente de cor (na maioria dos casos); mais alguns pacotes premium estão mudando isso
• Não é bom substituto se a fonte do ícone não carregar
• Talvez você não precise de um conjunto completo de ícones
• Alguns leitores de tela não sabem o que fazer com fontes de ícones
• Você pode não encontrar um pacote que atenda às suas necessidades

Como usar fontes de ícone

Embora as instruções para o uso de fontes de ícones possam variar um pouco, dependendo do provedor escolhido, a idéia básica é a mesma.

Geralmente, você tem três opções (a menos que planeje fazer um pouco mais de codificação):

• Use um plug-in que instale tudo, para que você precise chamar apenas os ícones que deseja usar. (Super fácil!)
• Use ícones de fonte incorporados do seu CMS ou construtor de sites. Isso funciona muito bem se você não possui um site personalizado ou precisa / deseja um tipo específico de ícone de fonte. A maioria dos criadores de sites vem com algo "pronto para uso".
• Vincular manualmente a uma fonte de ícone hospedada externamente. (A versão mais complicada do uso de um plug-in.)

Fontes de ícone vs. SVGs

O debate maior está mudando para se você deve (ou gostaria de) usar uma fonte de ícone versus imagens SVG com o objetivo de inserir imagens pequenas em seu site. Ambas as opções são igualmente viáveis ​​e têm muito a ver com preferências pessoais.

As fontes de ícone são geralmente mais fáceis para a maioria das pessoas encontrar e usar. Os ícones SVG são preferidos por usuários que precisam de mais controle de design.

Um arquivo SVG (formato vetorial escalável) pode oferecer um pouco mais de flexibilidade no design. (Você não está limitado a uma cor). Os arquivos pequenos e escalonáveis ​​podem ser carregados diretamente no diretório de mídia e são fáceis de trabalhar. Essa é uma boa opção se você precisar de apenas alguns ícones e não quiser lidar com uma biblioteca.

Os SVGs são mais flexíveis com a capacidade de adicionar mais cores e animação.

As fontes de ícone podem ser mais rápidas a longo prazo, porque estão armazenadas em cache. Mas a diferença pode ser bastante mínima.

As fontes de ícones de posicionamento podem ficar um pouco complicadas, pois estão sujeitas a regras típicas de fontes, como tamanho, espaçamento entre linhas e alinhamentos verticais. É por isso que a maioria das pessoas que usa uma fonte de ícone opta por um provedor estabelecido, em vez de tentar criar a sua própria.

Os SVGs podem incluir elementos que os tornam mais acessíveis que as fontes de ícone, que podem aparecer como caracteres de letras para os leitores de tela.

As fontes de ícone são geralmente mais fáceis para a maioria das pessoas encontrar e usar. As bibliotecas geralmente estão disponíveis e não são difíceis de entender. Os ícones SVG são preferidos por usuários que desejam mais opções de controle e personalização de design.

Ambas as opções são comumente usadas e funcionam bem na maioria dos casos. Escolher um deles tem muito a ver com o que você se sente mais confortável e com o que combina com a estética do design e a interface do usuário.

Conclusão

Um dos motivos pelos quais as fontes de ícones são tão populares é que são versáteis e fáceis de usar. Graças a um formato escalável que pode ser instalado com alguns cliques na maioria dos sistemas de gerenciamento de conteúdo, quase todo mundo pode começar a usar fontes de ícones rapidamente.

O benefício real para uma fonte de ícone é que o elemento usa CSS e não é um arquivo de imagem independente. Isso é bom para criar um site enxuto com elementos que carregam rapidamente e em um formato vetorial (ótimo se você precisar alterar o tamanho posteriormente).