Los íconos hacen que cualquier elemento se haga visualmente más atractivo. Además llevan significado en sí mismos y ayudan en la experiencia de usuario.

Por otro lado, en el caso de los íconos de Divi, tienen la ventaja extra de que no pesan mucho (Ya que teóricamente son fuentes y no imágenes), por ende no afectan el rendimiento de nuestra página.

Todas éstas características hacen que los íconos sean elementos de suma importancia dentro de una web.

El Tema Divi viene con una amplia gama de íconos que se pueden utilizar en sus diferentes módulos.

¿Pero qué sucede cuando queremos usar los íconos en lugares dónde no pueden usarse módulos, por ejemplo en el menú?

Echemos un vistazo…

Antes de empezar, ¿Ya tienes el tema Divi con licencia?

Divi es sin lugar a dudas el mejor tema para WordPress y la mejor inversión que puedes hacer para tu web. Si deseas adquirir licencias de Divi para sitios ilimitados y con el soporte de Elegant Themes, puedes obtenerlo desde la web oficial con un 20% de descuento desde aquí.

Por otro lado, si sólo necesitas una licencia para 1 sitio web, puedes adquirirla desde Rapihosting, la web de nuestro servicio de Hosting para WordPress, que también ofrece el servicio de activaciones del tema Divi para 1 sitio web con una licencia original de por vida, a un precio accesible para todos. Así que, si deseas el tema Divi con actualizaciones automáticas de por vida, acceso a las plantillas Premium y todas las funciones desbloqueadas, sigue éste enlace.

Los íconos Divi pueden llamarse con CSS

Cada ícono Divi tiene un “numerito” que los identifica (Cada ícono, con su respectivo “numerito o código” lo puedes ver al final de éste artículo). Utilizando su “numerito” identificador, podemos llamarlos mediante un poco de código CSS.

Como sé que muchos tienen códigofobia, les he creado (como ya se ha vuelto costumbre en mi blog) una herramienta que generará automáticamente los códigos necesarios por ustedes. Incluso pudiendo definir el tamaño y el color que queremos que tenga el ícono.

Primero demos un vistazo a cómo generar el código fácilmente con la herramienta, luego veremos qué hacer con ellos.

Te puede Interesar:

Módulo Blog Divi: Mejorando la paginación por defecto + Incluye Herramienta Gratuita

Paso 1: Generar el Código necesario para añadir íconos Divi

Para visualizar la herramienta que nos generará el código necesario, solo dejen su correo en el formulario de abajo y hagan click al botón: «Ver Herramienta».

Y automáticamente aparecerá.

Adicionalmente, se te enviará a tu correo un mail de confirmación para ser añadido a mi lista. Es opcional, pero déjame decirte que con la comunidad de mi lista comparto nuevos trucos, códigos, tutoriales, promociones, sorteos y obviamente más herramientas. Además que tenemos una comunicación más directa para compartir y resolver dudas. Así que confirma tu correo.

Utilizando la herramienta

Lo primero que nos piden es crearle un nombre para el icono, es necesario para el CSS. Pueden ponerle cualquier palabra que se les ocurra. Preferiblemente sólo utilizando letras o números o si desean guiones. Es importante recalcar que si van a utilizar dos íconos distintos (creados por la herramienta), en el mismo diseño, no deben ponerle el mismo nombre.

Luego les pedirán que identifiquen el ícono que desean usar. Al final de éste artículo he dejado una lista de todos los íconos de Elegant Themes con sus respectivos íconos identificadores. Simplemente eligen uno y copian su código identificador.

Por último también pueden elegir qué tamaño en píxeles desean que tenga el ícono (poner sólo el valor, no las unidades. Por ejemplo: 25 en vez de 25px), y el color del mismo.

Una vez completado esos campos, le hacen click en generar código y listo, aparecerá todo lo que necesitamos.

Paso 2: ¿Qué hacemos con esos códigos? Copiando y pegando el código 1

Se habrán dado cuenta que se generan dos códigos. El código 1 es el CSS que generará al ícono. Pueden añadirlo en cualquier campo de CSS personalizado. Por ejemplo, en un módulo código entre las etiquetas style. (Ej: <style> Código 1 </style>), en tal caso sólo funcionará para esa página dónde se encuentra el módulo código.

Como en éste ejercicio voy a agregar íconos para el menú, necesitamos que el CSS se aplique a todo el sitio web. Por ello voy a pegar el código 1 en el editor de CSS global de Divi. El cuál puedes encontrar en las opciones del tema Divi, desde el panel de WordPress. Obviamente después de pegar, guardamos cambios.

Te puede Interesar:

Cómo y dónde añadir CSS personalizado el tema Divi

Paso 3: Ubicando el ícono Divi: Copiando y pegando el código 2

A partir de éste punto el ícono ya existe (Porque ya hicimos el paso anterior). Lo único que falta, es que se llame al ícono dónde queremos que aparezca. Para ello, simplemente bastará con pegar el código 2 en esa posición.

Por ejemplo, como se ve en la imagen de abajo, lo he pegado en el módulo texto y vemos que aparece el ícono perfectamente.

(Cabe mencionar que para agregar código en el módulo texto, debes estar en la pestaña “texto” y no en “visual”)

Actualización: Para adaptar éste truco a las últimas versiones de Divi, hemos agregado un pequeño cuarto paso. Sigue leyendo.

También puedes ubicar los íconos en el Menú

Simplemente irías donde se agregan las etiquetas de navegación de los menús en WordPress, como se ve en la imagen de abajo y pegarías el código 2 allí.

Los íconos en los menús y cabeceras más usados son los de redes sociales, que se ven de la siguiente manera:

Actualización: Paso 4 – Debemos desactivar los íconos dinámicos

¿Haz seguido todos los pasos y aún no te aparece el ícono?

¿Te aparece el ícono agregado a tu menú en algunas páginas y en otras no?

Debido a las últimas actualizaciones de Divi, la configuración por defecto de performance (que mejora la velocidad de la web), tiene la opción de íconos dinámicos activada.

Ésta opción hace que no se carguen los iconos en páginas dónde ningún módulo las esté utilizando. Y debido a que nuestros íconos creados con éste truco, son digamos hechos artesanalmente y no generados por un módulo de manera nativa, no cargará nuestros íconos en todas las páginas. (Sólo en las que se esté utilizando el módulo ícono o anuncio).

Para evitarnos todo ese loquerío, simplemente hay que desactivar esa opción, que puedes encontrar en las opciones de Tema>General> Pestaña performance. Tal como se ve en la imagen de abajo.

¿Eres fanático del tema Divi y estás armando tu web con él?

Entonces, mi tienda de Layouts y Plantillas para Divi te va a encantar!!