Font Awesome Elementor: ícones não aparecem? Corrija

Tipo Page Builders

Nome do erro Ícones Font Awesome não aparecem no Elementor EN: Font Awesome icons not showing in Elementor

Severidade Atenção

Descrição Ícones do Font Awesome somem no Elementor quando a biblioteca de ícones não é carregada no frontend, quando a classe usada é do Font Awesome 4 sem o suporte ativo, ou quando o CSS de ícones está em cache desatualizado.

Conteúdo exclusivo para membros Pro

Faça upgrade para acessar este item completo.

// ★ Conteúdo disponível para membros Pro...
// Faça upgrade para acessar este item.

Perguntas frequentes

Por que o ícone aparece no editor do Elementor mas some no frontend?

Porque o editor sempre carrega a biblioteca completa de ícones, enquanto o frontend só enfileira o que o Elementor acha necessário. Quando o CSS está desatualizado ou foi removido pelo cache, a fonte não chega à página publicada. Regenerar arquivos e dados em Elementor -> Ferramentas costuma resolver.

O que é o suporte ao Font Awesome 4 no Elementor?

É um experimento em Elementor -> Configurações -> Recursos que recarrega o shim do Font Awesome 4 junto com o Font Awesome 5. Ícones antigos salvos com classes do tipo fa fa-nome dependem dele; sem o suporte ativo, essas classes não correspondem a nenhum glifo no Font Awesome 5 e o ícone some.

O quadrado vazio no lugar do ícone significa o quê?

Significa que o navegador recebeu a classe do ícone, mas não conseguiu baixar ou decodificar o arquivo de fonte que desenha o glifo. Na prática é sempre falha de carregamento da fonte: arquivo com 404, fonte bloqueada por permissão de pasta, ou folha de estilo removida pelo cache.

Um plugin de cache pode fazer os ícones do Font Awesome sumirem?

Sim. Plugins de cache que minificam ou concatenam CSS podem quebrar ou remover a folha do Font Awesome, e o adiamento de fontes pode impedir o carregamento no momento certo. A correção é excluir os handles e a pasta de fontes do Elementor das regras de otimização e limpar o cache.

Preciso desligar os ícones de fonte em linha (SVG) do Elementor?

Só se ele estiver causando o sumiço. O Inline Font Icons converte ícones em SVG e dispensa a fonte, mas ícones criados antes de ligar o recurso ainda apontam para a fonte. Desligar o experimento e regenerar o CSS faz o Elementor voltar a enfileirar o Font Awesome para todos os ícones.

Como sei se o problema é conflito com outro plugin de Font Awesome?

Verifique no código-fonte da página se há mais de uma folha de Font Awesome carregada, de origens diferentes. Se houver, desative os plugins um a um até o ícone voltar. O ideal é deixar apenas uma versão do Font Awesome ativa no site para não sobrescrever as classes que o Elementor usa.

Atualizei o Elementor e só os ícones antigos sumiram, e agora?

Isso indica que esses ícones usam classes do Font Awesome 4. Ligue o experimento Load Font Awesome 4 Support em Elementor -> Configurações -> Recursos, salve, e regenere arquivos e dados. Os ícones novos continuam no Font Awesome 5 e os antigos voltam pelo shim.

Onde ficam os arquivos de fonte do Font Awesome do Elementor?

Eles ficam dentro do plugin, na pasta de assets do Font Awesome, e o CSS gerado pode referenciá-los a partir da pasta de uploads do Elementor. Se esses arquivos retornarem 403 ou 404, ajuste a permissão da pasta para 0755 e confirme na aba Rede do navegador que respondem com status 200.

Pro Grave

Como corrigir widgets do Essential Addons quebrados pelo cache do WP Rocket

Widgets do Essential Addons param de renderizar no frontend quando o WP Rocket remove o CSS dinamico do plugin pelo Remove Unused CSS e segura o eael-general.js pelo Delay JavaScript Execution. A correção e adicionar os caminhos do eael ao Safelist de CSS, excluir o script do Delay e limpar o cache.

Pro Grave

Como corrigir o Flexible Content que não salva layouts no ACF PRO

O Flexible Content que não salva no ACF PRO acontece quando os layouts e seus subcampos viram tantos campos no formulário que o POST ultrapassa o limite max_input_vars do PHP: o WordPress descarta o excedente, o nonce ou os dados não chegam e a atualização do post perde os layouts. A correção é elevar max_input_vars para 10000.

Pro Grave

Como corrigir o JetFormBuilder que não envia formulários

Quando o JetFormBuilder não envia o formulário, o problema quase sempre está na ação Send Email ausente, no Submit Type errado, num captcha mal configurado ou no envio de e-mail do WordPress sem SMTP. Cada causa tem um sintoma distinto.

Pro Grave

Como corrigir o erro de jQuery entre Elementor, Crocoblock e addons

O erro de jQuery entre Elementor e Crocoblock aparece quando dois scripts carregam versões diferentes de jQuery ou quando o jQuery e adiado, e o console mostra 'jQuery is not defined' ou '$ is not a function'. Os widgets dinamicos do JetEngine, os filtros do JetSmartFilters e os popups do JetPopup param de funcionar.

Pro Atenção

Como corrigir o erro de CSS no Customizer do Astra Pro

O Astra Customizer CSS não aplica quando o código de Personalizar -> CSS Adicional não surte efeito no site, porque o cache serve o head antigo, a regra perde para a especificidade do CSS dinamico do Astra Pro, ou o CSS ficou preso a outro tema. A correção limpa o cache, sobe a especificidade do seletor e confirma o tema ativo.

Pro Grave

Como corrigir o Theme Builder do Elementor que não aplica em todas as páginas

O Theme Builder não aplica em todas as páginas quando o template foi salvo como rascunho, ficou sem condicao de exibicao, ou perde para outro template do mesmo tipo com condicao mais específica. O ajuste e definir Include corretamente e revisar a especificidade entre templates concorrentes.

Setores

Extensões

Integrações

Como corrigir ícones do Font Awesome que não aparecem no Elementor

Conteúdo exclusivo para membros Pro

Perguntas frequentes

Itens relacionados

Como corrigir widgets do Essential Addons quebrados pelo cache do WP Rocket

Como corrigir o Flexible Content que não salva layouts no ACF PRO

Como corrigir o JetFormBuilder que não envia formulários

Como corrigir o erro de jQuery entre Elementor, Crocoblock e addons

Como corrigir o erro de CSS no Customizer do Astra Pro

Como corrigir o Theme Builder do Elementor que não aplica em todas as páginas

Setores

Extensões

Integrações

Extensões

Hero Sections

Seções de CTA

Login

Blog

Cabeçalhos

Seções de FAQ

Cadastro

Blog individual

Rodapés

Seções de contato

Seções de preços

Faixas

Portfólio

Seções de equipe

Números

Logotipos