Como adicionar ícones personalizados no Elementor: 3 maneiras

Principais conclusões

• O pop-up da Biblioteca de Ícones do Elementor mostra apenas Font Awesome por padrão, em conjuntos Regular, Solid e Brands, e cada widget com um campo de ícone abre esse mesmo pop-up.
• A maneira mais rápida de adicionar ícones personalizados no Elementor é o botão Upload SVG no campo de ícones; se o arquivo for rejeitado, ative Ativar uploads de arquivos não filtrados em Elementor > Configurações > Avançado.
• A tela Ícones personalizados do Elementor Pro importa uma fonte de ícone inteira de um arquivo Fontello, IcoMoon ou Fontastic .zip e a lista em Minhas bibliotecas no pop-up Biblioteca de ícones.
• Elementor Pro também conecta Font Awesome Pro: cole seu Kit ID em Elementor > Configurações > Integrações e clique em Validar Kit ID para adicionar os estilos Pro ao selecionador.
• A extensão Master Addons Icon Library adiciona 8 pacotes de ícones com 5.344 ícones ao mesmo pop-up, e Feather Icons, Remix Icon e Teenyicons nesse conjunto exigem Master Addons Pro.

Você pode adicionar ícones personalizados no Elementor de três maneiras: fazer upload de um SVG em qualquer campo de ícones, importar sua própria fonte de ícones com o Elementor Pro ou ativar pacotes de ícones extras dos Complementos Mestres Todos os três acabam no mesmo pop-up da Biblioteca de Ícones, que oferece apenas Font Awesome até que você adicione algo a ele.

Este guia percorre cada método com as configurações exatas para clicar e, em seguida, compara-os em uma tabela para que você possa escolher a correta. Depois disso, ele cobre o estilo (cor, tamanho e hover) e os problemas que as pessoas acertam com mais frequência, como ícones que aparecem como quadrados vazios.

Três maneiras de adicionar ícones personalizados no Elementor

O método que se encaixa depende de quantos ícones você precisa e se você já os tem como arquivos.

• Para um ou dois ícones, como uma marca de logotipo, carregue o SVG diretamente no campo de ícones (Método 1).
• Para o seu próprio conjunto de marcas, importe-o como uma fonte de ícones com os Ícones Personalizados do Elementor Pro (Método 2).
• Para uma grande variedade de ícones prontos sem nada para fazer upload, ligue os pacotes de ícones em Master Addons (Método 3).

Você pode misturar todos os três em uma página Um SVG carregado, um conjunto de ícones personalizados, Font Awesome e um pacote Master Addons podem todos ficar na mesma página, porque cada um é apenas mais uma fonte para o mesmo campo de ícones.

Método 1: Biblioteca de ícones integrada do Elementor e upload de SVG

Todo widget Elementor com um campo de ícones abre o mesmo pop-up da Biblioteca de Ícones, seja Ícone, Caixa de Ícones, Lista de Ícones, Botão ou Ícones Sociais Fora da caixa que o pop-up lista Fonte Incrível em três conjuntos: Regular, Sólido e Marcas.

1. Adicione um widget de ícone, ou qualquer widget com um ícone, à sua página.
2. Na guia Conteúdo, passe o mouse sobre a visualização do ícone. Dois botões aparecem: Biblioteca de ícones e Upload SVG.
3. Clique em Biblioteca de ícones para escolher um ícone Font Awesome ou em Carregar SVG para usar seu próprio arquivo.

Upload SVG é a maneira mais rápida de adicionar um único ícone personalizado, como a marca de logotipo de um cliente WordPress bloqueia uploads SVG por padrão, então se Elementor recusar o arquivo, ative Habilitar uploads de arquivos não filtrados em Elementor > Configurações > Avançado Só faça isso se você confiar em todos que podem fazer upload de arquivos para o site, uma vez que um SVG pode transportar código.

Cada SVG é o seu próprio upload, sem nenhum conjunto para navegar ou pesquisar mais tarde. Elementor's Artigo de ajuda da Biblioteca de Ícones observa também que os widgets Accordion e Toggle usam pequenos controles de ícones embutidos em vez da visualização usual, mas abrem o mesmo pop-up Uma vez que você precisa de mais de um punhado de ícones, os próximos dois métodos economizam tempo.

Método 2: Carregue um conjunto de ícones com ícones personalizados do Elementor Pro

Elementor Pro pode carregar sua própria fonte de ícone no selecionador como uma guia separada. Ele aceita arquivos.zip exportados de Fontello, IcoMoon ou Fontastic, para que você possa construir um conjunto a partir dos SVGs da sua marca e mantê-lo em um só lugar.

1. Construa seu conjunto em Fontello, IcoMoon ou Fontastic e baixe-o como um arquivo.zip.
2. No WordPress, abra a tela Ícones personalizados do Elementor No Elementor 4 há um atalho para ele na tela inicial do Elementor.
3. Clique em Adicionar novo conjunto de ícones, solte o arquivo.zip, nomeie o conjunto e publique-o.
4. Abra qualquer campo de ícone no editor Seu conjunto aparece em Minhas Bibliotecas no pop-up Biblioteca de Ícones.

Próprio do elementor Guia de ícones personalizados lista as etapas de exportação para cada serviço, incluindo o prefixo CSS exclusivo que todo conjunto precisa A captura com essa rota é manutenção: você cria ou compra o conjunto primeiro e o carrega novamente toda vez que ele muda.

Fonte de conexão Awesome Pro

