--- title: "Bibliotecas de ícones para Elementor: As 7 opções essenciais" description: "Escolher as bibliotecas de ícones para Elementor certas decide o peso visual e a velocidade da página antes mesmo de você desenhar a primeira seção." url: https://full.services/bibliotecas-de-icones-para-elementor/ date: 2026-06-28 author: "Clayton Margiotti" --- --- # Bibliotecas de ícones para Elementor: As 7 opções essenciais As **bibliotecas de ícones para Elementor** vão muito além do Font Awesome nativo: dá para somar SVG, IcoMoon e Fontello sem plugin pesado. Segundo o [BuiltWith Trends](https://trends.builtwith.com/widgets/Font-Awesome) (2026), o Font Awesome roda em mais de 5 milhões de sites. O SVG inline pesa cerca de 2 KB por ícone, contra fontes de 70 KB. Escolha a fonte certa antes de instalar. Escolher as bibliotecas de ícones para Elementor certas decide o peso visual e a velocidade da página antes mesmo de você desenhar a primeira seção. A gente vê no suporte da FULL que muita gente instala três plugins de ícone sobrepostos só para usar um único símbolo, e o site fica lento sem necessidade. Este tutorial mostra quais bibliotecas valem a pena, como subir um set custom no Elementor Pro e quando o SVG vence a fonte de ícone. Para o panorama completo do construtor, vale conferir o [guia Domine o Elementor](https://full.services/guias/domine-o-elementor/) e os [conteúdos de Elementor da FULL](https://full.services/elementor/). --- ## Primeiros passos: As principais bibliotecas de ícones para Elementor O Elementor já chega com o Font Awesome embutido, com mais de 2.000 ícones gratuitos divididos em três estilos (solid, regular e brands). Essa é a base que cobre 80% dos projetos sem instalar nada. Para o resto, você soma bibliotecas externas: IcoMoon e Fontello geram fontes custom, e o SVG entra ícone a ícone. Conhecer cada uma evita o erro de empilhar plugins. A tabela abaixo resume as bibliotecas de ícones para Elementor mais usadas, o que cada uma entrega e quando ela faz sentido no seu fluxo. A regra prática que a gente repete no suporte é simples: comece pelo nativo, e só adicione uma fonte externa quando o ícone que você precisa não existir no Font Awesome padrão. Cada camada extra cobra um custo em requisição e em peso, então a escolha consciente rende mais que instalar tudo de uma vez.
Bibliotecas de ícones para Elementor: tipo, custo e quando usar
Biblioteca Tipo e custo Quando usar
Font AwesomeFonte de ícone, nativo grátisBase padrão, cobre a maioria dos projetos
IcoMoonFonte custom, plano grátisMontar set enxuto só com os ícones usados
FontelloFonte custom, grátis e abertoMisturar ícones de várias fontes em um pacote
SVG inlineArquivo vetorial, grátisÍcone único, leve e colorido por CSS
## Por que o font awesome nativo resolve a maioria dos casos Entre as bibliotecas de ícones para Elementor, o Font Awesome nativo resolve a maioria dos projetos porque entrega mais de 2.000 ícones gratuitos já indexados na busca do widget de Ícone do Elementor, sem requisição extra nem upload. Você abre o seletor, digita "carrinho" ou "telefone", e o símbolo aparece pronto para estilizar por cor, tamanho e rotação direto no painel. A vantagem técnica é que o Elementor carrega o Font Awesome de forma controlada e, nas versões recentes, permite ligar os SVGs inline para servir só os ícones em uso, em vez da fonte inteira. A gente vê no suporte da FULL que a maioria dos tickets de ícone se resolve sem nenhuma biblioteca externa: o usuário não sabia que o nativo cobria aquele símbolo. Antes de instalar qualquer plugin novo, vale gastar dois minutos buscando no Font Awesome, porque cada fonte adicional acrescenta uma requisição que pesa no [Core Web Vitals](https://full.services/glossario/core-web-vitals/) do site. ## Como subir bibliotecas de ícones para Elementor com sets custom Subir um set custom de bibliotecas de ícones para Elementor exige o Elementor Pro e leva menos de 5 minutos, usando o recurso Custom Icons. Você gera um pacote em ferramentas como IcoMoon ou Fontello, exporta o arquivo ZIP no formato que o Elementor aceita, e faz o upload no painel. O ícone custom passa a aparecer no mesmo seletor do Font Awesome. O caminho oficial é Elementor > Custom Icons no menu do WordPress, um recurso exclusivo da versão paga, conforme a [documentação de Custom Icons do Elementor](https://elementor.com/help/custom-icons/), mantida pela própria equipe do produto. A vantagem de gerar um set enxuto é direta: em vez de carregar 2.000 ícones, você sobe só os 20 que o projeto usa, e a fonte resultante pesa poucos KB. Os passos abaixo cobrem o fluxo do ZIP ao ícone disponível no editor. ### Passo 1: Gere o pacote de ícones no IcoMoon ou fontello Acesse o IcoMoon ou o Fontello, selecione apenas os ícones que o projeto realmente usa e clique em gerar a fonte. Essas ferramentas montam um pacote enxuto com só os símbolos marcados, o que mantém o arquivo final leve. Baixe o ZIP gerado, que já vem com a fonte e o mapeamento de cada glifo. ### Passo 2: Faça o upload em Elementor > custom icons No painel do WordPress, abra o menu Elementor e clique em Custom Icons, recurso disponível no Elementor Pro. Use o botão de adicionar novo e envie o ZIP gerado no passo anterior. O Elementor lê o pacote, registra o set e o nomeia conforme você definiu, sem precisar editar nenhum código no tema. ### Passo 3: Aplique o ícone custom no widget de ícone Edite qualquer página com o Elementor, arraste o widget de Ícone e abra a biblioteca pelo seletor. O set custom aparece como uma aba separada, ao lado do Font Awesome nativo. Escolha o ícone, ajuste cor e tamanho pelo painel, e publique. O símbolo custom passa a se comportar igual a qualquer ícone padrão do construtor. ## SVG ou fonte de ícone: O que pesa menos na página Ao montar bibliotecas de ícones para Elementor, a escolha entre SVG e fonte de ícone muda o peso da página de forma mensurável: um SVG inline ocupa cerca de 2 KB por símbolo, enquanto uma fonte completa como o Font Awesome pode passar de 70 KB mesmo quando você usa um único ícone. Para sites com poucos ícones, o SVG vence com folga no orçamento de bytes. O SVG inline ainda permite colorir e animar cada ícone por CSS, coisa que a fonte de ícone faz de forma limitada. A contrapartida honesta é que o Elementor exige liberar o upload de SVG por segurança, já que o formato pode carregar script malicioso, então a régua precisa de cuidado. Para projetos com dezenas de ícones repetidos, a fonte custom enxuta do IcoMoon ainda compensa, porque centraliza tudo em um arquivo cacheável. Quem busca página leve combina essa decisão com as práticas de [otimizar a velocidade do Elementor](https://full.services/otimizar-a-velocidade-do-elementor/) e o uso correto do [container Flexbox](https://full.services/flexbox-container-no-elementor/) para reduzir o DOM. ## Bibliotecas de ícones no plano FULL: O Elementor pro sem licença avulsa Manter o Elementor Pro em vários sites pesa quando você paga licença avulsa por instalação, e é aí que o plano FULL muda a conta dos sets custom de ícone. No bundle da FULL você ativa o Elementor Pro e outros 15 plugins premium a partir de R$849 no plano PRO, com custo de R$85 por site, em vez de comprar cada licença separada. A gente vê no suporte que agência com 10 ou mais sites economiza por não renovar dezenas de chaves todo ano. O argumento de R$85 por site vale quando você gerencia mais de um WordPress: o mesmo plano que libera o recurso Custom Icons do Elementor Pro também entrega Happy Addons, Essential Addons e o restante do pacote, sem licença solta. Ative o bundle completo em [FULL.services/planos](https://full.services/planos) e veja a página da solução em [Elementor Pro](https://full.services/solucoes/elementor-pro) para entender o que muda na versão paga. ## Addons que ampliam as bibliotecas de ícones para Elementor Os addons de terceiros ampliam as bibliotecas de ícones para Elementor sem você gerar fonte custom, e três deles concentram o uso no mercado: Happy Addons, Essential Addons e Ultimate Addons. Cada um adiciona widgets com ícone embutido e, em alguns casos, packs próprios que somam centenas de símbolos prontos ao seletor padrão do Elementor. Vale escolher o addon pelo que o projeto pede, não por empilhar todos. O Happy Addons traz um pack de ícones próprio e widgets de lista visual; o Essential Addons foca em blocos de conteúdo com ícone; o Ultimate Addons cobre seções inteiras com símbolos integrados. A gente vê no suporte que instalar os três ao mesmo tempo só para usar um widget de cada gera conflito de CSS e peso desnecessário. Compare antes de decidir com os reviews de [Happy Addons para Elementor](https://full.services/happy-addons-elementor/), [Essential Addons](https://full.services/essential-addons-elementor/) e a lista dos [melhores addons para Elementor](https://full.services/melhores-addons-elementor/) para acertar a escolha de primeira. ## Perguntas frequentes sobre bibliotecas de ícones para Elementor
É possível usar ícones custom no Elementor sem instalar plugin extra?

