Tipos de iconos en Elementor Pro
Con Elementor Pro podemos utilizar tres formatos de iconos:
- Iconos de fuentes de web: Elementor Pro incluye una biblioteca de iconos basadas en fuentes de web, como son Font Awesome, Material Icons y otras.
- SVG (Scalable Vector Graphics): También es compatible con el formato SVG, que es un formato de gráficos vectorial escalable, que se pueden ampliar y reducir sin perder calidad.
- Iconos de fuentes personalizadas: Puedes cargar tus propias fuentes personalizadas y utilizar los caracteres de esas fuentes como iconos.
Los iconos de fuentes personalizadas son conjuntos de iconos que se crean utilizando fuentes tipográficas personalizadas en lugar de fuentes estándar.
Dónde descargar iconos de fuentes personalizadas
- icoMoon: Es una herramienta popular para crear fuentes de iconos personalizadas. Puedes seleccionar iconos de su biblioteca y luego descargarlos en formato ZIP para subirlos a Elementor Pro.
- Fontello: Otro generador de fuentes de iconos que permite seleccionar iconos de diferentes conjuntos, para más tarde descargarlos en un ZIP.
- Fontastic: Con esta última herramienta puedes crear, de una forma rápida y fácil, tus fuentes de iconos en segundos. Tiene más de 9.000 iconos disponibles.
Cómo seleccionar y descargar fuentes
Nos vamos al generador de fuentes de icoMoon, seleccionamos los iconos que van a formar parte de nuestro paquete de fuentes personalizadas y hacemos clic en El botón situado en la parte inferior derecha, si quieres generar un ZIP con las fuentes (Generate Fonts F) o en el botón de la parte izquierda, si quieres generar un SVG/PNG (Generate SVG & more).
En la siguiente pantalla, vemos los iconos que vamos a empaquetar en el ZIP.
Clic en Font Download.
Añadir iconos personalizados
En WordPress nos dirigimos a Elementor > iconos personalizados > añadir nuevo.
Podemos agregar nuestro archivo ZIP con las fuentes arrastrándolo a esta pantalla o haciendo clic en el botón para navegar hasta él.
Utilizar los iconos personalizados
Sólo nos queda probar los iconos personalizados que hemos añadido.
Para ello, nos vamos a editor de Elementor, añadimos el widget de icono y hacemos clic en Biblioteca de iconos, donde podemos ver los iconos que disponemos y entre ellos, un apartado nuevo, llamado Mis Bibliotecas, donde estarán los nuevos iconos personalizados (icoMoon).
Seleccionamos uno de ellos y aceptamos.
Otra opción es subir el icono que queremos utilizar en formato SVG.
Volvemos a añadir el widget de icono y elegimos la opción Subir SVG.
Icono en formato SVG.
WordPress tiene ciertas restricciones de seguridad relacionadas con el formato SVG. Esto se debe a que los archivos SVG son documentos XML y pueden contener scripts o referencias externas, lo que puede suponer un riesgo.
