Cómo añadir íconos personalizados a Elementor

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 al builder Elementor. Básicamente hay dos formas de hacerlo, la primera es usar Elementor 2.6 o superior que ya cuenta con soporte de íconos personalizados, o bien si cuentas con Elementor 2.5 o menor puedes instalar el plugin Custom Icons for Elementor, y también usaremos un servicio de terceros que se llama Fontello. Vamos a empezar pues con el método para aquellos con Elementor 2.5 o menor:

Método 1, Elementor 2.5 o menor

Para este método necesitarás instalar el plugin Custom Icons for Elementor, que doy por sentado no debe darte ningún problema para añadirlo a tu WordPress. Recuerda que aunque yo o cualquiera te lo diga, revisa varias veces los plugins para ver si son seguros. Sigamos pues…

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 tus íconos personalizados con Fontello

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

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:

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:

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:

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

Método 2: Elementor 2.6 y superior

El día de hoy (7 de julio de 2019) salió Elementor 2.6, y ya trae soporte de íconos personalizados. El funcionamiento es tremendamente sencillo: para cualquier componente que tenga soporte de íconos, sólo tienes que hacer clic en el y después ir a la pestaña de Contenido, y elegir otro o subir uno tuyo en formato SVG:

Como puedes ver, sólo basta con que presiones el botón Biblioteca de íconos para que Elementor te muestre el catálogo de más de 1,500 íconos que trae ahora, o bien puedes presionar Subir SVG para tener tu propio ícono. Recuerda que el formato SVG puede ser considerablemente peligroso si la fuente no es de confianza, dado que puede tener JavaScript dentro. No es para que te enloquezcas con la seguridad, sólo para que estés pendiente de donde lo tomas.