Conclusiones clave
- La ventana emergente Biblioteca de iconos de Elementor muestra solo Font Awesome de forma predeterminada, en conjuntos Regular, Sólido y Marcas, y cada widget con un campo de iconos abre la misma ventana emergente.
- La forma más rápida de agregar íconos personalizados en Elementor es el botón Cargar SVG en el campo de íconos; Si el archivo es rechazado, active Habilitar cargas de archivos sin filtrar en Elementor > Configuración > Avanzado.
- La pantalla Iconos personalizados de Elementor Pro importa una fuente de icono completa desde un archivo.zip de Fontello, IcoMoon o Fontastic y la enumera en Mis bibliotecas en la ventana emergente Biblioteca de iconos.
- Elementor Pro también conecta Font Awesome Pro: pegue su ID de kit en Elementor > Configuración > Integraciones y haga clic en Validar ID de kit para agregar los estilos Pro al selector.
- La extensión Master Addons Icon Library agrega 8 paquetes de íconos con 5344 íconos a la misma ventana emergente, y Feather Icons, Remix Icon y Teenyicons en ese conjunto requieren Master Addons Pro.
Puede agregar íconos personalizados en Elementor de tres maneras: cargar un SVG en cualquier campo de íconos, importar su propia fuente de íconos con Elementor Pro o activar paquetes de íconos adicionales desde complementos maestros. Los tres terminan en la misma ventana emergente Biblioteca de íconos, que solo ofrece Font Awesome hasta que le agregues algo.
Esta guía recorre cada método con la configuración exacta para hacer clic y luego los compara en una tabla para que pueda elegir la correcta. Después de eso, cubre el estilo (color, tamaño y desplazamiento) y los problemas que la gente golpea con más frecuencia, como íconos que aparecen como cuadrados vacíos.
Tabla de contenidos
Tres formas de agregar íconos personalizados en Elementor
El método que se ajusta depende de cuántos iconos necesitas y de si ya los tienes como archivos.
- Para uno o dos íconos, como una marca de logotipo, cargue el SVG directamente en el campo de íconos (Método 1).
- Para su propio conjunto de marca, impórtelo como fuente de icono con los iconos personalizados de Elementor Pro (Método 2).
- Para obtener una gran variedad de íconos listos para usar sin nada que cargar, active los paquetes de íconos en Complementos maestros (Método 3).
Puedes mezclar los tres en una página. Un SVG cargado, un conjunto de iconos personalizados, Font Awesome y un paquete de complementos maestros pueden ubicarse en la misma página, porque cada uno es solo otra fuente para el mismo campo de iconos.
Método 1: biblioteca de iconos integrada de Elementor y carga SVG
Cada widget Elementor con un campo de icono abre la misma ventana emergente de la Biblioteca de iconos, ya sea icono, cuadro de iconos, lista de iconos, botón o iconos sociales. Fuera del cuadro, esa ventana emergente enumera Font Awesome en tres conjuntos: Regular, Sólido y Marcas.
- Agregue un widget de ícono, o cualquier widget con un ícono, a su página.
- En la pestaña Contenido, pase el cursor sobre la vista previa del icono. Aparecen dos botones: Biblioteca de iconos y Cargar SVG.
- Haga clic en Biblioteca de iconos para elegir un icono de Font Awesome o cargue SVG para usar su propio archivo.
Cargar SVG es la forma más rápida de agregar un único ícono personalizado, como la marca del logotipo de un cliente. WordPress bloquea las cargas de SVG de forma predeterminada, por lo que si Elementor rechaza el archivo, active Habilitar cargas de archivos sin filtrar en Elementor > Configuración > Avanzado. Solo hazlo si confías en todos los que pueden cargar archivos en el sitio, ya que un SVG puede transportar código.
Cada SVG es su propia carga, sin ningún conjunto para navegar o buscar más tarde. Elementor Artículo de ayuda de Icon Library también señala que los widgets Accordion y Toggle utilizan pequeños controles de iconos en línea en lugar de la vista previa habitual, pero abren la misma ventana emergente. Una vez que necesitas más de un puñado de íconos, los siguientes dos métodos ahorran tiempo.
¿necesitas más que Font Awesome? El Biblioteca de iconos Elementor en Master Addons agrega 5344 íconos en 8 paquetes al selector que ya usas, con un interruptor por paquete.
Método 2: cargue un conjunto de iconos con los iconos personalizados de Elementor Pro
Elementor Pro puede cargar su propia fuente de icono en el selector como una pestaña separada. Acepta archivos.zip exportados desde Fontello, IcoMoon o Fontastic, para que puedas crear un conjunto a partir de los SVG de tu marca y mantenerlo en un solo lugar.
- Construya su conjunto en Fontello, IcoMoon o Fontastic y descárguelo como un archivo.zip.
- En WordPress, abra la pantalla Iconos personalizados de Elementor. En Elementor 4 hay un acceso directo a él en la pantalla de inicio de Elementor.
- Haga clic en Agregar nuevo conjunto de íconos, ingrese el archivo.zip, nombre el conjunto y publíquelo.
- Abra cualquier campo de icono en el editor. Su conjunto aparece en Mis bibliotecas en la ventana emergente Biblioteca de iconos.
El propio Elementor Guía de iconos personalizados enumera los pasos de exportación para cada servicio, incluido el prefijo CSS único que cada conjunto necesita. El problema con esta ruta es el mantenimiento: primero creas o compras el conjunto y lo vuelves a cargar cada vez que cambia.
Conecte la fuente Awesome Pro
Elementor Pro también conecta una suscripción a Font Awesome Pro. Vaya a Elementor > Configuración > Integraciones, pegue su ID de kit de Font Awesome Pro y haga clic en Validar ID de kit. Luego, las familias Pro aparecen en el selector junto a los conjuntos estándar de Font Awesome.
Método 3: agregue paquetes de 8 íconos con complementos maestros
El Biblioteca de iconos de complementos maestros la extensión agrega ocho paquetes de íconos completos, 5344 íconos en total, a la ventana emergente Biblioteca de íconos. No se carga nada: enciendes un paquete y sus íconos aparecen en todos los campos de íconos del sitio.
| Paquete | Iconos | Estilo |
|---|---|---|
| Icono de remezcla (Pro) | 2.271 | Alinear y llenar pares |
| Iconos de materiales de Google | 1.144 | Lleno |
| Teenyicons (Pro) | 600 | Pequeño contorno |
| Iconos elementales (eicons) | 398 | Glifos de interfaz de Elementor |
| Fuente icónica (iconmonstr) | 300 | Sólido |
| Iconos de plumas (Pro) | 272 | Línea ligera |
| Iconos de línea simples | 189 | Línea delgada |
| Linealicones | 170 | Línea |
La configuración toma tres pasos:
- Vaya a Complementos maestros > Configuración > Extensiones, haga clic en el filtro Biblioteca de iconos, active los paquetes que desee y haga clic en Guardar cambios.
- Abra cualquier campo de iconos en Elementor y haga clic en Biblioteca de iconos. Los nuevos paquetes se encuentran debajo de Mis bibliotecas, cada uno con una pequeña insignia “M”.
- Haga clic en un paquete para explorarlo o escriba Filtrar por nombre para buscar en cada paquete a la vez. Seleccione un icono y haga clic en Insertar.
La fuente de iconos propia de Elementor (eicons) no está en el selector predeterminado. Master Addons agrega los 398 eicons como pestaña, lo que ayuda cuando desea íconos que coincidan con la interfaz de Elementor. Vienen iconos de plumas, iconos de remezcla y Teenyicons Complementos maestros Pro.
Utilice Remix Icon para estados abiertos y cerrados
La mayoría de las formas de íconos de Remix vienen en una versión de línea y una versión de relleno. Eso lo convierte en una buena combinación para widgets con dos estados de iconos: en el Widget de acordeón avanzado, o el propio acordeón y palanca de Elementor, establece el contorno como el icono cerrado y la forma rellena como el icono abierto.
Los detalles de configuración, el prefijo de clase CSS para cada paquete y las correcciones para problemas comunes se encuentran en Documentos de configuración de la biblioteca de iconos.
¿Qué método deberías utilizar?
El método correcto depende de lo que ya tengas.
| Si lo necesitas | Empezar con | Lo que se necesita |
|---|---|---|
| Uno o dos iconos personalizados, como un logotipo | Subir SVG (Método 1) | Un archivo SVG y cargas sin filtrar activadas |
| El conjunto de iconos propio de tu marca | Iconos personalizados (Método 2) | Elementor Pro y Fontello, IcoMoon o Fontastic.zip |
| Estilos Font Awesome Pro | Integración de Font Awesome Pro (Método 2) | Elementor Pro y un ID de kit Font Awesome Pro |
| Muchos iconos confeccionados en diferentes estilos | Paquetes de iconos de complementos maestros (Método 3) | Complementos maestros, un interruptor por paquete |
| Iconos dentro de tus propios widgets personalizados | Creador de widgets de complementos maestros | Un control de iconos en el widget |
La última fila es para personas que crean sus propios widgets. El Control de iconos en el Widget Builder abre la misma ventana emergente, por lo que los widgets personalizados pueden usar todos los paquetes que hayas activado.
Cómo diseñar iconos en Elementor
Los iconos de todas estas fuentes utilizan los controles de estilo normales del widget. Abra la pestaña Estilo, expanda la sección Icono y establezca el color principal, el tamaño y la rotación. Cambie a la pestaña Flotar para cambiar el color cuando un visitante apunte al ícono.
Los íconos de fuentes toman el color que establezcas. Eso cubre Font Awesome, conjuntos de iconos personalizados y paquetes de complementos maestros. Un SVG cargado solo cambia de color si sus rutas no tienen un relleno fijo propio, así que elimine los valores de relleno codificados del archivo antes de cargarlo.
Los mismos controles también aparecen en otros widgets de iconos. El Widget de cuadro de información combina un icono con un título y un texto, y nuestra guía para botones animados en Elementor muestra cómo colocar un ícono dentro de un botón y darle su propio color flotante.
Solución de problemas de iconos Elementor
La mayoría de los problemas de iconos se reducen a un archivo de fuente que no se está cargando o a una configuración que no se guardó.
Los iconos se muestran como cuadrados vacíos
La fuente del icono no se está cargando. Borre el caché de Elementor en Elementor > Herramientas > General (Borrar archivos y datos), luego borre su complemento de almacenamiento en caché y su CDN. Si sus fuentes se cargan desde una CDN en otro dominio, verifique que permita solicitudes de archivos de fuentes de origen cruzado.
Elementor no aceptará mi SVG
Active Habilitar cargas de archivos sin filtrar en Elementor > Configuración > Avanzado, luego intente cargar nuevamente. Si aún falla, abra el SVG en un editor de texto y verifique que sea un archivo SVG real y no un PNG con una extensión .svg.
Falta un paquete de complementos maestros en el recolector
Verifique que el interruptor del paquete esté activado en Complementos maestros > Configuración > Extensiones > Biblioteca de íconos y que haya hecho clic en Guardar cambios, luego recargue el editor. Feather Icons, Remix Icon y Teenyicons también necesitan Master Addons Pro con una licencia activa.
Las fuentes de iconos ralentizan la página
Cada fuente de icono es un archivo más para descargar el navegador. Quédese en uno o dos paquetes para una apariencia consistente y lea nuestra guía acelerar los sitios web de Elementor, que cubre la opción Iconos de fuentes en línea de Elementor para representar íconos como SVG en lugar de archivos de fuentes.
Preguntas frecuentes
¿cómo agrego íconos en Elementor?
Agregue un widget de ícono, o cualquier widget con un campo de ícono, luego pase el cursor sobre la vista previa del ícono en la pestaña Contenido y haga clic en Biblioteca de íconos. Elija un ícono de Font Awesome o cualquier conjunto de íconos que haya agregado, luego haga clic en Insertar. Para usar su propio archivo, haga clic en Cargar SVG.
¿puedo usar íconos SVG en Elementor?
Sí. Haga clic en el botón Cargar SVG en cualquier campo de icono y elija su archivo. WordPress bloquea las cargas SVG de forma predeterminada, por lo que si Elementor lo rechaza, active Habilitar cargas de archivos sin filtrar en Elementor > Configuración > Avanzado e inténtelo nuevamente.
¿necesito Elementor Pro para agregar íconos personalizados?
No para cargas SVG individuales ni paquetes de íconos de complementos maestros. Importar una fuente de ícono completa desde Fontello, IcoMoon o Fontastic .zip a través de Custom Icons y conectar Font Awesome Pro son funciones de Elementor Pro.
¿cómo cambio el color de un icono al pasar el cursor en Elementor?
Seleccione el widget, abra la pestaña Estilo y expanda la sección Icono. Cambie de Normal a Flotar y establezca el color flotante allí. Los iconos de fuente toman el color de inmediato; un SVG cargado solo cambia de color si sus rutas no tienen relleno fijo.
¿Dónde puedo encontrar la clase CSS para un icono?
Elementor genera iconos de fuente como <i> etiqueta con los nombres de las clases del conjunto, que puedes ver con la herramienta de inspección de tu navegador. Para los paquetes de complementos maestros, cada prefijo aparece en Documentos de la biblioteca de iconos, por ejemplo jltma-ri- para icono de remezcla.
Pensamientos finales
Agregar íconos personalizados en Elementor se reduce al lugar donde comienzan sus íconos. Un único SVG va directamente al campo de iconos. Una fuente de ícono de marca ingresa a través de los íconos personalizados de Elementor Pro, junto a Font Awesome Pro si tiene un kit. Y si prefieres recogerlo o cargarlo, los ocho paquetes de complementos maestros colocan 5344 íconos más en la misma ventana emergente.
Para ver cada paquete con muestras y recuentos de íconos antes de encender algo, explore Biblioteca de iconos Elementor página.
Lectura relacionada
- Configuración de la biblioteca de iconos: conmutadores, prefijos CSS y solución de problemas para los ocho paquetes
- Control de iconos en Widget Builder: utilice los paquetes en sus propios widgets personalizados
- Cómo agregar un ícono de Font Awesome a un botón de envío del Formulario de contacto 7
- Todos los widgets y extensiones de Master Addons
