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

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:

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

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.

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

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

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.