--- title: "Como corrigir ícones do Font Awesome que não aparecem no Elementor" url: https://full.services/wp-fixer/corrigir-font-awesome-elementor/ date: 2026-06-17 author: "Clayton Margiotti" --- # Como corrigir ícones do Font Awesome que não aparecem no Elementor ## 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 Erros relacionados - [Como corrigir fontes do Google que não carregam no Elementor](https://full.services/wp-fixer/corrigir-google-fonts-elementor/) - [Como corrigir CSS do Elementor que não aplica no frontend](https://full.services/wp-fixer/corrigir-elementor-css-nao-aplica/) - [Como corrigir o erro de CORS de fontes no Elementor](https://full.services/wp-fixer/corrigir-cors-fontes-elementor/) --- ## Metadados Estruturados (Schema.org) ```json-ld { "@context": "https://schema.org", "@graph": [ { "@type": "Organization", "@id": "https://full.services/#org", "name": "FULL Services", "url": "https://full.services/", "sameAs": [ "https://www.instagram.com/fullservicesbr", "https://www.facebook.com/fullservices.br", "https://www.linkedin.com/company/fullservicesbr/" ], "knowsAbout": [ "WordPress", "WordPress Hosting", "Web Development", "Performance Optimization", "WordPress Security", "SEO para WordPress" ], "award": [ "Gold Medal - The WP Weekly Awards 2023", "Gold Medal - The WP Weekly Awards 2024" ], "logo": { "@type": "ImageObject", "url": "https://full.services/wp-content/uploads/full-services-logo.png", "width": 200, "height": 60 }, "hasCredential": { "@type": "EducationalOccupationalCredential", "credentialCategory": "certification", "name": "CVE Numbering Authority (CNA)", "description": "Autoridade de numeração de vulnerabilidades (CVE) para o ecossistema WordPress, autorizada a atribuir IDs CVE. Válida desde 2022-05-03, com abrangência global.", "url": "https://www.cve.org/PartnerInformation/ListofPartners/partner/FULL", "recognizedBy": { "@type": "Organization", "name": "CISA — Cybersecurity and Infrastructure Security Agency", "url": "https://www.cisa.gov/", "sameAs": "https://www.cisa.gov/" } } }, { "@type": "TechArticle", "@id": "https://full.services/wp-fixer/corrigir-font-awesome-elementor/#article", "headline": "Como corrigir ícones do Font Awesome que não aparecem no Elementor", "url": "https://full.services/wp-fixer/corrigir-font-awesome-elementor/", "inLanguage": "pt-BR", "datePublished": "2026-06-17T12:39:07-03:00", "dateModified": "2026-06-17T12:39:07-03:00", "author": { "@id": "https://full.services/#org" }, "publisher": { "@id": "https://full.services/#org" }, "isAccessibleForFree": false, "about": [ { "@type": "Thing", "@id": "https://www.wikidata.org/wiki/Q13166", "name": "WordPress", "sameAs": "https://www.wikidata.org/wiki/Q13166", "url": "https://wordpress.org/" }, { "@type": "Thing", "name": "Page Builders" } ], "mentions": { "@type": "Thing", "@id": "https://www.wikidata.org/wiki/Q13166", "name": "WordPress", "sameAs": "https://www.wikidata.org/wiki/Q13166", "url": "https://wordpress.org/" }, "mainEntityOfPage": { "@type": "WebPage", "@id": "https://full.services/wp-fixer/corrigir-font-awesome-elementor/" }, "wordCount": 756, "description": "Í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.", "articleSection": "Page Builders", "keywords": "elementor mostra quadrado no lugar do icone, font awesome nao carrega wordpress, icones font awesome nao aparecem elementor, load font awesome 4 support elementor, regenerar css elementor icones", "proficiencyLevel": "Intermediate", "citation": { "@type": "CreativeWork", "url": "https://elementor.com/help/", "name": "Elementor — Help Center (Icons)" }, "mainEntity": { "@type": "SoftwareSourceCode", "name": "Como corrigir ícones do Font Awesome que não aparecem no Elementor", "programmingLanguage": "PHP", "codeRepository": "https://full.services/wp-fixer/corrigir-font-awesome-elementor/", "isAccessibleForFree": false } }, { "@type": "FAQPage", "@id": "https://full.services/wp-fixer/corrigir-font-awesome-elementor/#faq", "isPartOf": { "@id": "https://full.services/wp-fixer/corrigir-font-awesome-elementor/#article" }, "isAccessibleForFree": true, "mainEntity": [ { "@type": "Question", "@id": "https://full.services/wp-fixer/corrigir-font-awesome-elementor/#faq-q1", "name": "Por que o ícone aparece no editor do Elementor mas some no frontend?", "inLanguage": "pt-BR", "acceptedAnswer": { "@type": "Answer", "text": "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.", "author": { "@id": "https://full.services/#org" } } }, { "@type": "Question", "@id": "https://full.services/wp-fixer/corrigir-font-awesome-elementor/#faq-q2", "name": "O que é o suporte ao Font Awesome 4 no Elementor?", "inLanguage": "pt-BR", "acceptedAnswer": { "@type": "Answer", "text": "É 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.", "author": { "@id": "https://full.services/#org" } } }, { "@type": "Question", "@id": "https://full.services/wp-fixer/corrigir-font-awesome-elementor/#faq-q3", "name": "O quadrado vazio no lugar do ícone significa o quê?", "inLanguage": "pt-BR", "acceptedAnswer": { "@type": "Answer", "text": "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.", "author": { "@id": "https://full.services/#org" } } }, { "@type": "Question", "@id": "https://full.services/wp-fixer/corrigir-font-awesome-elementor/#faq-q4", "name": "Um plugin de cache pode fazer os ícones do Font Awesome sumirem?", "inLanguage": "pt-BR", "acceptedAnswer": { "@type": "Answer", "text": "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.", "author": { "@id": "https://full.services/#org" } } }, { "@type": "Question", "@id": "https://full.services/wp-fixer/corrigir-font-awesome-elementor/#faq-q5", "name": "Preciso desligar os ícones de fonte em linha (SVG) do Elementor?", "inLanguage": "pt-BR", "acceptedAnswer": { "@type": "Answer", "text": "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.", "author": { "@id": "https://full.services/#org" } } }, { "@type": "Question", "@id": "https://full.services/wp-fixer/corrigir-font-awesome-elementor/#faq-q6", "name": "Como sei se o problema é conflito com outro plugin de Font Awesome?", "inLanguage": "pt-BR", "acceptedAnswer": { "@type": "Answer", "text": "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.", "author": { "@id": "https://full.services/#org" } } }, { "@type": "Question", "@id": "https://full.services/wp-fixer/corrigir-font-awesome-elementor/#faq-q7", "name": "Atualizei o Elementor e só os ícones antigos sumiram, e agora?", "inLanguage": "pt-BR", "acceptedAnswer": { "@type": "Answer", "text": "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.", "author": { "@id": "https://full.services/#org" } } }, { "@type": "Question", "@id": "https://full.services/wp-fixer/corrigir-font-awesome-elementor/#faq-q8", "name": "Onde ficam os arquivos de fonte do Font Awesome do Elementor?", "inLanguage": "pt-BR", "acceptedAnswer": { "@type": "Answer", "text": "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.", "author": { "@id": "https://full.services/#org" } } } ] } ] } ```