Sim, mas com limite. O Elementor gratuito só usa o Font Awesome nativo, com mais de 2.000 ícones, e não permite subir set próprio. Para fazer upload de ícone custom via IcoMoon ou Fontello, você precisa do recurso Custom Icons, exclusivo do Elementor Pro. Sem o Pro, a alternativa é inserir cada SVG manualmente, que funciona, mas dá mais trabalho que o seletor de ícone integrado.

Por que adicionar muitas bibliotecas de ícones para Elementor deixa o site lento?

Cada fonte de ícone carrega um arquivo próprio, que pode passar de 70 KB, e cada plugin de addon soma CSS e requisições. Empilhar várias bibliotecas de ícones para Elementor só para usar um símbolo de cada multiplica o peso sem ganho real. No suporte da FULL, a maioria dos sites lentos por ícone tinha fontes duplicadas. A regra é usar o Font Awesome nativo como base e só somar uma fonte externa quando o ícone não existir nele.

Qual formato de arquivo o Elementor aceita para subir ícones custom?

O Elementor Pro aceita pacotes de fonte de ícone gerados em ferramentas como IcoMoon e Fontello, exportados em ZIP, além de arquivos SVG individuais. O fluxo recomendado é montar um set enxuto na ferramenta, baixar o ZIP e enviá-lo em Elementor > Custom Icons. Para um ícone único, o SVG inline pesa cerca de 2 KB e ainda aceita estilo por CSS, sendo mais leve que carregar uma fonte inteira.

