¿qué es la configuración de la biblioteca de iconos? La extensión Biblioteca de iconos en Master Addons agrega ocho paquetes de iconos a la ventana emergente Biblioteca de iconos de Elementor. Esta guía cubre encender los paquetes, seleccionar y diseñar un ícono en un widget y solucionar problemas comunes. Para obtener una descripción general de cada paquete y de lo que cada uno...
El Biblioteca de iconos la extensión en Master Addons agrega ocho paquetes de íconos a la ventana emergente de la Biblioteca de íconos de Elementor. Esta guía cubre encender los paquetes, seleccionar y diseñar un ícono en un widget y solucionar problemas comunes. Para obtener una descripción general de cada paquete y lo que le conviene a cada uno, consulte el Biblioteca de iconos Elementor página.
Antes de empezar #
Necesita Elementor y Master Addons instalados y activos. Feather Icons, Remix Icons y Teeny Icons son paquetes Pro, por lo que aparecen solo cuando Master Addons Pro está activo con una licencia válida.
Paso 1: enciende los paquetes de iconos #
- En su panel de WordPress, vaya a Complementos maestros > Configuración.
- Abra la pestaña Extensiones.
- Haga clic en el filtro Biblioteca de iconos para mostrar solo los paquetes de iconos.
- Enciende los paquetes que desees. El interruptor Habilitar todo enciende o apaga los ocho a la vez.
- Haga clic en Guardar cambios.
La tarjeta de configuración llama a un paquete “Fuente iónica”. En la ventana emergente Elementor, el mismo paquete aparece como “Iconos de fuentes icónicas”. Es la fuente icónica establecida por iconmonstr.
Encienda únicamente los paquetes que planea utilizar. Un paquete que está desactivado no aparece en la ventana emergente y sus archivos de fuente no se cargan en el editor.
Paso 2: abra la biblioteca de iconos en un widget #
- Edita una página con Elementor.
- Agregue cualquier widget que tenga un campo de ícono, como ícono, cuadro de ícono, lista de íconos, botón o íconos sociales.
- En la pestaña Contenido, pase el cursor sobre la vista previa del icono y haga clic en Biblioteca de iconos.
Paso 3: Elija un paquete en Mis bibliotecas #
La ventana emergente enumera los conjuntos Font Awesome de Elementor en la parte superior. Los paquetes de complementos maestros se encuentran debajo de ellos debajo de Mis bibliotecas, y cada uno tiene una pequeña insignia “M”. Haga clic en un paquete para explorar sus íconos.
Paso 4: busque en cada paquete #
Haga clic en Todos los iconos y escriba una palabra en el cuadro Filtrar por nombre. Los resultados incluyen Font Awesome y todos los paquetes de complementos maestros que haya activado. Al buscar “cohete”, por ejemplo, devuelve íconos de Font Awesome, íconos de línea simples, íconos de fuente icónicos, íconos lineales e íconos Remix.
Paso 5: Inserte el icono #
Haga clic en el icono que desee para seleccionarlo y luego haga clic en Insertar. El icono aparece en el widget de inmediato.
Paso 6: diseña el icono #
Los iconos de estos paquetes utilizan los controles de estilo normales del widget. Abra la pestaña Estilo y expanda la sección Icono para configurar el color principal, el tamaño y la rotación. Utilice la pestaña Flotar para cambiar el color al pasar el cursor.
El siguiente ejemplo utiliza un icono de cada paquete en los widgets de Icon Box con el mismo color y tamaño.
Referencia del paquete de iconos #
| Nombre en la configuración | Nombre en la ventana emergente | Iconos | Prefijo de clase CSS | planificar |
|---|---|---|---|---|
| Iconos elementales | Iconos elementales | 398 | eicon- | |
| Iconos de línea simples | Iconos de línea simples | 189 | icon- | |
| Fuente iónica | Iconos de fuentes icónicos | 300 | im- | |
| Iconos lineales | Iconos lineales | 170 | lnr- | |
| Iconos materiales | Iconos materiales | 1.144 | jltma-material-icon- | |
| Iconos de plumas | Iconos de plumas | 272 | jltma-feather-icon- | profesional |
| Remezcla iconos | Remezcla iconos | 2.271 | jltma-ri- | profesional |
| Iconos adolescentes | Iconos adolescentes | 600 | jltma-ti- | profesional |
Cada icono se emite como un <i> elemento con la clase de paquete y la clase de icono, por ejemplo <i class="jltma-ri jltma-ri-rocket-2-line"></i>. Puede orientar estas clases en CSS personalizado.
Cómo se ve cada paquete #
Iconos elementales #
Fuente de icono propia de Elementor: los 398 glifos que utiliza el editor Elementor para formatear texto, diseñar y símbolos de widgets. Elija cuando desee iconos que coincidan con la interfaz de Elementor.
Iconos de línea simples #
189 iconos de contorno fino para personas, teléfonos, mapas, navegación y otros símbolos cotidianos. El trazo de luz funciona bien en diseños mínimos.
Iconos de fuentes icónicos #
fuente icónica de IconMonstr, con 300 iconos sólidos. Las flechas, los ángulos y los caretes constituyen una gran parte del conjunto, la mayoría en versión simple y circular.
Iconos lineales #
170 íconos de líneas de Linearicons, incluidos el hogar, la nube, la cerradura, el engranaje y el corazón.
Iconos materiales #
Iconos de material de Google: 1144 íconos completos en el estilo Material Design, que cubren alertas, controles de medios y acciones de interfaz comunes.
Iconos de plumas (Pro) #
272 iconos dibujados en una cuadrícula de 24 piezas con un trazo ligero y uniforme y extremos redondeados.
Iconos de remezcla (Pro) #
El paquete más grande, con 2271 iconos. La mayoría de las formas vienen en una versión de línea y una versión de relleno, por lo que puedes cambiar de contorno a sólido al pasar el cursor o para marcar un elemento activo.
Iconos adolescentes (pro) #
600 iconos pequeños y de contorno mínimo diseñados para mantenerse claros en tamaños pequeños.
Usando los paquetes en Widget Builder #
Los mismos paquetes están disponibles en el selector de iconos del control de iconos de Widget Builder. Ver Control de iconos en Widget Builder para configuración.
Solución de problemas #
Falta un paquete en la ventana emergente #
Verifique que su interruptor esté activado en Complementos maestros > Configuración > Extensiones > Biblioteca de íconos, haga clic en Guardar cambios y luego recargue el editor Elementor.
Faltan iconos Feather, Remix o Teeny #
Estos paquetes necesitan Master Addons Pro con una licencia activa. Verifique la licencia en Master Addons > Cuenta.
Los iconos se muestran como cuadrados vacíos o no aparecen en la página #
Vaya a Elementor > Herramientas > General y haga clic en Borrar archivos y datos en Elementor Cache. Luego borre cualquier complemento de almacenamiento en caché y su CDN. Si sus fuentes se envían desde una CDN en otro dominio, asegúrese de que permita solicitudes de origen cruzado para archivos de fuentes.
Apagar una mochila #
Antes de apagar un paquete, verifique que ninguna página use íconos del mismo.
Tutorial en vídeo #
Relacionado #
- Biblioteca de iconos Elementor de Master Addons: los ocho paquetes y lo que le conviene a cada uno
- Control de iconos en Widget Builder
