Ícones

O campo Ícones adiciona o seletor de ícones do Elementor a um widget personalizado construído com os Master Addons Construtor de widgets. Os editores escolhem um ícone da Biblioteca de Ícones ou carregam seu próprio SVG, e seu modelo o imprime. Use-o para listas de recursos, caixas de informações, botões, links sociais e em qualquer outro lugar que um pequeno símbolo ajude.

Ícones é um campo Pro. O plugin gratuito inclui um Widget Builder limitado, e o conjunto completo de campos vem com Master Addons Pro.

O que o campo Ícones faz #

• Ele adiciona uma caixa de ícones ao painel do seu widget no Elementor, com botões para a Biblioteca de Ícones e para fazer upload de um SVG.
• A Biblioteca de Ícones inclui Font Awesome e os conjuntos de ícones extras que vêm com Master Addons, como Ícones Elementor, Ícones de Linha Simples, Ícones Lineares e Ícones de Material.
• O campo armazena duas coisas: value (a classe CSS do ícone, ou o arquivo SVG para um upload) e library (de onde veio).
• Seu modelo imprime um <i> tag para ícones de biblioteca e um <img> tag para SVGs carregados.

Se você ainda não construiu um widget, leia o Visão geral do Widget Builder primeiro.

Antes de começar #

• WordPress com Elementor instalado e ativo.
• Master Addons para Elementor e Master Addons Pro, ambos ativos. O guia instalação coberturas configuração.
• Um widget aberto no Widget Builder O exemplo neste guia é um widget “Feature List”: um campo Ícones nomeado feature_icon e um campo Texto para o título.

Como adicionar um campo Ícones #

1. Ir para Complementos mestres > Construtor de widgets e abra seu widget.
2. No Conteúdo tab, adicione uma seção, por exemplo “Feature”.
3. Tipo icons na caixa de pesquisa de campo à esquerda.
4. Arrastar Ícones na seção. Suas configurações abrem na barra lateral esquerda.

Opções de campo de ícones explicadas #

• Etiqueta o texto acima da caixa de ícones em Elementor, por exemplo “Feature Icon”.
• Nome é o ID exclusivo do campo e o início de seus tokens, então feature_icon dá {{ feature_icon.value }}. Apenas letras, números e sublinhados.
• Descrição aparece sob o controle em Elementor.
• Pele oferece Inline e Media Ele muda como a própria visualização do construtor desenha o campo Em nossos testes Elementor mostrou a grande caixa de ícones de qualquer maneira.
• Valor padrão é o ícone com o qual uma nova cópia do widget começa. Clique Mudar Ícone para escolher um, ou a pequena cruz para limpá-lo Sem conjunto padrão, o campo começa com o ícone do logotipo do Elementor.

Change Icon abre o Master Addons Icon Picker Escolha um conjunto à esquerda, pesquise por nome, clique em um ícone e depois Inserir.

Imprima o ícone no seu modelo #

{{ feature_icon }} por si só imprime nada, porque o campo detém dois valores Use suas partes em vez disso:

• {{ feature_icon.value }} é a classe de ícone para um ícone de biblioteca, como eicon eicon-check. Para um SVG carregado imprime o URL do arquivo.
• {{ feature_icon.library }} é o nome do conjunto, como eicons, simple-line-icons ou svg para um upload.
• {{ feature_icon.value.url }} é o URL do SVG quando a biblioteca está svg.

Os editores podem escolher qualquer tipo, então verifique a biblioteca e imprima a tag certa. Enrole tudo em um cheque para obter um valor vazio para que nada seja impresso quando o ícone for removido:

{% if feature_icon.value %}
  <span class="feature-icon">
    {% if feature_icon.library == 'svg' %}
      <img src="{{ feature_icon.value.url }}" alt="">
    {% else %}
      <i class="{{ feature_icon.value }}" aria-hidden="true"></i>
    {% endif %}
  </span>
{% endif %}

Os ícones da biblioteca são glifos de fontes, então eles pegam o color e font-size do elemento em torno deles Um SVG carregado em um <img> tag mantém suas próprias cores, então dimensione-o com width e height na guia CSS.

Clique Salvar configurações quando terminar.

Use o controle de ícones no Elementor #

Adicione o widget a uma página, ou recarregue o editor se a página já estiver aberta A caixa de ícones mostra o ícone atual Passe o mouse sobre ele para ver Biblioteca Ícone e Carregar SVG, e um ícone de lixo para remover o ícone.

Biblioteca Ícone abre a janela de ícones do Elementor Escolha um conjunto à esquerda, filtre pelo nome, clique num ícone e clique Inserir. Carregar SVG abre a Biblioteca de Mídia para que você possa fazer upload ou escolher um arquivo SVG Elementor pode pedir-lhe para permitir o upload de SVG pela primeira vez.

Ícones incríveis da fonte e ícones de fonte embutidos #

Em nosso site de teste, Elementor Icons, Simple Line Icons e SVGs carregados foram exibidos na página publicada, mas um ícone Font Awesome não. Elementor Ícones de fonte embutida o recurso está ativado por padrão e impede o carregamento da folha de estilo Font Awesome, portanto <i> tag do widget fica em branco Ir para Elementor > Configurações > Recursos, defina Ícones de Fonte Inline para Inativo e salvar. O ícone Font Awesome então apareceu Se você preferir manter esse recurso ligado, use os outros conjuntos de ícones ou um upload SVG.

Casos de uso comum #

• Listas de recursos e caixas de informações com um ícone ao lado de cada título.
• Botões com um ícone à esquerda ou à direita.
• Links sociais, detalhes de contato e marcadores de lista.
• Marcas de marca, carregando o logotipo como SVG.

Dicas para trabalhar com o campo Ícones #

• Sempre trate ambos os casos no modelo: <i> para ícones de biblioteca e <img> para uploads SVG.
• Guarda com {% if feature_icon.value %} portanto, um ícone vazio não deixa um invólucro vazio para trás.
• Defina um valor padrão adequado ao widget, para que ele nunca mostre o logotipo do Elementor por acidente.
• Estile o invólucro, não a etiqueta de ícone, para que ambos os tipos de ícones fiquem na mesma caixa.
• Verifique uma escolha Font Awesome na página ao vivo antes de confiar nela (veja a seção acima).
• Para imagens em vez de ícones, use o Campo mídia.

Perguntas frequentes #

Embrulhando #

Adicione o campo Ícones, defina um ícone padrão e imprima-o com um modelo que lida tanto com ícones de biblioteca quanto com uploads SVG. Verifique Font Awesome picks na página publicada e desligue Inline Font Icons se eles saírem em branco Para outros campos de guia Conteúdo, consulte o URL e Escolher campos e verifique preços para o que cada plano inclui.