O Font Awesome do Elementor é suficiente para um site profissional?

Na maioria dos casos, sim. O Font Awesome nativo cobre mais de 2.000 ícones em três estilos e atende cerca de 80% dos projetos sem nenhum upload. A biblioteca externa só compensa quando a identidade visual exige um símbolo específico que não existe no pacote padrão. Para um site institucional comum, começar e terminar no Font Awesome nativo entrega resultado profissional sem peso extra de plugin.

Como escolher entre SVG e fonte de ícone no Elementor?

Escolha pelo volume de ícones. Para poucos símbolos, o SVG inline vence: pesa cerca de 2 KB cada e aceita cor e animação por CSS. Para dezenas de ícones repetidos no site, a fonte custom enxuta do IcoMoon centraliza tudo em um arquivo cacheável e rende melhor. Evite carregar a fonte completa do Font Awesome quando usa só dois ou três ícones, porque ela traz peso que o SVG dispensa.

## Próximos passos para ícones leves no Elementor Montar boas bibliotecas de ícones para Elementor é mais sobre escolher menos do que instalar mais: comece pelo Font Awesome nativo, suba um set custom enxuto via IcoMoon ou Fontello só quando faltar um símbolo, e prefira SVG inline para ícones únicos. O erro que mais pesa é empilhar três plugins de ícone para usar um de cada, o que duplica fontes e atrasa a página. Lembre que o SVG ocupa cerca de 2 KB contra mais de 70 KB de uma fonte completa, então a decisão de formato impacta a velocidade real. Para continuar, o [tutorial de Elementor para iniciantes](https://full.services/elementor-tutorial-iniciantes/) aprofunda o construtor, e o [FULL Academy](https://full.services/academy/) reúne os tutoriais em um só lugar.

