Cómo añadir íconos personalizados a Elementor

Por , actualizado en

Constantemente me encuentro usando Elementor y me es necesario usar íconos de Font Awesome para usarlos en contadores y otros diseños; muchas de esas veces necesito íconos que no se encuentran en la distribución estándar de Elementor. Afortunadamente hay una forma sencilla de añadir íconos personalizados a Elementor. Para empezar, necesitarás instalar el plugin Custom Icons for Elementor, y también usaremos un servicio de terceros que se llama Fontello. Vamos a empezar pues:

¿Cómo funciona?

El proceso es como sigue: primero que nada hay que generar un archivo de webfont, que es el que contiene todos tus íconos, y posteriormente hay que añadirlos a la librería con la ayuda de Custom Icons for Elementor, para después poder usarlos. Así que primero que nada vamos a generar el webfont con Fontello:

Paso 1: Genera tu webfont con Fontello

Ve a fontello.com, donde te encontrarás con una página como lo que se ve a continuación:

La página inicial de Fontello

Fontello permite crear un webfont, es decir, una fuente para usarse en la web. Sin embargo, esta fuente puede contener casi cualquier cosa, letras, símbolos, etc. Fontello se enfoca en “reempacar” íconos de varias fuentes distintas, con sólo los íconos que quieras, y tiene la particularidad de que puedes añadir tus propios SVG en caso de que alguna necesidad particular. En la pantalla principal verás la sección Custom icons, que es donde se muestran los íconos personalizados que tu mismo subes con arrastrar y soltar; debajo vienen otros webfonts con los íconos que contienen; haciendo clic sobre cada uno de ellos los eliges para incluir en tu webfont, y también puedes seleccionar un grupo si haces clic izquierdo con el mouse y arrastras sobre un grupo de íconos. para quedar más claros e identificar las diversas partes de Fontello:

Algunas secciones de Fontello explicadas

Como puedes ver, hay la capacidad de buscar (1), cambiar el tamaño de los íconos (2), establecer el nombre del webfont a descargar, un par de íconos personalizados que obtuve de flaticon.com y que yo subí haciendo arrastrar y soltar y también los seleccioné de paso, y también cinco íconos de Fontelico seleccionados (¡debajo hay muchos más!); en total, mi webfont tendrá siete íconos, que como puedes ver se muestra en el botón rojo (6).

Así que básicamente lo que tienes que hacer es clic sobre los íconos que quieras incluir en tu webfont; en el caso de algún ícono personalizado, tienes que subir el archivo haciendo arrastrar y soltar; al hacerlo los íconos no se autoseleccionan, tendrás que hacerlo manualmente para que se incluyan en el webfont. Una vez que hayas terminado de selecionar y/o añadir íconos, estableces el nombre del webfont en (3) y por último haces clic en el botón de Download webfont, el cual provocará la descarga de un archivo ZIP. Este nos servirá en un momento.

Carga el webfont en Custom Icons for Elementor

Ya tenemos nuestro webfont, ahora tenemos que subirlo a Custom Icons for Elementor de modo que los registre en su librería interna. En tu dashboard de WordPress ve a Elementor > Custom Icons y ubica la sección “Upload Fontello Zip”. Ahí puedes arrastrar y soltar el archivo que bajaste hace un momento o bien puedes hacer clic en el botón azul que dice “clic here to browse”. Debajo de esa sección verás otra titulada “Uploaded fonts”, donde deberás ver el que acabas de subir:

Nuestro webfont recien cargado

Usa tus íconos personalizados en Elementor

Finalmente, ve a Elementor y cuando edites contenido y requieras de un componente que haga uso de íconos, mira en la lista y verás los que añadiste recientemente:

Tus nuevos íconos en la lista de Elementor

Como puedes ver, es bastante fácil añadir esos íconos personalizados que te hacen falta en tus páginas con Elementor.

Deja un comentario

Centro de preferencias de privacidad

      Necessary

      Advertising

      Analytics

      Other

      A %d blogueros les gusta esto: