Como utilizar o IcoFont no WordPress e em projetos web

Para utilizar o IcoFont sem transformar o seu site WordPress numa caixa de surpresas, basta seguir duas regras: carregá-lo da forma correta e tratar os ícones como componentes da interface do utilizador, e não como meros enfeites decorativos. Já vimos fontes de ícones que «funcionavamno ambientede teste» e depois desapareciam no dia do lançamento porque um ficheiro de fonte apresentava um tipo MIME incorreto.

Resposta rápida: hospede o IcoFont no seu próprio servidor, coloque-o na fila uma única vez, mantenha os nomes das classes consistentes e adicione regras de acessibilidade (aria-hidden ou rótulos de texto) para que os ícones não confundam os leitores de ecrã nem prejudiquem o funcionamento dos botões.

O que é o IcoFont e quando é a escolha certa

IcoFont é uma biblioteca de fontes de ícones. Basta carregar um ficheiro CSS e os ficheiros de fonte e, em seguida, inserir os ícones adicionando classes a um elemento como <i> ou <span>. O seu navegador apresenta o ícone como um glifo de um tipo de letra.

As fontes de ícones continuam a ser úteis quando se pretende:

• Configuração rápida para uma grande quantidade de ícones monocromáticos em menus, botões e pequenos elementos da interface do utilizador.
• Estilo simples com CSS color e font-size.
• Um recurso armazenado em cache que inclui vários ícones.

Não são a melhor opção quando se precisa de ícones multicoloridos, controlo preciso por ícone ou predefinições de acessibilidade robustas.

Eis a relação de causa e efeito a ter em conta: o carregamento da fonte -> influencia -> se os ícones aparecem ou não. Se o ficheiro da fonte não for carregado, todos os ícones transformam-se numa caixa vazia.

Fontes de ícones vs. ícones SVG: compromissos entre desempenho e acessibilidade

Tanto as fontes de ícones como os ícones SVG funcionam. Apenas apresentam falhas de formas diferentes.

• Fontes de ícones
• Desempenho: Um único ficheiro de tipo pode incluir centenas de ícones. O armazenamento em cache do navegador facilita a navegação entre páginas.
• Estilo: color e font-size sinta-se à vontade.
• Desvantagem: as fontes não são semânticas. Um leitor de ecrã pode ler coisas estranhas se não ocultar os ícones decorativos.
• Ícones SVG
• Desempenho: O SVG incorporado pode tornar o HTML pesado, mas as folhas de sprites conseguem manter-se leves.
• Estilo: É possível definir várias cores e controlar os detalhes com precisão.
• Vantagem: o SVG pode ser mais claro em termos de acessibilidade quando é devidamente rotulado.

Se estiver a criar uma interface de utilizador para comércio eletrónico no WordPress, esta relação torna-se rapidamente evidente: a marcação dos botões -> afeta -> as conversões. Se os ícones interferirem com os rótulos ou o espaçamento, o seu botão «Adicionaraocarrinho» fica com um aspeto estranho e o número de cliques diminui.

Licenças, downloads e como escolher um conjunto de ícones coerente

Antes de enviar qualquer coisa, verifique as licenças e opte por um conjunto único e coerente.

• Licença: Leia a licença que acompanha o ficheiro descarregado do site da IcoFont. Guarde uma cópia no seu repositório ou na documentação do projeto.
• Coerência: Escolha um estilo de ícone (de contorno ou preenchido) e mantenha-o.
• Recomendação: Se conseguir reduzir o conjunto, mantenha apenas os ícones que realmente utiliza. Os ficheiros mais pequenos carregam mais rapidamente.

Encaramos isto como uma questão de gestão da interface do utilizador: a proliferação de conjuntos de ícones afeta a consistência da marca e atrasa as decisões de design posteriores.

Como funciona o IcoFont: ficheiros, classes e Unicode

IcoFont funciona como a maioria das fontes de ícones: o CSS declara uma «font-face» e, em seguida, cada classe de ícone é associada a um ponto Unicode. A classe adiciona um ::before pseudo-elemento que exibe o glifo.

Na prática, isto significa o seguinte : o mapeamento CSS determina quais os glifos que são apresentados. Se alterar o CSS ou a versão da fonte sem atualizar ambos, os ícones deslocam-se ou ficam incorretos.

O que está incluído no download (CSS, tipos de letra, ficheiros de demonstração)

A maioria dos downloads do IcoFont inclui:

• Um ficheiro CSS (geralmente com um nome do tipo icofont.css)
• A fonts/ pasta com ficheiros como:
• .woff2 (melhor (padrão moderno)
• .woff
• .ttf (alternativa antiga)
• às vezes .eot e .svg (soluções alternativas muito antigas)
• Um ficheiro HTML de demonstração que lista ícones e os nomes das suas classes

Nas instalações de produção, preferimosr .woff2 além disso .woff como alternativa, a menos que seja necessário oferecer compatibilidade com navegadores muito antigos.

Como os nomes das classes correspondem aos ícones (e por que os prefixos são importantes)

IcoFont utiliza nomes de classes como icofont-... (o nome exato depende do pacote/versão). O CSS terá o seguinte aspeto:

• .icofont-something:before { content: "\f123": }

Isso \f123 é um ponto Unicode no ficheiro da fonte.

Os prefixos são importantes porque:

• Consistência de prefixos -> implica -> conflitos. Se outro plugin carregar uma fonte de ícones diferente e reutilizar os mesmos nomes de classe, um conjunto pode substituir o outro.
• Alterações de versão -> afetam -> o significado do ícone. Um ponto Unicode pode corresponder a um glifo diferente numa versão diferente.

Se tratar as classes de ícones como uma API, terá menos dificuldades. Fixe as versões. Não «mudeafonte» de ânimo leve.

Adicionar o IcoFont a um site HTML simples

O HTML simples é a forma mais fácil de aprender como o IcoFont funciona, porque permite controlar todo o processo.

Plano de configuração rápida:

1. Coloque o ficheiro CSS em /assets/icofont/icofont.css
2. Coloque os ficheiros de tipos de letra em /assets/icofont/fonts/
3. Inclua o CSS no seu <head>
4. Adicione classes de ícones na sua marcação

Ligar o CSS e carregar os ficheiros de tipos de letra corretamente

No cabeçalho do seu HTML:

• <link rel="stylesheet" href="/assets/icofont/icofont.css">

Em seguida, confirme os caminhos no interior icofont.css corresponder à sua estrutura de pastas. Muitos ficheiros CSS de tipos de letra fazem referência a tipos de letra como:

• url("../fonts/icofont.woff2")

Portanto, se mudar o ficheiro CSS, isso ../fonts/ o caminho pode interromper-se.

Verifique também se o seu servidor envia os tipos MIME corretos para as fontes. Tipos MIME incorretos podem impedir o carregamento das fontes em algumas configurações.

Inserir ícones na marcação e controlar o tamanho, a cor e o espaçamento

Um padrão típico:

• <i class="icofont-ui-cart" aria-hidden="true"></i>

Depois, aplique o estilo:

.icon { font-size: 18px: color: #111: margin-right: 8px: vertical-align: middle: } 

Utilização font-size em termos de tamanho, color para a cor e margem para o espaçamento.

Duas dicas práticas que usamos frequentemente:

• Incluir os ícones numa classe utilitária (.icon) para que não tenha de redefinir o estilo de todos os ícones.
• Conjunto line-height: 1 sobre ícones dentro de botões pequenos então não se deslocam verticalmente.

Se o seu ícone parecer “demasiado baixo,“ geralmente trata-se do alinhamento da linha de base. CSS vertical-align resolve a maioria dos casos.

Utilizar o IcoFont no WordPress com segurança

O WordPress acrescenta mais uma variável: os temas e os plugins podem colocar os seus próprios pacotes de ícones na fila. O seu objetivo é carregar o IcoFont uma única vez, de forma previsível e de modo a que permaneça intacto após as atualizações.

Resposta rápida: colocar na fila IcoFont tal como qualquer outra folha de estilo, hospede-a você mesmo e evite colar <link> tags em ficheiros de temas aleatórios.

Se pretender aprofundar os seus conhecimentos sobre o WordPress, também disponibilizamos estes guias na Zuleika LLC:

• Lista de verificação para a manutenção de sites WordPress
• Noções básicas de segurança do WordPress para pequenas empresas
• Dicas de experiência do utilizador (UX) do WooCommerce para páginas de produtos

(Se essas páginas ainda não estiverem online, crie-as como os seus próximos tickets de conteúdo interno. Elas complementam bem este artigo.)

Opção A: Inserir o IcoFont na fila através do ficheiro functions.php (Recomendado)

Esta é a forma mais simples e nativa do WordPress.

Adicione uma chamada à fila de folhas de estilo no seu tema (ou tema filho):

• Carregar icofont.css através de wp_enqueue_style()
• Indique a pasta do tema ou a pasta de uploads
• Adapte-o para que as caches funcionem

Por que isto funciona: Uma enfileiramento adequado -> influencia -> a ordem de carregamento e o controlo da cache. O WordPress consegue gerir as dependências, e é possível alterar as versões sem ter de procurar nos modelos.

Nota de segurança: não carregue CSS de ícones a partir de CDNs desconhecidos em sites regulamentados. A hospedagem própria reduz a exposição de dados e alterações inesperadas.

Opção B: Incorporá-lo num tema filho ou num plugin para facilitar as atualizações

Se colocar tudo num tema pai e o atualizar mais tarde, poderá perder as alterações. É assim que começam as histórias do tipo «os ícones desapareceram ».

Dois padrões mais seguros:

• Tema filho: mantenha o seu código de enfileiramento e os seus recursos no tema filho.
• Um pequeno plugin auxiliar: crie um plugin simples que apenas coloque o IcoFont na fila.

Este padrão é útil porque: as atualizações do tema -> afetam -> a sobrevivência do código personalizado. Um plugin mantém-se ativo mesmo quando se muda de tema.

Opção C: Utilizar um construtor de páginas ou um bloco HTML personalizado sem violar o CSP

Os criadores de páginas levam as pessoas a colar <link> transforma as tags em blocos HTML. Pode funcionar, mas também pode violar as regras da Política de Segurança de Conteúdo (CSP).

Se tiver cabeçalhos CSP que restrinjam style-src, os links embutidos aleatórios podem não funcionar.

Abordagem mais segura:

• Incluir a folha de estilo em todo o site ou apenas nas páginas necessárias
• Mantenha a marcação dos ícones em blocos, mas mantenha o carregamento dos recursos na fila do WordPress

As regras do CSP determinam se o navegador aceita os seus estilos. Quando mantém a carregamento centralizado, a depuração mantém-se organizada.

Torne os ícones acessíveis, adaptáveis e consistentes

Os ícones alteram a forma como as pessoas percorrem uma página. Também alteram a forma como as tecnologias de assistência leem uma página. Se ignorar a acessibilidade, os ícones podem tornar-se ruído.

Regra rápida: os ícones decorativos devem permanecer sem texto, enquanto os ícones informativos devem ter um equivalente textual.

Ícones decorativos vs. informativos: aria-hidden, rótulos e leitores de ecrã

Utilize este fluxograma:

• Ícone decorativo (puramente visual):
• Adicionar aria-hidden="true"
• Não adicione texto adicional
• Ícone informativo (acrescenta significado):
• Adicione uma etiqueta acessível através de texto visível, ou
• Utilização aria-label no botão/link quando o ícone substitui o texto

Exemplo: o ícone do carrinho ao lado de «Carrinho» é meramente decorativo. Esconda-o.

Exemplo: um botão «Pesquisar» que apresenta apenas um ícone precisa de um rótulo.

Os leitores de ecrã -> afetam -> a confiança do utilizador. Se a interface do checkout parecer sem sentido, as pessoas abandonam o processo.

Para mais informações sobre os padrões ARIA, consulte as orientações do W3C: Práticas de CriaçãoWAI-ARIA.

Classes utilitárias reutilizáveis para botões, menus e a interface do utilizador do WooCommerce

Gostamos das classes utilitárias porque tornam a utilização dos ícones previsível em todos os modelos.

Um conjunto simples:

• .icon define o tamanho, a altura da linha e o alinhamento
• .icon--left adiciona margem direita
• .icon--right adiciona margem esquerda
• .btn .icon define um tamanho de letra consistente para os botões

Este padrão é útil porque: um espaçamento consistente -> influencia -> a qualidade percebida. Pequenos desalinhamentos fazem com que um site pareça« estranho», mesmo que as pessoas não consigam explicar porquê.

Nota sobre o WooCommerce: não inclua ícones nas cadeias de tradução. Coloque o texto no modelo e, em seguida, adicione os ícones através de marcação. As traduções afetam a estabilidade das cadeias , e os ícones dentro das cadeias tornam-se rapidamente confusos.

Resolução de problemas e governança para sites de produção

A maioria dos problemas com o IcoFont parece indicar que «oícone está danificado». As verdadeiras causas estão por baixo da superfície: percursos, cache, conflitos ou cabeçalhos.

Abordamos a resolução de problemas como uma lista de verificação, não como um jogo de adivinhas.

Soluções comuns: ícones que não aparecem, problemas com CORS/MIME, cache, conflitos

Se os ícones não forem exibidos:

1. Consulte o separador «Rede» nas Ferramentas do programador.

• Os ficheiros de tipos de letra devem devolver o código 200.
• Se aparecer um erro 404, significa que os caminhos no CSS estão errados.

1. Verifique os tipos MIME.

• Os servidores devem servir .woff2 como font/woff2 e .woff como font/woff.
• Tipos de letra incompatíveis podem impedir a exibição das fontes.

1. Verifique o CORS quando as fontes forem carregadas a partir de um domínio diferente.

• O carregamento de fontes entre domínios pode falhar se não forem utilizados os cabeçalhos adequados.

1. Verifique o armazenamento em cache.

• Os caches dos plugins e as CDNs podem apresentar CSS antigos que remetem para nomes de ficheiros de tipos de letra desatualizados.
• Atualize os números de versão sempre que alterar os recursos.

1. Verifique se existem conflitos de CSS.

• Pode ser necessário utilizar outro plugin font-family regras para <i> etiquetas.
• Utilize um seletor mais específico para a classe da sua fonte de ícones.

Ordem de enfileiramento no WordPress -> influencia -> qual CSS prevalece. Quando dois conjuntos de ícones entram em conflito, a folha de estilo carregada por último costuma prevalecer.

Referências de confiança sobre temas relacionados:

• CORS para programadores (MDN Web Docs)
• Noções básicas sobre tipos MIME HTTP (MDN Web Docs)

Controles de risco: limitação de cargas, alojamento próprio, fixação de versões e registos de alterações

Os ambientes de produção precisam de medidas de segurança, não de depuração de heróis.

Controles que utilizamos:

• Hospede os seus próprios recursos para que terceiros não alterem os ficheiros sem o seu consentimento.
• Carregue o IcoFont apenas quando necessário, caso o seu site tenha limites rigorosos de desempenho.
• Fixa as versões guardando a compilação exata do IcoFont no teu repositório.
• Escreva um pequeno registo de alterações relativo às alterações nos ícones.
• « Alteraçãoda classe do ícone do carrinho de X paraY» poupa horas mais tarde.
• Mantenha as pessoas informadas sobre as alterações na interface do utilizador em sites regulamentados.
• Os textos nas áreas médica, jurídica e financeira continuam a necessitar de revisão humana.

Controlo de alterações -> repercute-se -> no tempo de atividade e na confiança. Pequenas alterações na interface do utilizador podem gerar muitos pedidos de assistência se não forem acompanhadas.

Conclusão

Se queres que o IcoFont pareça monótono, estás a fazê-lo bem. Carrega-o uma vez, hospeda-o no teu próprio servidor, mantém os nomes das classes estáveis e define regras de acessibilidade para que os ícones permaneçam inativos quando for necessário.

Se estiver a criar um site em WordPress ou WooCommerce e quiser que verifiquemos o carregamento dos ícones, as regras CSP e o plano de atualização do tema, esse é exatamente o tipo de correção simples e de baixo risco de que gostamos. Isso transforma a questão «por que é que os ícones do checkout desapareceram?» em «temosum recurso versionado e um registo».

Perguntas frequentes (IcoFont)

Como utilizar o IcoFont num site WordPress sem que os ícones desapareçam?

Hospede o IcoFont no seu próprio servidor, coloque a folha de estilo na fila uma única vez (em vez de espalhar tags) e mantenha os nomes das classes consistentes em todos os modelos. Controle as versões da sua fila para evitar que CSS antigo armazenado em cache aponte para nomes de ficheiros de fonte desatualizados. Esteja também atento a conflitos entre plugins e temas que possam substituir os estilos da fonte de ícones.

Que ficheiros preciso para utilizar o IcoFont (e quais são os formatos de fonte compatíveis)?

A maioria dos downloads inclui um ficheiro icofont.css, uma pasta fonts/ e uma lista HTML de demonstração com os nomes das classes. Para produção, o formato .woff2 é normalmente a melhor opção por predefinição, como .woff como alternativa. Certifique-se de que os caminhos das fontes no CSS (geralmente ../fonts/) correspondem à sua estrutura de pastas.

Como posso inserir um ícone IcoFont em HTML e controlar o tamanho e a cor?

Adicione um elemento com a classe «icon», como:. Controle o tamanho com «font-size», a cor com «color» e o espaçamento com «margin». Uma classe utilitária reutilizável (por exemplo, .icon) combinada com «line-height: 1» ajuda a evitar o desalinhamento vertical nos botões.

Por que é que os meus ícones IcoFont aparecem como caixas vazias ou não carregam?

Normalmente, o ficheiro da fonte não foi carregado. Verifique a secção «Rede» das Ferramentas do Desenvolvedor: as fontes devem apresentar o código de estado 200, e não 404. Verifique os caminhos CSS para a pasta das fontes, confirme se os tipos MIME estão corretos (woff2 como font/woff2, woff comofont/woff) e verifique a configuração CORS se as fontes forem fornecidas a partir de um domínio diferente.

Como utilizar o IcoFont de forma acessível com leitores de ecrã?

Trate os ícones como componentes da interface do utilizador. Se um ícone for meramente decorativo, adicionearia-hidden=”true“ para que permaneça inativo. Se tiver um significado (como um botão de pesquisa que consiste apenas num ícone), forneça um equivalente textual através de texto visível ou de um atributo aria-label no botão/ligação. Isto evita anúncios confusos nos fluxos de navegação e de finalização de compra.

O IcoFont é melhor do que os ícones SVG em termos de desempenho e trabalho com a interface do utilizador?

Depende. O IcoFont pode ser eficiente porque um único ficheiro de fonte armazenado em cache pode abranger muitos ícones monocromáticos e é fácil de redimensionar com CSS. O SVG é geralmente mais adequado para ícones multicoloridos, controlo preciso de cada ícone e padrões de acessibilidade mais claros. Muitos sites utilizam fontes de ícones para elementos da interface do utilizador e SVG para ícones complexos.