Iconos

El Campo de iconos coloca el selector de biblioteca de íconos completo de Elementor en el panel de su widget: Font Awesome, cualquier biblioteca de íconos personalizada registrada en el sitio y carga directa de SVG, todo lo que los editores detrás del selector de íconos ya conocen. Dentro de los complementos maestros Creador de widgets, es el campo para balas de características, cuadros de información, filas sociales y cualquier otro lugar donde un pequeño símbolo tenga el significado.

Como todos los campos de Widget Builder, el control de iconos es compatible Condiciones, útil para mostrar el selector solo cuando un interruptor “habilitar ícono” está activado y su salida se representa a través de Motor de plantilla de sintaxis de ramita. Ambas guías cubren los detalles y limitaciones.

El valor es una matriz con dos claves value y library. Esa forma tiene una consecuencia que vale la pena señalar desde el principio: imprimir el campo directamente con {{ my_icon }} no genera nada en absoluto. Los íconos de fuentes y los SVG cargados también se representan a través de diferentes marcas, por lo que la plantilla necesita una rama corta. Ambos patrones están a continuación, listos para pegar.

Qué hace el campo Iconos #

• Abre el selector de biblioteca de iconos de Elementor con Font Awesome, bibliotecas personalizadas y carga SVG.
• Almacena la selección como una matriz de value y library.
• Mantiene presionada una cadena de clase para los íconos de fuentes: value es la clase del ícono, lista para un <i> etiqueta.
• Contiene una matriz de archivos anidada para SVG: value se convierte en un par de URL e ID alcanzado como {{ my_icon.value.url }}.
• Acepta una lista predeterminada y recomendada, para que el selector pueda mostrar los iconos que se adapten al widget.

Si es nuevo en la creación de widgets, comience con Descripción general del creador de widgets primero.

Antes de empezar #

• WordPress con Elementor instalado y activo.
• Complementos maestros para Elementor instalado y activo. ¿Nuevo en el complemento? Ver el guía de instalación.
• Un widget personalizado abierto en el editor de Widget Builder. Nuestro ejemplo es un widget de lista de funciones donde cada instancia muestra un icono, llamado feature_icon, además de un breve mensaje de texto.

Cómo agregar un campo de iconos #

Encuentra el Iconos campo en el panel a la izquierda del editor Widget Builder, agrupado con los otros campos multimedia.

Arrástrelo a una sección debajo del Contenido pestaña. Una vez que aterriza, las opciones del campo se abren a la izquierda.

Opciones de campo de iconos explicadas #

• Etiqueta: el texto que se muestra encima del selector en Elementor, por ejemplo “Icono de característica”.
• Nombre: el identificador único para el campo, letras, números y guiones bajos únicamente, por ejemplo feature_icon.
• Predeterminado: un icono de inicio como value y library empareje, para que el widget nunca entre sin iconos.
• Recomendado: primero aparece un conjunto de íconos que el selector dirige a los editores hacia opciones que se ajustan al diseño.
• Descripción, Mostrar etiqueta, Separador: la configuración de visualización estándar, más las condiciones para mostrar el campo solo cuando otro control tiene un valor determinado.

Conecte el campo Iconos a su plantilla #

Primero, el error que casi todo el mundo comete una vez: {{ feature_icon }} no imprime nada. El acceso directo de impresión en los valores de la matriz solo genera un nivel superior url clave, y la matriz de iconos no tiene ninguna, por lo que el token sale vacío. Sin error, sin advertencia, solo un punto en blanco donde debería estar el ícono. Las propiedades son donde vive el contenido.

Icono de fuente (Font Awesome y otras bibliotecas basadas en clases): value mantiene la cadena de clase, por lo que an <i> la etiqueta lo representa:

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

Svg subido: cuando la selección proviene de la biblioteca SVG, value es en sí mismo una matriz con una URL y un ID, por lo que el icono se representa como una imagen:

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

Un widget rara vez sabe de antemano qué tipo elegirá el editor, por lo que el patrón confiable se ramifica en el library clave y maneja ambos:

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

Envuelva todo en un guardado de estado vacío, como con cualquier campo de tipo medio, para que un ícono no configurado no se desvíe <i class=""> în spate:

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

Tenga cuidado únicamente con las pruebas con iconos de fuentes. El <i>-la versión de etiqueta funciona toda la semana, luego un cliente carga un SVG de marca y el ícono desaparece porque un atributo de clase no puede contener una matriz de archivos. Si envía el campo, envíe la rama.

Utilice el control de iconos en Elementor #

Agregue su widget personalizado a una página en Elementor, recargando el editor si la página ya estaba abierta. El campo se representa como el selector de iconos de Elementor debajo de su etiqueta, mostrando el icono actual.

Haga clic en él y se abrirá la biblioteca de iconos. Busque Font Awesome, explore las bibliotecas personalizadas o cambie a la pestaña de carga de un SVG. Confirme la selección y las actualizaciones de vista previa, ejecutándose en cualquier rama de su plantilla que coincida con la biblioteca.

Casos de uso comunes #

• Listas de características y beneficios con un símbolo por punto.
• Cuadros de información e iconos donde el icono ancla el tema de la tarjeta.
• Filas de enlaces sociales, cada instancia empareja un icono con un campo URL.
• Botones y llamados a la acción que llevan un pequeño icono principal.
• Widgets de pasos y procesos donde las etapas numeradas obtienen cada una un símbolo coincidente.

Consejos para trabajar con el campo Iconos #

• Nunca imprimas el campo desnudo. {{ feature_icon }} no produce nada; el icono vive dentro {{ feature_icon.value }} y, para SVG, {{ feature_icon.value.url }}.
• Envíe la sucursal de la biblioteca. El {% if feature_icon.library == 'svg' %} el patrón es la única versión que sobrevive a cada elección que puede hacer un editor.
• Guarda el estado vacío. {% if feature_icon.value %} evita que los iconos no configurados representen etiquetas vacías.
• Añadir aria-hidden="true" a iconos de fuentes decorativas. Los lectores de pantalla omiten el símbolo y leen el texto al lado.
• Uso recomendado para guiar la elección. La superficie de un conjunto seleccionado mantiene los íconos de un widget visualmente consistentes en todo el sitio.
• Tamaño SVG en su pestaña CSS. Los SVG cargados llegan como imágenes, por lo que le dan a la rama img un ancho para mantener ambas ramas renderizadas a la misma escala.

Preguntas frecuentes #

Envolviendo #

El campo Iconos del creador de widgets reúne toda la biblioteca de iconos de Elementor en un widget personalizado por el precio de una rama corta: value como clase para iconos de fuentes, value.url como archivo para SVG y guardia alrededor de ambos. Emparejarlo con el Campo de medios cuando una tragamonedas requiere una imagen completa en lugar de un símbolo. Explora el resto del Widgets y extensiones de complementos maestros, y mira el página de precios por lo que incluye cada plan.