El tema Divi incluye iconos para añadir en su módulo Anuncio, pero no incluye la posibilidad de agregar iconos a los menús, como hacen otras plantillas de WordPress.

Aún así, hay diferentes formas de añadir iconos a los Menús de la plantilla Divi, ya sea el Menú Principal, el Menú Secundario, el Menú de Categorías o cualquier otro que tengas creado. Y entre ellas, una de la más simples consiste en instalar un plugin que aporte esa funcionalidad.

¿Por qué añadir iconos a tu web?

Las razones por las que incluir iconos a tu página web pueden ser, por ejemplo, por hacerla más interactiva, por hacer más visible un menú o una categoría que te interese resaltar o por sustituir una imagen por este elemento.

Los iconos funcionan con prácticamente cualquier navegador y apenas tienen peso en la web, por lo que no afectan a la velocidad de carga. Además, aunque se aumente su tamaño, se siguen visualizando con la misma calidad.

Puedes incrustar iconos en los menús de tu página web con CSS y HTML o también con ayuda de alguna extensión. En este post voy a optar por la opción más simple y rápida que es la de las extensiones o plugins y en otra ocasión veremos la opción más compleja.

2 Plugins para añadir un icono al Menú de Divi

Los siguientes plugins son gratuitos y muy sencillos de usar. Lo explico paso por paso.

Plugin 1: Menu Icons

Con el plugin para WordPress Menu Icons puedes incluir un icono a los títulos de los menús de tu web. Además, te permite seleccionar la ubicación exacta y el tamaño del icono.

Para empezar a usarlo:

  1. Sube el plugin a tu panel de WordPress en Plugins -> Añadir nuevo.
  2. Ve a Apariencia -> Menús y selecciona el menú al que deseas añadir el icono.
  3. Se habrá añadido el campo Icono a cada pestaña de los elementos del Menú. Clica en él y elige el icono que quieras añadir, la ubicación y el tamaño. Incluso puedes añadir solo iconos para el menú y eliminar los títulos (opción ocultar etiqueta).
    El CSS del icono será el perteneciente al tema de Divi.
  4. Guarda cambios y comprueba que se han añadido los iconos correctamente al menú.

plugin iconos wordpress

plugin añadir icono

agregar icono tema divi

De esta manera, puedes incluir un icono a cualquier menú que tengas creado en tu página web.

Como este ejemplo de Menú Principal en la parte superior de una web con Divi:

añadir icono menú web

O este ejemplo de Menú de Categorías en la barra lateral de un blog:

añadir icono menú categorias

Plugin 2: Font Awesome 4 Menus

Este segundo plugin no incluye la opción directa de elegir la ubicación exacta del icono, pero si incluye toda la colección de iconos de Font Awesome, con 675 iconos para elegir.

Podrías implementar la hoja de estilo de Font Awesome en la plantilla Divi, pero esta acción es más compleja. Si te interesa una alternativa más sencilla, te recomiendo este plugin.

Para empezar a utilizar el plugin Font Awesome 4 Menus:

  1. Sube el plugin a tu panel de WordPress en Plugins -> Añadir nuevo.
  2. Ve a Apariencia -> Menús y selecciona el menú al que deseas añadir el icono.
  3. Arriba en «Opciones de pantalla», activa la casilla «Clases CSS».
  4. Se abrirá un campo de Clases CSS a cada pestaña de los elementos del menú. Añade en este campo el icono que desees agregar escribiendo la etiqueta que le asigna Font Awesome con el prefijo «fa-«.
    Para ello, busca tus iconos en el listado de iconos de Font Awesome.
  5. Guarda cambios y comprueba que se han añadido los iconos correctamente al menú de tu web.

plugin iconos font awesome

menús divi iconos

divi fonts awesome

añadir iconos font awesome en divi

Este es un ejemplo de Menú Principal con iconos de Font Awesome en Divi:

divi iconos font awesome

Y este es un ejemplo de Menú de Categorías en una barra lateral de una web con Divi:

menú categorías iconos font awesome

Con ambos plugins tienes la ocpión de añadir una gran variedad de iconos a los menús de tu web, incluso puedes añadir los iconos de las Redes Sociales.

He elegido estos dos plugins por su simplicidad, por sus valoraciones y porque como puedes ver en las capturas de pantalla, los he probado y funcionan correctamente. Aún así, si conoces algún otro plugin u otra forma de añadir iconos a un Menú de Divi fácilmente, no dudes en hacer un comentario más abajo 😉

¿Quiéres personalizar aún más el Menú Principal? Echale un vistazo a este post con tres códigos para añadir CSS al Menú de Divi.

Uso de cookies

Este sitio web utiliza cookies para que usted tenga la mejor experiencia de usuario. Si continúa navegando está dando su consentimiento para la aceptación de las mencionadas cookies y la aceptación de nuestra política de cookies, pinche el enlace para mayor información.plugin cookies

ACEPTAR
Aviso de cookies

¡APRENDE MÁS SOBRE DIVI!

¿Quieres estar al día de todo lo que compartimos en Divesp?

Consentimiento

¡Gracias! Ahora VE A TU BANDEJA DE ENTRADA para confirmar tu suscripción.