O que são fontes de ícone? Base de conhecimento
O que é a fonte do ícone?
As fontes de ícones (às vezes chamadas de fontes de símbolos) são as que usam símbolos e ícones em vez de caracteres tradicionais, como letras e números. Esses ícones podem ser qualquer coisa, desde formas e setas simples a representações mais complexas de objetos, ações ou conceitos. As fontes de ícones se tornaram populares em web design porque permitem que desenvolvedores e designers insira facilmente ícones de vetores escaláveis em sites.
Quais são as vantagens das fontes de ícones?
Há uma grande variedade de fontes tradicionais que podem cobrir qualquer requisito do projeto ou design. Então, por que escolher fontes de ícone então? Eles oferecem várias vantagens:
- As fontes de ícones são baseadas em vetores, para que possam ser ampliadas para cima ou para baixo sem perder a qualidade. Isso os torna perfeitos para o design da web responsivo, pois os ícones podem se adaptar a diferentes tamanhos e resoluções de tela.
- As fontes de ícones são geralmente menores no tamanho do arquivo em comparação com os ícones baseados em imagem. Os downloads do navegador e os sacam uma vez, o que reduz o tempo total de carregamento da página.
- Essas fontes são fáceis de usar. É simples incorporá -los em um projeto da web. Você pode fazer isso usando CSS, assim como o texto regular. Ele oferece opções de flexibilidade e personalização.
- As fontes de ícones oferecem uma aparência e uma aparência consistente **, pois são criadas a partir do mesmo arquivo de fonte. Isso significa que todos os ícones usados em um site compartilham o mesmo estilo e linguagem visual.
No entanto, com o avanço das tecnologias da Web, o uso de ícones SVG (Scalable Vector Graphics) obteve melhor popularidade, mas as fontes de ícones ainda são usadas em vários projetos da Web. Muitas bibliotecas populares de fontes de ícones, como fontes impressionantes e ícones materiais, ainda são amplamente utilizadas por desenvolvedores e designers em todo o mundo.
Ícones SVG ou fontes de ícone?
Os ícones SVG e as fontes de ícones são métodos populares para fazer ícones em sites, mas têm algumas diferenças importantes. Para fazer uma escolha entre eles mais fácil para você, aqui está uma comparação detalhada ícones SVG para fontes de ícones:
| Parâmetro | Ícones SVG | Fontes dos ícones |
|---|---|---|
| Escalabilidade | Independentemente da resolução, pode ser ampliada ou reduzida sem perda de qualidade. Têm uma aparência elegante em qualquer tamanho ou resolução de ecrã e são perfeitas para web design responsivo. | As fontes de ícones também são escaláveis e podem ser redimensionadas sem perda de qualidade, uma vez que são baseadas em gráficos vetoriais. |
| Tamanho do ficheiro | Os ícones SVG são geralmente mais pequenos do que os formatos de imagem raster (como PNG ou JPEG), mas ainda podem ser maiores do que as fontes de ícones. | Possuem tamanhos de ficheiro mais pequenos, pois são uma coleção de ícones vetoriais comprimidos num único ficheiro de fonte. Depois de a fonte ser armazenada em cache pelo navegador, a utilização posterior dos ícones exige um tempo mínimo de carregamento adicional. |
| Suporte a browsers | Compatível com todos os browsers modernos. | Amplamente suportado, mas pode apresentar alguns problemas de compatibilidade em versões mais antigas do Internet Explorer. |
| Acessibilidade | Oferece uma melhor acessibilidade, uma vez que pode incluir texto descritivo para leitores de ecrã utilizando o atributo “aria-label” ou um elemento de título oculto. | Pode apresentar problemas de acessibilidade. São tratados como tipos de letra, pelo que os leitores de ecrã podem não os reconhecer como ícones e, em vez disso, ler caracteres individuais. |
| Interatividade | Interativo, sendo possível adicionar efeitos de foco, animações e outros comportamentos dinâmicos. | O uso de animações ou interações complexas não é suportado devido à interatividade limitada. |
| Personalização e estilo | Pode ser facilmente personalizado utilizando CSS, permitindo alterar cores, aplicar gradientes ou adicionar animações aos ícones. | Também pode ser estilizado com CSS, mas algumas opções de estilo podem ser limitadas. |
Como você pode notar, os ícones SVG e as fontes de ícones têm seus pontos fortes e fracos, mas à medida que a tecnologia evolui, os ícones SVG estão se tornando a escolha preferida para muitos designers e desenvolvedores da web. Eles são mais versáteis e acessíveis. No entanto, as fontes de ícones ainda têm seu lugar, especialmente ao trabalhar com as bibliotecas de fontes de ícones existentes que fornecem uma ampla gama de ícones.
Lassificação de fontes de símbolos
Existem muitas maneiras de classificar essas fontes que confiam em diferentes critérios. Aqui estão algumas categorias de classificação comuns:
Com base em seu estilo visual ou ícones de design, as fontes podem ser classificadas na próxima maneira:
- Minimalistas, - Ícones simples e limpos com foco nas formas e linhas básicas.
- Planos, - Ícones com design bidimensional e plano, geralmente sem sombras ou gradientes.
- Material Design, - Ícones que seguem as orientações do Google Material Design, com elementos estilísticos específicos.
- Esqueomórficos, - Ícones que se assemelham a objetos ou texturas do mundo real, com um aspeto mais realista.
De acordo com o uso pretendido, as fontes de ícones temáticas podem ser classificadas na próxima maneira:
- Ícones de Redes Sociais - Ícones que representam diversas plataformas de redes sociais (ex.: Facebook, Twitter, Instagram, YouTube).
- Comunicação - Ícones para e-mail, chat, mensagens ou chamadas.
- Navegação - Estes ícones são utilizados para indicar itens de menu, setas e outros elementos de navegação.
- E-commerce - Ícones relacionados com o processo de compra, métodos de pagamento e categorias de produtos.
- Reação - Estes ícones são adicionados para mostrar a reação a qualquer conteúdo (gosto/não gosto).
As fontes de ícones também podem ser classificadas com base em seu formato de arquivo e compatibilidade com diferentes navegadores e dispositivos:
- Fontes Seguras para a Web - Fontes de símbolos amplamente suportadas pela maioria dos browsers e dispositivos.
- Fontes SVG - Fontes de ícones armazenadas no formato SVG (Scalable Vector Graphics), oferecendo mais flexibilidade e escalabilidade.
- Bibliotecas de tipos de letra de ícones - São colecções de icofonts pré-desenhadas e disponibilizadas por diversas fontes.
De acordo com a extensão em que as fontes de ícones podem ser personalizadas através do CSS, eles podem ser classificados na próxima maneira:
- Tipos de letra de ícones que podem ter as suas cores facilmente alteradas utilizando propriedades CSS.
- Tipos de letra de ícones que podem ser ampliados ou reduzidos sem perda de qualidade ou pixelização.
- Tipos de letra de ícones que podem ser modificados para gerar efeitos adicionais, como sombras ou rotações.
- As fontes de ícones também podem ser classificadas com base nos seus termos de licenciamento, que vão desde gratuitos e de código aberto até licenças comerciais.
Os tipos de tipo de ícone também podem ser classificados de acordo com suas opções de tamanho, pois algumas delas vêm em tamanhos ou variações diferentes para atender a diferentes necessidades de design. Você pode usar ícones pequenos para botões ou ícones maiores para títulos.
Onde posso usar fontes de ícone?
As fontes de símbolo parecem chiques e você pode pensar que não há grande uso prático para tais tipos de letra. Você pode se surpreender, mas eles podem ser usados em vários contextos e aplicativos no desenvolvimento e no design da Web. Aqui estão alguns lugares comuns onde esses tipos de letra são usados:
| Local para utilizar ícones | Motivo de utilização | Exemplo |
|---|---|---|
| Navegação no site | As fontes de ícones são utilizadas como indicações visuais nos menus de navegação. Podem representar diferentes secções ou ações, para ajudar os utilizadores a compreender e interagir com o site. |  |
| Botões e chamadas à ação | Estas fontes podem ser utilizadas em botões e elementos de chamada para ação para melhorar a experiência do utilizador. Por exemplo, um ícone de um carrinho de compras num site de comércio eletrónico, o botão “Adicionar ao carrinho”. |  |
| Design de UI | As fontes de ícones são amplamente utilizadas no design de UI para aplicações de software, aplicações móveis e interfaces web como representações intuitivas de características, funções e ações. |  |
| Links de redes sociais | São utilizadas para exibir ícones de redes sociais e fornecer links para os perfis de redes sociais da sua empresa. |  |
| Elementos de cabeçalho e rodapé | Os ícones podem ser colocados em cabeçalhos e rodapés para simbolizar informações de contacto, barras de pesquisa, links de e-mail, etc. |  |
| Listas de recursos | Aqui, são utilizadas para destacar características, serviços ou benefícios de uma forma visualmente atraente. |  |
| Infográficos | As fontes de ícones podem ser utilizadas em infográficos para representar dados, estatísticas e para estruturar informação. |  |
Como acessar e integrar fontes de ícones em um projeto da web
Para ter esses tipos de letra em seu projeto da web, você precisará seguir estas etapas:
- Escolha uma biblioteca de fontes de ícone. Vá ao site da biblioteca e explore sua coleção de ícones.
- Faça o download dos arquivos ICOFONT. Normalmente, você obterá os arquivos de fonte em formatos como Woff, Woff2, TTF, EOT e SVG. Você também pode receber um arquivo CSS que contém as classes de ícones e o mapeamento.
- Ligue o arquivo CSS ao seu arquivo HTML. Este arquivo CSS contém os estilos e o mapeamento que associam as classes de ícones aos caracteres correspondentes no arquivo de fontes. Coloque a tag de link dentro da seção da cabeça do seu documento HTML.
- Inclua ícones em seu HTML para exibir os ícones desejados. Adicione o (s) nome (s) da classe (s) a um elemento HTML, onde deseja que o ícone apareça.
Sintaxe:
1<link rel="stylesheet" href="path/to/icon-font-library.css">- (Opcional) Verifique a documentação da biblioteca para ver se e como você pode personalizar os ícones para corresponder às suas preferências de design.
Sintaxe:
1<i class="icon-font icon-envelope"></i>- Teste seu site com dispositivos e navegadores para garantir que os ícones sejam exibidos corretamente e que os arquivos CSS e Fonte carregam corretamente. Teste também se suas fontes de ícones são responsivas e escalem adequadamente em vários tamanhos e resoluções de tela.
Se você seguir estas etapas com cuidado, poderá acessar e integrar fontes de ícones no seu projeto da web com sucesso.
Acessibilidade e considerações de SEO
Ao usar fontes de ícone em seu site, é essencial considerar a otimização de mecanismos de pesquisa (SEO) para garantir que seu conteúdo e ícones sejam indexados corretamente pelos mecanismos de pesquisa e acessíveis aos usuários. Aqui estão alguns pontos desse problema:
- Use elementos HTML semânticos para incorporar fontes de ícones. Evite usá -los puramente para fins decorativos. É melhor usar elementos HTML apropriados como
<i>ou<pan>e fornecer conteúdo de texto descritivo e relevante dentro desses elementos para transmitir o significado do ícone. - Para fontes de ícone usadas em elementos
<i>ou<pan>, adicione texto alternativo descritivo usando o atributo “alt”. Isso ajuda a rastrear os leitores e os mecanismos de pesquisa a entender o objetivo e o significado do ícone.
Sintaxe:
1<i class="fa fa-envelope" aria-hidden="true" alt="Envelope icon - Contact us"></i>- Use atributos ARIA (Aplicações de Internet Rich Acessível da Internet) para aprimorar a acessibilidade para leitores de tela e tecnologias de assistência. Use o atributo “Aria-Label” para fornecer um rótulo para o ícone que complementa o texto alternativo.
Sintaxe:
1<i class="fa fa-search" aria-hidden="true" aria-label="Search"></i>- Certifique -se de que os arquivos de fonte do ícone carreguem com eficiência e não diminua o desempenho do seu site. Use os formatos de fonte apropriados (por exemplo, Woff2) suportados pelos navegadores modernos e otimizam o tamanho do arquivo de fonte para reduzir os tempos de carregamento.
- Implemente as práticas de design responsivo para que suas fontes de ícones escalem adequadamente e permaneçam claras e legíveis nas plataformas de mesa e móveis.
- Considere usar sprites de ícone para reduzir as solicitações HTTP e melhorar os tempos de carregamento. Ele permite combinar vários ícones em um único arquivo de imagem e, em seguida, usando o posicionamento de fundo do CSS para exibir o ícone desejado.
- Otimize seu CSS para eliminar as classes de ícones não utilizadas. Minify seus arquivos CSS para reduzir o tamanho e aprimorar a velocidade de carregamento do site.
- Inclua seus arquivos de fonte de ícone no sitemap XML do seu site. Em seguida, os mecanismos de pesquisa podem descobri -los e indexá -los.
Seguindo essas práticas de SEO, você pode tornar as fontes de símbolo mais acessíveis e melhorar o desempenho do site, mantendo uma boa visibilidade nos resultados dos mecanismos de pesquisa.
Recursos e ferramentas para trabalhar com fontes de ícones
Trabalhar com fontes de ícones requer recursos e ferramentas específicos para criar, personalizar e implementar efetivamente. Vamos dar uma olhada em alguns recursos e ferramentas valiosos que você pode usar:
- Fonte Awesome, - uma biblioteca popular da ICOFONT que oferece uma vasta coleção de ícones de vetor escaláveis. Ele fornece arquivos de fonte CSS e Web que você pode integrar facilmente aos seus projetos.
- Google Fontes - O recurso conhecido principalmente por suas fontes de texto, mas também oferece uma seleção de fontes de ícones que você pode usar em seus projetos.
- ICOMOON, - é um aplicativo da web que permite personalizar e criar suas próprias fontes de ícone selecionando -se de vários pacotes de ícones ou enviando seus ícones SVG. Com ele, você pode baixar apenas os ícones necessários, reduzindo o tamanho do arquivo de fontes.
- Fontello também permite criar fontes de ícones personalizadas escolhendo ícones de vários conjuntos de ícones.
- Gerador de texto sofisticado. O aplicativo de plataforma cruzada permite a criação de linhas de texto embrulhadas com ícones, para que você possa usá-los em suas mídias sociais como status ou em informações biológicas.
- Fontastic, - Uma ferramenta que permite criar ICOFONTs personalizados selecionando ícones de diferentes fontes ou carregando seus próprios arquivos SVG. Ele também gera arquivos CSS e Fonte para seus ícones.
- Adobe Illustrator ou Inkscape - são ferramentas poderosas para criar ou modificar ícones antes de convertê -los em uma fonte de ícone.
- Repositórios de ícones do GitHub - é um recurso valioso para encontrar conjuntos de ícones de código aberto e projetos de fontes de ícones. Pesquise por “Icon Font” ou “Icon Pack” para encontrar repositórios que oferecem fontes de ícone prontos para uso gratuitamente.
- Gerador de texto CSS, - Um aplicativo de plataforma cruzada para ajudá -lo a trabalhar com fontes no CSS e HTML. Ele cria o código, que você pode usar para implementar fontes em seu site.
Ao usar fontes de ícone, é importante lembrar sobre a acessibilidade. Certifique -se de fornecer atributos de texto alternativo e ARIA adequados para os leitores de tela para tornar seus ícones inclusivos e acessíveis a todos os usuários.
Conclusão
As fontes de ícones tiveram um papel significativo no aprimoramento do apelo visual e da experiência do usuário dos sites, particularmente em áreas como navegação, botões e design de interface do usuário. Eles oferecem inúmeras vantagens, incluindo fácil personalização, pequenos tamanhos de arquivo e compatibilidade com uma ampla gama de dispositivos e navegadores.
No entanto, à medida que a tecnologia evolui, surgiram novas e mais acessíveis alternativas. Os ícones de gráficos vetoriais escaláveis (SVG) e bibliotecas de ícones tornaram -se populares à medida que oferecem benefícios em termos de capacidade de resposta, otimização de mecanismos de pesquisa e compatibilidade com o leitor de tela.