Iconos

El campo Iconos agrega el selector de iconos de Elementor a un widget personalizado creado con los complementos maestros Creador de widgets. Los editores eligen un icono de la biblioteca de iconos o cargan su propio SVG y su plantilla lo imprime. Úselo para listas de funciones, cuadros de información, botones, enlaces sociales y, en cualquier otro lugar, un pequeño símbolo ayuda.

Iconos es un campo Pro. El complemento gratuito incluye un Widget Builder limitado y viene con el conjunto completo de campos Complementos maestros Pro.

Qué hace el campo Iconos #

• Agrega un cuadro de íconos al panel de su widget en Elementor, con botones para la biblioteca de íconos y para cargar un SVG.
• La biblioteca de iconos incluye Font Awesome y los conjuntos de iconos adicionales que vienen con complementos maestros, como iconos elementales, iconos de línea simples, iconos lineales e iconos de materiales.
• El campo almacena dos cosas: value (la clase CSS del icono o el archivo SVG para cargar) y library (de donde vino).
• Tu plantilla imprime un <i> etiqueta para iconos de biblioteca y un <img> etiqueta para SVG cargados.

Si aún no ha creado un widget, lea el Descripción general del creador de widgets primero.

Antes de empezar #

• WordPress con Elementor instalado y activo.
• Master Addons para Elementor y Master Addons Pro, ambos activos. El guía de instalación configuración de cubiertas.
• Un widget abierto en Widget Builder. El ejemplo de esta guía es un widget de “Lista de funciones”: un campo de iconos llamado feature_icon y un campo Texto para el título.

Cómo agregar un campo de iconos #

1. Ir a Complementos maestros > Creador de widgets y abre tu widget.
2. En el Contenido tab, agregue una sección, por ejemplo “Característica”.
3. Tipo icons en el cuadro de búsqueda de campo de la izquierda.
4. Arrastrar Iconos en la sección. Su configuración se abre en la barra lateral izquierda.

Opciones de campo de iconos explicadas #

• Etiqueta es el texto encima del cuadro de iconos en Elementor, por ejemplo “Icono de característica”.
• Nombre ¿es el ID único del campo y el inicio de sus tokens feature_icon da {{ feature_icon.value }}. Sólo letras, números y guiones bajos.
• Descripción aparece bajo el control en Elementor.
• Piel ofrece en línea y medios. Cambia la forma en que la vista previa del propio constructor dibuja el campo. En nuestras pruebas, Elementor mostró el cuadro de icono grande de cualquier manera.
• Valor predeterminado es el icono con el que comienza una nueva copia del widget. Haga clic Cambiar icono elegir uno o la pequeña cruz para borrarlo. Sin un conjunto predeterminado, el campo comienza con el icono del logotipo de Elementor.

Cambiar icono abre el selector de iconos de complementos maestros. Elija un conjunto a la izquierda, busque por nombre, haga clic en un icono y luego Insertar.

Imprime el icono en tu plantilla #

{{ feature_icon }} por sí solo no imprime nada, porque el campo contiene dos valores. Utilice sus partes en su lugar:

• {{ feature_icon.value }} es la clase de icono para un icono de biblioteca, como por ejemplo eicon eicon-check. Para un SVG cargado, imprime la URL del archivo.
• {{ feature_icon.library }} es el nombre establecido, como por ejemplo eicons, simple-line-icons o svg para una carga.
• {{ feature_icon.value.url }} es la URL del SVG cuando la biblioteca está svg.

Los editores pueden elegir cualquier tipo, así que consulte la biblioteca e imprima la etiqueta correcta. Envuélvalo todo en una verificación para obtener un valor vacío para que nada se imprima cuando se elimine el ícono:

{% 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 %}

Los íconos de la biblioteca son glifos de fuentes, por lo que toman el color y font-size del elemento que los rodea. Un SVG subido en un <img> la etiqueta mantiene sus propios colores, así que dimensiona con ella width y height en la pestaña CSS.

Hacer clic Guardar configuración cuando hayas terminado.

Utilice el control de iconos en Elementor #

Agregue el widget a una página o recargue el editor si la página ya estaba abierta. El cuadro de iconos muestra el icono actual. Pase el cursor sobre él para verlo Biblioteca de iconos y Subir SVGy un ícono de papelera para eliminar el ícono.

Biblioteca de iconos abre la ventana de iconos de Elementor. Elija un conjunto a la izquierda, filtre por nombre, haga clic en un icono y haga clic en él Insertar. Subir SVG abre la biblioteca multimedia para que pueda cargar o elegir un archivo SVG. Elementor puede pedirle que permita la carga de SVG la primera vez.

Iconos de fuentes impresionantes e iconos de fuentes en línea #

En nuestro sitio de prueba, los iconos Elementor, los iconos de línea simple y los SVG cargados se mostraron en la página publicada, pero un icono de Font Awesome no. El de Elementor Iconos de fuentes en línea la función está activada de forma predeterminada y evita que se cargue la hoja de estilo Font Awesome, por lo que <i> la etiqueta del widget permanece en blanco. Ir a Elementor > Configuración > Funciones, configure Iconos de fuentes en línea en Inactivo y guardar. Luego apareció el ícono Font Awesome. Si prefiere mantener esa función activada, use los otros conjuntos de íconos o una carga SVG.

Casos de uso comunes #

• Listas de funciones y cuadros de información con un icono al lado de cada encabezado.
• Botones con icono inicial o final.
• Enlaces sociales, datos de contacto y lista de viñetas.
• Marcas de marca, subiendo el logo como SVG.

Consejos para trabajar con el campo Iconos #

• Maneja siempre ambos casos en la plantilla: <i> para iconos de biblioteca y <img> para cargas SVG.
• Proteger con {% if feature_icon.value %} entonces, un ícono vacío no deja un contenedor vacío.
• Establezca un valor predeterminado que se adapte al widget, para que nunca muestre el logotipo de Elementor por accidente.
• Diseñe el contenedor, no la etiqueta del ícono, para que ambos tipos de íconos se encuentren en el mismo cuadro.
• Consulte una selección de Font Awesome en la página en vivo antes de confiar en ella (consulte la sección anterior).
• Para imágenes en lugar de íconos, use el Campo de medios.

Preguntas frecuentes #

Envolviendo #

Agregue el campo Iconos, establezca un ícono predeterminado e imprima con una plantilla que maneje tanto los íconos de la biblioteca como las cargas SVG. Verifique las selecciones de Font Awesome en la página publicada y apague los iconos de fuentes en línea si salen en blanco. Para otros campos de la pestaña Contenido, consulte URL y Elegir campos y comprobar precios por lo que incluye cada plan.