Legenda: o set custom aparece como aba separada no mesmo seletor do Font Awesome, sem editar código do tema.

--- ## Metadados Estruturados (Schema.org) ```json-ld { "@context": "https://schema.org", "@graph": [ { "@type": "TechArticle", "@id": "https://full.services/bibliotecas-de-icones-para-elementor/#article", "headline": "Bibliotecas de ícones para Elementor: As 7 opções essenciais", "description": "Escolher as bibliotecas de ícones para Elementor certas decide o peso visual e a velocidade da página antes mesmo de você desenhar a primeira seção.", "url": "https://full.services/bibliotecas-de-icones-para-elementor/", "datePublished": "2026-06-28T09:00:00-03:00", "dateModified": "2026-06-28T09:00:00-03:00", "inLanguage": "pt-BR", "articleSection": "Elementor", "keywords": [ "bibliotecas de icones para elementor", "Elementor", "WordPress Page Builders", "Web Design" ], "author": { "@id": "https://full.services/#person-clayton" }, "publisher": { "@id": "https://full.services/#org" }, "about": [ { "@type": "Thing", "name": "Elementor", "@id": "https://www.wikidata.org/wiki/Q96322879", "sameAs": "https://www.wikidata.org/wiki/Q96322879" }, { "@type": "Thing", "name": "WordPress Page Builders" }, { "@type": "Thing", "name": "Web Design" } ], "mentions": [ { "@type": "Organization", "name": "Elementor", "url": "https://elementor.com/", "@id": "https://www.wikidata.org/wiki/Q96322879", "sameAs": "https://www.wikidata.org/wiki/Q96322879" }, { "@type": "Organization", "name": "WordPress", "url": "https://wordpress.org/", "@id": "https://www.wikidata.org/wiki/Q13166", "sameAs": "https://www.wikidata.org/wiki/Q13166" } ], "mainEntityOfPage": { "@type": "WebPage", "@id": "https://full.services/bibliotecas-de-icones-para-elementor/" }, "wordCount": 2086, "citation": [ { "@type": "CreativeWork", "name": "Elementor Academy/Help", "url": "https://elementor.com/help/custom-icons/", "publisher": { "@type": "Organization", "name": "Elementor Academy/Help" } } ] }, { "@type": "FAQPage", "@id": "https://full.services/bibliotecas-de-icones-para-elementor/#faq", "isPartOf": { "@id": "https://full.services/bibliotecas-de-icones-para-elementor/#article" }, "mainEntity": [ { "@type": "Question", "@id": "https://full.services/bibliotecas-de-icones-para-elementor/#faq-q1", "name": "É possível usar ícones custom no Elementor sem instalar plugin extra?", "inLanguage": "pt-BR", "acceptedAnswer": { "@type": "Answer", "text": "Sim, mas com limite. O Elementor gratuito só usa o Font Awesome nativo, com mais de 2.000 ícones, e não permite subir set próprio. Para fazer upload de ícone custom via IcoMoon ou Fontello, você precisa do recurso Custom Icons, exclusivo do Elementor Pro. Sem o Pro, a alternativa é inserir cada SVG manualmente, que funciona, mas dá mais trabalho que o seletor de ícone integrado.", "author": { "@id": "https://full.services/#org" } } }, { "@type": "Question", "@id": "https://full.services/bibliotecas-de-icones-para-elementor/#faq-q2", "name": "Por que adicionar muitas bibliotecas de ícones para Elementor deixa o site lento?", "inLanguage": "pt-BR", "acceptedAnswer": { "@type": "Answer", "text": "Cada fonte de ícone carrega um arquivo próprio, que pode passar de 70 KB, e cada plugin de addon soma CSS e requisições. Empilhar várias bibliotecas de ícones para Elementor só para usar um símbolo de cada multiplica o peso sem ganho real. No suporte da FULL, a maioria dos sites lentos por ícone tinha fontes duplicadas. A regra é usar o Font Awesome nativo como base e só somar uma fonte externa quando o ícone não existir nele.", "author": { "@id": "https://full.services/#org" } } }, { "@type": "Question", "@id": "https://full.services/bibliotecas-de-icones-para-elementor/#faq-q3", "name": "Qual formato de arquivo o Elementor aceita para subir ícones custom?", "inLanguage": "pt-BR", "acceptedAnswer": { "@type": "Answer", "text": "O Elementor Pro aceita pacotes de fonte de ícone gerados em ferramentas como IcoMoon e Fontello, exportados em ZIP, além de arquivos SVG individuais. O fluxo recomendado é montar um set enxuto na ferramenta, baixar o ZIP e enviá-lo em Elementor > Custom Icons. Para um ícone único, o SVG inline pesa cerca de 2 KB e ainda aceita estilo por CSS, sendo mais leve que carregar uma fonte inteira.", "author": { "@id": "https://full.services/#org" } } }, { "@type": "Question", "@id": "https://full.services/bibliotecas-de-icones-para-elementor/#faq-q4", "name": "O Font Awesome do Elementor é suficiente para um site profissional?", "inLanguage": "pt-BR", "acceptedAnswer": { "@type": "Answer", "text": "Na maioria dos casos, sim. O Font Awesome nativo cobre mais de 2.000 ícones em três estilos e atende cerca de 80% dos projetos sem nenhum upload. A biblioteca externa só compensa quando a identidade visual exige um símbolo específico que não existe no pacote padrão. Para um site institucional comum, começar e terminar no Font Awesome nativo entrega resultado profissional sem peso extra de plugin.", "author": { "@id": "https://full.services/#org" } } }, { "@type": "Question", "@id": "https://full.services/bibliotecas-de-icones-para-elementor/#faq-q5", "name": "Como escolher entre SVG e fonte de ícone no Elementor?", "inLanguage": "pt-BR", "acceptedAnswer": { "@type": "Answer", "text": "Escolha pelo volume de ícones. Para poucos símbolos, o SVG inline vence: pesa cerca de 2 KB cada e aceita cor e animação por CSS. Para dezenas de ícones repetidos no site, a fonte custom enxuta do IcoMoon centraliza tudo em um arquivo cacheável e rende melhor. Evite carregar a fonte completa do Font Awesome quando usa só dois ou três ícones, porque ela traz peso que o SVG dispensa.", "author": { "@id": "https://full.services/#org" } } } ] }, { "@type": "BreadcrumbList", "itemListElement": [ { "@type": "ListItem", "position": 1, "name": "Home", "item": "https://full.services/" }, { "@type": "ListItem", "position": 2, "name": "Elementor", "item": "https://full.services/elementor/" }, { "@type": "ListItem", "position": 3, "name": "Bibliotecas de ícones para Elementor: As 7 opções essenciais", "item": "https://full.services/bibliotecas-de-icones-para-elementor/" } ] }, { "@type": "Organization", "@id": "https://full.services/#org", "name": "FULL Services", "url": "https://full.services", "logo": { "@type": "ImageObject", "url": "https://full.services/wp-content/uploads/full-services-logo.png", "width": 200, "height": 60 }, "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 (https://thewpweekly.com/awards-2023/)", "Gold Medal - The WP Weekly Awards 2024 (https://thewpweekly.com/awards-2024/)" ], "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. Certificação 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": "Person", "@id": "https://full.services/#person-clayton", "name": "Clayton Margiotti", "givenName": "Clayton", "familyName": "Margiotti", "jobTitle": "Fundador e CEO da FULL Services", "description": "Fundador e CEO da FULL Services, plataforma WordPress SaaS com 50 mil clientes e 150 mil sites conectados, e anchor do ecossistema Elevor Global. Em 2024 conduziu a FULL a se tornar a primeira e unica empresa brasileira aprovada como CVE Numbering Authority sob a CISA (DHS/EUA). Mais de 20 anos construindo empresas digitais, com 13+ reconhecimentos internacionais (Facebook, GPTW, ONU, RD Summit).", "url": "https://full.services/sobre-nos/", "image": "https://full.services/wp-content/uploads/2026/05/clayton-margiotti.jpg", "sameAs": [ "https://www.linkedin.com/in/cmargiotti/" ], "knowsAbout": [ "Artificial Intelligence", "Cybersecurity", "CVE Program", "WordPress Enterprise", "SaaS Platforms", "Digital Infrastructure", "Technology Entrepreneurship", "Company Building", "Business Leadership", "Digital Growth" ], "hasOccupation": { "@type": "Occupation", "name": "Fundador e CEO", "occupationalCategory": "11-1011.00" }, "knowsLanguage": [ { "@type": "Language", "name": "Portuguese", "alternateName": "pt-BR" }, { "@type": "Language", "name": "English", "alternateName": "en" } ], "memberOf": { "@type": "Organization", "name": "CVE Numbering Authorities", "url": "https://www.cve.org/", "sameAs": "https://www.cve.org/" }, "alumniOf": [ { "@type": "EducationalOrganization", "name": "Global Scaling Academy (Blitzscaling Program)", "url": "https://www.blitzscalingacademy.com" }, { "@type": "EducationalOrganization", "name": "Esade", "url": "https://www.esade.edu" }, { "@type": "EducationalOrganization", "name": "Business School Sao Paulo (BSP)", "url": "https://bsp.edu.br/" }, { "@type": "EducationalOrganization", "name": "Tera", "url": "https://somostera.com" }, { "@type": "EducationalOrganization", "name": "Le Wagon", "url": "https://www.lewagon.com" }, { "@type": "EducationalOrganization", "name": "FIAP", "url": "https://www.fiap.com.br" }, { "@type": "EducationalOrganization", "name": "PUCRS", "url": "https://online.pucrs.br/" } ], "award": [ "Digital Disruptor – Engaging Experiences Master (Globant, 2021)", "Maior ROI do e-commerce brasileiro – Letrissimas (Facebook, 2019)", "1º lugar – Melhores Empresas para Trabalhar no Brasil – Eleva Digital (Great Place to Work, 2018)", "Case global de educacao no Facebook – Metodo SUPERA (Facebook, 2017)", "Maquina de Geracao de Leads, Agencia do Ano (RD Summit / RD Station, 2015)", "Monthly Recurring Revenue, top performance (RD Summit / RD Station, 2015)", "Quality/Efficiency – Entrepreneurship Training (UNCTAD / PNUD-ONU, 2010)" ], "subjectOf": [ { "@type": "NewsArticle", "url": "https://www.globant.com/news/globant-reveals-inaugural-digital-disruptors-award-winners", "publisher": { "@type": "Organization", "name": "Globant" } }, { "@type": "NewsArticle", "url": "https://www.prnewswire.com/news-releases/letrissimas-com-e-destaque-do-e-commerce-brasileiro-com-maior-roi-de-2018-877517801.html", "publisher": { "@type": "Organization", "name": "PR Newswire" } }, { "@type": "NewsArticle", "url": "https://www.segs.com.br/seguros/102599-gestao-de-pessoas-garante-mais-lucro-as-empresas", "publisher": { "@type": "Organization", "name": "Segs" } }, { "@type": "NewsArticle", "url": "https://franquiaeducacional.com/negocios-inovadores-facebook-elege-supera-case-mundial-de-educacao", "publisher": { "@type": "Organization", "name": "Franquia Educacional" } }, { "@type": "NewsArticle", "url": "https://acontecendoaqui.com.br/marketing/resultados-digitais-divulga-vencedores-do-premio-agencias-de-resultados-2015-durante-o-rd", "publisher": { "@type": "Organization", "name": "Acontecendo Aqui" } } ], "worksFor": { "@type": "Organization", "@id": "https://full.services/#org" } }, { "@type": "HowTo", "@id": "https://full.services/bibliotecas-de-icones-para-elementor/#howto", "isPartOf": { "@id": "https://full.services/bibliotecas-de-icones-para-elementor/#article" }, "name": "Passo a passo: bibliotecas de icones para elementor", "description": "Guia passo a passo sobre bibliotecas de icones para elementor para WordPress.", "url": "https://full.services/bibliotecas-de-icones-para-elementor/", "totalTime": "PT18M", "author": { "@type": "Organization", "@id": "https://full.services/#org" }, "step": [ { "@type": "HowToStep", "position": 1, "name": "Passo 1: Gere o pacote de ícones no IcoMoon ou fontello", "text": "Acesse o IcoMoon ou o Fontello, selecione apenas os ícones que o projeto realmente usa e clique em gerar a fonte. Essas ferramentas montam um pacote enxuto com só os símbolos marcados, o que mantém o arquivo final leve. Baixe o ZIP gerado, que já vem com a fonte e o mapeamento de cada glifo." }, { "@type": "HowToStep", "position": 2, "name": "Passo 2: Faça o upload em Elementor > custom icons", "text": "No painel do WordPress, abra o menu Elementor e clique em Custom Icons, recurso disponível no Elementor Pro. Use o botão de adicionar novo e envie o ZIP gerado no passo anterior. O Elementor lê o pacote, registra o set e o nomeia conforme você definiu, sem precisar editar nenhum código no tema." }, { "@type": "HowToStep", "position": 3, "name": "Passo 3: Aplique o ícone custom no widget de ícone", "text": "Edite qualquer página com o Elementor, arraste o widget de Ícone e abra a biblioteca pelo seletor. O set custom aparece como uma aba separada, ao lado do Font Awesome nativo. Escolha o ícone, ajuste cor e tamanho pelo painel, e publique. O símbolo custom passa a se comportar igual a qualquer ícone padrão do construtor. Ao montar bibliotecas de ícones para Elementor, a escolha entre SVG e fonte de ícone muda o peso da página de forma mensurável: um SVG inline ocupa cerca de 2 KB por símbolo, enquanto uma fonte completa como o Font Awesome pode passar de 70 KB mesmo quando você usa um único ícone. Para sites com poucos ícones, o SVG vence com folga no orçamento de bytes. O SVG inline ainda permite colorir e animar cada ícone por CSS, coisa que a fonte de ícone faz de forma limitada. A contrapartida honesta é que o Elementor exige liberar o upload de SVG por segurança, já que o formato pode carregar script malicioso, então a régua precisa de cuidado. Para projetos com dezenas de ícones repetidos, a fonte custom enxuta do IcoMoon ainda compensa, porque centraliza tudo em um arquivo cacheável. Quem busca página leve combina essa decisão com as práticas de