Elementor Pro também conecta uma assinatura Font Awesome Pro. Vá para Elementor > Configurações > Integrações, cole seu Font Awesome Pro Kit ID e clique em Validar Kit ID. As famílias Pro então aparecem no selecionador ao lado dos conjuntos padrão Font Awesome.

Método 3: Adicione 8 pacotes de ícones com complementos mestres

O Biblioteca de ícones Master Addons extensão adiciona oito pacotes de ícones completos, 5.344 ícones no total, para o pop-up Biblioteca de ícones Nada é carregado: você liga um pacote, e seus ícones aparecem em cada campo de ícones no site.

A configuração leva três etapas:

1. Vá para Complementos Mestres > Configurações > Extensões, clique no filtro Biblioteca de Ícones, ligue os pacotes desejados e clique em Salvar alterações.

2. Abra qualquer campo de ícones no Elementor e clique em Biblioteca de Ícones Os novos pacotes ficam em Minhas Bibliotecas, cada um com um pequeno emblema “M”.
3. Clique em um pacote para navegar nele, ou digite Filtrar por nome para pesquisar cada pacote de uma só vez Selecione um ícone e clique em Inserir.

A fonte de ícones do próprio Elementor (eicons) não está no selecionador padrão Master Addons adiciona todos os 398 eicons como uma guia, o que ajuda quando você deseja ícones que correspondam à interface do Elementor Feather Icons, Remix Icon e Teenyicons vêm com Master Addons Pro.

Use o ícone Remix para estados abertos e fechados

A maioria das formas de Ícones de Remix vem em uma versão de linha e uma versão de preenchimento Isso o torna uma boa combinação para widgets com dois estados de ícone: no Widget Acordeão Avançado(ou Acordeão e Alternância do próprio Elementor), defina o contorno como o ícone fechado e a forma preenchida como o ícone aberto.

Os detalhes de configuração, o prefixo da classe CSS para cada pacote e as correções para problemas comuns estão no Configurações da Biblioteca de Ícones docs.

Qual método você deve usar?

O método certo depende do que você já tem.

A última linha é para pessoas que constroem seus próprios widgets. O Controle de ícones no Widget Builder abre o mesmo pop-up, para que widgets personalizados possam usar todos os pacotes que você ligou.

Como estilizar ícones no Elementor

Os ícones de todas essas fontes usam os controles de estilo normal do widget Abra a guia Estilo, expanda a seção Ícone e defina a cor, tamanho e rotação primários Mude para a guia Hover para alterar a cor quando um visitante apontar para o ícone.

Os ícones de fonte pegam qualquer cor que você definir Que abrange Font Awesome, conjuntos de ícones personalizados e os pacotes Master Addons Um SVG carregado só muda de cor se seus caminhos não carregarem um preenchimento fixo próprio, então retire valores de preenchimento codificados do arquivo antes de carregá-lo.

Os mesmos controles aparecem em outros widgets de ícones também. O Widget de caixa de informações emparelha um ícone com um título e texto, e nosso guia para botões animados no Elementor mostra como colocar um ícone dentro de um botão e dar-lhe a sua própria cor de pairar.

Solução de problemas de ícones do Elementor

A maioria dos problemas de ícones se resume a um arquivo de fonte que não está carregando ou a uma configuração que não foi salva.

Os ícones são mostrados como quadrados vazios

A fonte do ícone não está carregando Limpar o cache do Elementor em Elementor > Ferramentas > Geral (Limpar Arquivos & Dados), então limpe seu plugin de cache e CDN Se suas fontes carregarem de um CDN em outro domínio, verifique se ele permite solicitações de origem cruzada para arquivos de fonte.

Elementor não aceitará meu SVG

Ative a ativação de uploads de arquivos não filtrados em Elementor > Configurações > Avançado e tente fazer o upload novamente. Se ainda falhar, abra o SVG em um editor de texto e verifique se é um arquivo SVG real e não um PNG com extensão .svg.

Um pacote Master Addons está faltando no selecionador

Verifique se o interruptor do pacote está ligado em Master Addons > Configurações > Extensões > Biblioteca de ícones e se você clicou em Salvar alterações e, em seguida, recarregue o editor Feather Icons, Remix Icon e Teenyicons também precisam do Master Addons Pro com uma licença ativa.

Fontes de ícones diminuem a página

Cada fonte de ícone é mais um arquivo para o navegador baixar Atenha-se a um ou dois pacotes para uma aparência consistente e leia nosso guia acelerando os sites da Elementor, que cobre a opção Inline Font Icons da Elementor para renderizar ícones como SVG em vez de arquivos de fonte.

Perguntas frequentes

Pensamentos finais

Adicionar ícones personalizados no Elementor se resume a onde seus ícones começam Um único SVG vai direto para o campo de ícones Uma fonte de ícones de marca entra através dos Ícones Personalizados do Elementor Pro, ao lado do Font Awesome Pro se você tiver um kit E se preferir escolher do que fazer upload, os oito pacotes Master Addons colocam mais 5.344 ícones no mesmo pop-up.

Para ver cada pacote com amostras e contagens de ícones antes de ligar qualquer coisa, navegue pelo Biblioteca de ícones do elementor página.

Leitura relacionada

• Configurações da Biblioteca de Ícones: switches, prefixos CSS e solução de problemas para todos os oito pacotes
• Controle de ícones no Widget Builder: use os pacotes em seus próprios widgets personalizados
• Como adicionar um ícone Font Awesome a um botão de envio do Formulário de Contato 7
• Todos os widgets e extensões Master Addons