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.

O que é ícones do Font Awesome que não aparecem no Elementor?

Quando o Font Awesome do Elementor não aparece, os ícones inseridos pelo widget Ícone, pela Lista de Ícones ou pelos botões somem da página e no lugar surge um quadrado vazio, um retângulo com um código ou simplesmente um espaço em branco. O problema é de carregamento de assets, não do conteúdo: o ícone continua salvo no widget, mas a folha de fontes que o desenha (a biblioteca Font Awesome que o Elementor enfileira) não chega ao navegador no momento da renderização.

Como identificar

No lugar do ícone aparece um quadrado vazio ou um retângulo com um código hexadecimal, sinal clássico de que a fonte de ícones não carregou
O ícone aparece normalmente dentro do editor do Elementor, mas some quando você visualiza a página publicada no frontend
O console do navegador mostra a mensagem ‘Failed to decode downloaded font’ ou erro 404 ao buscar arquivos com extensão woff, woff2 ou ttf na pasta de fontes do Font Awesome
Ícones antigos feitos com classes do Font Awesome 4 somem depois de uma atualização do Elementor, enquanto ícones novos funcionam
Todos os ícones somem ao mesmo tempo logo após instalar ou ativar um plugin de cache ou de otimização de assets

Como prevenir

Antes de atualizar o Elementor em produção, teste em homologação para flagrar ícones do Font Awesome 4 que dependem do suporte legado
Mantenha uma única fonte de Font Awesome no site: deixe o tema ou outro plugin de carregar a sua própria versão para evitar conflito de CSS
Ao instalar um plugin de cache, já adicione os handles do Font Awesome do Elementor às exclusões de minificação e concatenação
Depois de qualquer migração ou troca de domínio, regenere o CSS e os dados do Elementor para reescrever os caminhos das fontes

Causa

O experimento Inline Font Icons (Ícones de fonte em linha) está ligado em Elementor -> Configurações -> Recursos, fazendo o Elementor renderizar os ícones como SVG inline; ícones criados antes da mudança continuam apontando para a fonte Font Awesome que deixou de ser enfileirada.
O ícone foi salvo com uma classe do Font Awesome 4 (prefixo fa fa-nome) e o suporte legado está desligado, então o Elementor 3.x carrega só o Font Awesome 5 e a classe antiga não corresponde a nenhum glifo.
Um plugin de cache ou de minificação concatenou ou removeu o CSS do Font Awesome do frontend, ou serve uma versão antiga do cache em que a folha de ícones ainda não existia.
Os arquivos de fonte (woff2, woff, ttf) da pasta wp-content/uploads/elementor/css ou do plugin retornam 404 por permissão de pasta incorreta ou por terem sido bloqueados por uma regra do servidor.
Outro plugin ou o tema também enfileira o próprio Font Awesome em uma versão diferente, e o conflito de CSS sobrescreve a classe de ícone que o Elementor espera.

Como resolver

Regenerar o CSS e os dados do Elementor: Force o Elementor a reconstruir os arquivos de CSS e a reenfileirar a biblioteca de ícones; isso resolve a maioria dos casos em que o ícone existe no editor mas some no frontend. Acesse o menu indicado, clique em Regenerar arquivos e dados e atualize a página publicada com o cache do navegador limpo.
```
Elementor -> Ferramentas -> Geral -> Regenerar arquivos e dados
Elementor -> Ferramentas -> Geral -> Sincronizar biblioteca
```
Ativar o suporte ao Font Awesome 4: Se os ícones que somem são antigos e usam classes do Font Awesome 4, ligue o experimento de compatibilidade legada para o Elementor voltar a carregar o shim do Font Awesome 4 junto com o 5. Depois de salvar, regenere o CSS de novo.
```
Elementor -> Configurações -> Recursos -> Load Font Awesome 4 Support: Ativo
Elementor -> Configurações -> Recursos -> Inline Font Icons (SVG): Inativo
```
Limpar o cache e excluir a folha de ícones da otimização: Limpe todas as camadas de cache (plugin, servidor e CDN) e impeça que o otimizador concatene ou adie a folha do Font Awesome. Adicione o handle e os caminhos de fonte às exclusões do seu plugin de cache.
```
elementor-icons-fa-solid
elementor-icons-fa-regular
elementor-icons-fa-brands
wp-content/plugins/elementor/assets/lib/font-awesome/
```
Confirmar que os arquivos de fonte carregam sem 404: Abra a aba Rede do navegador, recarregue a página e verifique se os arquivos de fonte respondem com status 200. Se algum retornar 403 ou 404, ajuste a permissão da pasta de fontes para que o servidor consiga lê-la.
```
chmod 0755 wp-content/plugins/elementor/assets/lib/font-awesome/webfonts
```

PHP

// Force o frontend a carregar o Font Awesome do Elementor (cole no functions.php do tema filho)
add_action( 'elementor/frontend/after_enqueue_styles', function () {
    wp_enqueue_style( 'elementor-icons-fa-solid' );
    wp_enqueue_style( 'elementor-icons-fa-regular' );
    wp_enqueue_style( 'elementor-icons-fa-brands' );
}, 20 );

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.

Atenção

Como corrigir pop-ups que não aparecem no Elementor

Quando o popup do Elementor não aparece, a janela criada no Popup Builder nunca abre no site publicado. As causas comuns são falta de Condicao de exibicao em Publicar, Gatilho ausente sem link de disparo, o cookie de frequencia já gravado, ou o cache minificando o script do popup.

Grave

Como corrigir o erro de licença ao ativar o Elementor Pro

O erro de licença do Elementor Pro impede a ativação dos recursos pagos quando a chave não conecta ao servidor da Elementor, o limite de sites do plano foi atingido ou a licença ainda consta ativa em outro domínio.

Grave

Como corrigir o JetWooBuilder que não edita templates de produto

O JetWooBuilder não aplica o template de produto quando a opção Enable custom product single page não foi marcada em WooCommerce, Settings, JetWooBuilder, quando os widgets de Single Product estão desativados, ou quando o template está salvo como rascunho. Sem isso a loja mantém o layout padrão do tema.

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.

Grave

Como corrigir erros de exibição de produtos do WooCommerce no Elementor

Os produtos do Elementor com WooCommerce não aparecem quando o widget de Produtos carrega vazio ou a página de produto fica sem conteúdo. As causas comuns são o Source do widget apontando para uma consulta sem itens, o template do Theme Builder publicado sem condição de exibição, ou o CSS do Elementor desatualizado.

Atenção

Como corrigir o Sticky Header que não funciona no Safari no Astra Pro

O Astra sticky header não funciona no Safari quando o módulo Sticky Header do Astra Pro não está ativo para o dispositivo, quando um ancestral do cabeçalho usa overflow ou transform que invalida o position sticky no WebKit, ou quando CSS e cache antigos do tema continuam sendo servidos ao navegador da Apple.

Setores

Extensões

Integrações

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

O que é ícones do Font Awesome que não aparecem no Elementor?

Como identificar

Como prevenir

Causa

Como resolver

Perguntas frequentes

Itens relacionados

Como corrigir pop-ups que não aparecem no Elementor

Como corrigir o erro de licença ao ativar o Elementor Pro

Como corrigir o JetWooBuilder que não edita templates de produto

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

Como corrigir erros de exibição de produtos do WooCommerce no Elementor

Como corrigir o Sticky Header que não funciona no Safari no Astra Pro

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