Añadir iconos personalizados en Elementor Pro

Iconos con Elementor Pro
Facebook
Twitter

Tabla de contenidos

Tipos de iconos en Elementor Pro

Con Elementor Pro podemos utilizar tres formatos de iconos:

  1. 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.
  2. 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.
  3. 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.

Widget icono en Elementor

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).

Seleccionar fuentes en icoMoon
Seleccionar fuentes en icoMoon

En la siguiente pantalla, vemos los iconos que vamos a empaquetar en el ZIP.

Clic en Font Download.

Descargar fuentes seleccionadas

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.

Nuevos iconos personalizados

Utilizar los iconos personalizados

Los nuevos iconos añadidos

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.

android
Subir 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.

Si necesitas Elementor Pro o un plan de hospedaje para tu página web, puedes obtener estos servicios a través de mis enlaces de afiliado.

Elementor Pro
Webempresa (70% de descuento hasta el 31 de mayo).

Gracias por tu apoyo.

Te puede interesar...

¿Por qué es mejor añadir las fuentes en local?. ¿Cómo puedo agregar las fuentes en local en Elementor Free /
Elementor te ayudará a crear tu Sito Web. Aprende a configurar e instalar Elementor y actualizarlo a la versión PRO.

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Información sobre protección de datos

  • Responsable: Ramón Alonso
  • Fin del tratamiento: Controlar el spam, gestión de comentarios
  • Legitimación: Tu consentimiento
  • Comunicación de los datos: No se comunicarán los datos a terceros salvo por obligación legal.
  • Derechos: Acceso, rectificación, portabilidad, olvido.
  • Contacto: info@ramonalonso.com.

Acepto la política de privacidad