Ícones

O Campo ícones coloca o seletor de biblioteca de ícones completo do Elementor no painel do seu widget: Font Awesome, quaisquer bibliotecas de ícones personalizadas registradas no site e upload direto de SVG, tudo por trás do seletor de ícones que os editores já conhecem. Dentro dos complementos mestres Construtor de widgets, é o campo para marcadores de recursos, caixas de informações, linhas sociais e todos os outros locais onde um pequeno símbolo carrega o significado.

Como todo campo Widget Builder, o controle Icons suporta Condições, útil para mostrar o selecionador somente quando um ícone “enable” toggle está ligado e sua saída é renderizada através do Mecanismo de modelo de sintaxe dupla. Ambos os guias cobrem os detalhes e limitações.

O valor é uma matriz com duas chaves, value e library. Essa forma tem uma consequência que vale a pena indicar antecipadamente: imprimir o campo diretamente com {{ my_icon }} outputs nada em tudo Ícones de fonte e SVGs carregados também renderizar através de marcação diferente, de modo que o modelo precisa de um ramo curto Ambos os padrões estão abaixo, pronto para colar.

O que o campo Ícones faz #

• Abre o selecionador de biblioteca de ícones do Elementor com Font Awesome, bibliotecas personalizadas e upload SVG.
• Armazena a escolha como uma matriz de value e library.
• Possui uma sequência de classes para ícones de fontes: value a classe do ícone está pronta para um <i> etiqueta.
• Possui uma matriz de arquivos aninhada para SVGs: value torna-se um par de URL e ID alcançado como {{ my_icon.value.url }}.
• Aceita um padrão e uma lista recomendada, para que o selecionador possa emergir os ícones adequados ao widget.

Se você é novo na construção de widgets, comece com o Visão geral do Widget Builder primeiro.

Antes de começar #

• WordPress com Elementor instalado e ativo.
• Complementos Mestres para Elementor instalado e ativo. Novo no plugin? veja o guia instalação.
• Um widget personalizado aberto no editor Widget Builder Nosso exemplo é um widget de lista de recursos onde cada instância mostra um ícone, nomeado feature_icon, ao lado de uma pequena sinopse de texto.

Como adicionar um campo Ícones #

Encontre o Ícones campo no painel à esquerda do editor Widget Builder, agrupado com os outros campos de mídia.

Arraste-o para uma seção abaixo do Conteúdo aba. Uma vez aterrada, as opções do campo abrem à esquerda.

Opções de campo de ícones explicadas #

• Etiqueta: o texto mostrado acima do selecionador em Elementor, por exemplo “Feature Icon”.
• Nome: o identificador exclusivo apenas para o campo, letras, números e sublinhados, por exemplo feature_icon.
• Predefinição: um ícone inicial como um value e library par, para que o widget nunca caia sem ícones.
• Recomendado: um conjunto de ícones que o selecionador surge primeiro, direcionando os editores para escolhas que se adaptem ao design.
• Descrição, Mostrar etiqueta, Separador: as configurações de exibição padrão, além de condições para mostrar o campo somente quando outro controle tiver um determinado valor.

Conecte o campo Ícones ao seu modelo #

Primeiro, o erro que quase todo mundo comete uma vez: {{ feature_icon }} imprime nada. O atalho de impressão direta nos valores da matriz gera apenas um nível superior url chave, e a matriz de Ícones não tem nenhuma, então o token sai vazio Sem erro, sem aviso, apenas um ponto em branco onde o ícone deve estar As propriedades são onde o conteúdo vive.

Ícone fonte (Font Awesome e outras bibliotecas baseadas em classes): value segura a string de classe, então an <i> a tag o renderiza:

<i class="{{ feature_icon.value }}" aria-hidden="true"></i>

SVG carregado: quando a escolha vem da biblioteca SVG, value é em si uma matriz com URL e ID, portanto o ícone é renderizado como uma imagem:

<img src="{{ feature_icon.value.url }}" alt="">

Um widget raramente sabe com antecedência qual tipo o editor escolherá, portanto o padrão confiável é ramificado no library chave e manuseia ambos:

{% if feature_icon.library == 'svg' %}
  <img src="{{ feature_icon.value.url }}" alt="">
{% else %}
  <i class="{{ feature_icon.value }}"></i>
{% endif %}

Enrole tudo em uma proteção de estado vazio, como acontece com qualquer campo do tipo mídia, para que um ícone não definido não deixe nenhum extravio <i class=""> atrás:

{% if feature_icon.value %}
  ...the branch above...
{% endif %}

Cuidado para testar apenas com ícones de fonte. O <i>- tag version funciona durante toda a semana, depois um cliente carrega um SVG de marca e o ícone desaparece, porque um atributo de classe não pode conter uma matriz de arquivos Se você enviar o campo, envie a ramificação.

Use o controle de ícones no Elementor #

Adicione seu widget personalizado a uma página no Elementor, recarregando o editor se a página já estivesse aberta O campo é renderizado como o seletor de ícones do Elementor sob seu rótulo, mostrando o ícone atual.

Clique nele e a biblioteca de ícones será aberta Pesquisar fonte incrível, navegue em quaisquer bibliotecas personalizadas ou mude para a guia de upload de um SVG. Confirme a escolha e as atualizações de visualização, executando qualquer ramificação do seu modelo que corresponda à biblioteca.

Casos de uso comum #

• Listas de recursos e benefícios com um símbolo por ponto.
• Caixas de informações e ícones onde o ícone ancora o tópico do cartão.
• Linhas de links sociais, cada instância emparelhando um ícone com um campo URL.
• Botões e chamadas à ação que carregam um pequeno ícone principal.
• Passo e processo widgets onde cada estágio numerado recebe um símbolo correspondente.

Dicas para trabalhar com o campo Ícones #

• Nunca imprima o campo nu. {{ feature_icon }} não produz nada; o ícone vive em {{ feature_icon.value }} e, para SVGs, {{ feature_icon.value.url }}.
• Envie a filial da biblioteca. O {% if feature_icon.library == 'svg' %} pattern é a única versão que sobrevive a cada escolha que um editor pode fazer.
• Guarda o estado vazio. {% if feature_icon.value %} evita que ícones não definidos renderizem tags vazias.
• Adicionar aria-hidden="true" aos ícones decorativos da fonte. Os leitores de tela pulam o símbolo e leem o texto ao lado dele.
• Uso Recomendado para orientar a escolha. A superfície de um conjunto selecionado mantém os ícones de um widget visualmente consistentes em um site.
• Tamanho SVGs em sua guia CSS. Os SVGs carregados chegam como imagens, portanto, dê ao ramo img uma largura para manter ambas as ramificações renderizando na mesma escala.

Perguntas frequentes #

Embrulhando #

O campo Ícones do Construtor de Widgets traz toda a biblioteca de ícones do Elementor para um widget personalizado pelo preço de uma ramificação curta: value como uma classe para ícones de fontes, value.url como um arquivo para SVGs, e um guarda em torno de ambos Emparelhe-o com o Campo mídia quando um slot exige uma imagem completa em vez de um símbolo Explore o resto do Widgets e extensões Master Addons, e veja o página preços para o que cada plano inclui.