En este rápido y sencillo tutorial, verás cómo añadir iconos al menú de Divi. Es muy sencillo y, lo más importante, está al alcance de cualquier principiante.
No es necesario instalar una extensión compleja que hará que su sitio sea aún más pesado. Verás que con un poco de código CSS está todo hecho!
- 1 - ¿Por qué añadir iconos al menú de Divi?
- 2 - Añadir una clase CSS a los elementos del menú
- 3 - Insertar iconos en el menú de Divi con CSS
- 4 - Elija los iconos proporcionados por Divi
- 5 - Los iconos del menú Divi funcionan para todos los tipos de cabecera
- 6 - Iconos en el menú Divi en lugar de texto
- 7 - Insertar un icono personalizado en lugar del texto del menú
Anuncio: este artículo contiene enlaces de afiliación que reconocerá fácilmente. Los enlaces clásicos están en púrpura y los enlaces patrocinados están en rosa.
1 - ¿Por qué añadir iconos al menú de Divi?
Bueno, porque está de moda, por supuesto. ¿O porque un icono habla a todo el mundo?
A primera vista, el usuario sabrá a qué elemento del menú debe ir. ¿Esto puede (quizás) mejorar la experiencia del usuario?
Más allá de estas razones, los iconos alegran una página web, rompen la monotonía y visten el texto. Además, son nativos de Divi... ¿Por qué privarse?
¿Sabías que puedes probar Divi gratis? Ir a esta página y haz clic en "PRUEBA GRATUITA
2 - Añadir una clase CSS a los elementos del menú
En primer lugar, debe habilitar la adición de Clases CSS en su menú.
Es muy sencillo. Vaya a la pestaña Apariencia > Menú y abra las opciones de pantalla ( arriba a la derecha). Marque "Clases CSS".
Esta opción permite que aparezca un nuevo campo dentro de cada elemento del menú: el campo Clases CSS.
A continuación, utilizará este campo para asignar una clase a cada elemento del menú en el que desee añadir un icono.
Para mi ejemplo, he utilizado la clase " ld-menu-home ", pero podría haber utilizado la clase "tartempion " y no habría tenido ningún impacto. Así que utilice este campo para insertar sus Clases.
Tenga en cuenta que no debe utilizar acentos, caracteres especiales ni espacios. Asigne una clase diferente a cada elemento si desea mostrar diferentes iconos.
No esperes más. Descubra el tema Divi aquí !
3 - Insertar iconos en el menú de Divi con CSS
Una vez que hayas asignado una Clase a cada elemento del menú, puedes añadir CSS para que los iconos aparezcan en el menú Divi.
Si lo necesita, lea este artículo que explica todas las formas de añadir código personalizado en Divi (incluido el CSS).
Ve a la pestaña Apariencia > Personalizar > CSS adicional y copia y pega el siguiente código:
.ld-menu-home > a:before {
font-family: 'ETMODULES';
content: '\e009'; /* change icon code here */
text-align: center;
margin-right: 10px;
margin-left: -10px;
color: #4d2def; /* change icon color here */
font-size: 1em; /* change icon size here */
transition: all .3s ease;
}
Explicación:
- El .ld-menu-home llama a la clase definida anteriormente en los elementos del menú (capítulo 2 de este artículo).
- font-family: 'ETMODULES ' indica la fuente de los iconos que debe utilizarse. Esta fuente es nativa en Divi, sólo tienes que llamarla.
- content: '\e009'; indica qué icono mostrar.
- color: #4d2ef; indica el color del icono (un sitio como Código de colores HTML puede ayudarle a encontrar el color adecuado).
Si quieres insertar un icono diferente para cada elemento del menú, tendrás que duplicar este código tantas veces como elementos tengas y tendrás que cambiar la clase CSS y el código del icono cada vez.
Por ejemplo, aquí está el CSS que he utilizado para que cada elemento de mi menú muestre un icono diferente:
.ld-menu-home > a:before {
font-family: 'ETMODULES';
content: '\e009'; /* change icon code here */
text-align: center;
margin-right: 10px;
margin-left: -10px;
color: #4d2def; /*change icon color here */
font-size: 1em; /*change icon size here */
transition: all .3s ease;
}
.ld-menu-about > a:before {
font-family: 'ETMODULES';
content: '\7c';
text-align: center;
margin-right: 10px;
margin-left: -10px;
color: #4d2def;
font-size: 1em;
transition: all .3s ease;
}
.ld-menu-room > a:before {
font-family: 'ETMODULES';
content: '\e023';
text-align: center;
margin-right: 10px;
margin-left: -10px;
color: #4d2def;
font-size: 1em;
transition: all .3s ease;
}
.ld-menu-blog > a:before {
font-family: 'ETMODULES';
content: '\e104';
text-align: center;
margin-right: 10px;
margin-left: -10px;
color: #4d2def;
font-size: 1em;
transition: all .3s ease;
}
.ld-menu-contact > a:before {
font-family: 'ETMODULES';
content: '\e010';
text-align: center;
margin-right: 10px;
margin-left: -10px;
color: #4d2def;
font-size: 1em;
transition: all .3s ease;
}
.ld-menu-dispo > a:before {
font-family: 'ETMODULES';
content: '\5a';
text-align: center;
margin-right: 10px;
margin-left: -10px;
color: #4d2def;
font-size: 1em;
transition: all .3s ease;
}
.ld-menu-search > a:before {
font-family: 'ETMODULES';
content: '\55';
text-align: center;
margin-right: 10px;
margin-left: -10px;
color: #4d2def;
font-size: 1em;
transition: all .3s ease;
}
Y aquí está el resultado en imágenes:
¿Necesitas más recursos sobre Divi? Visite el blog de ElegantThemes que está lleno de ideas y tutoriales. O aprenda a utilizar este tema de forma eficiente con mi formación en Divi !
4 - Elija los iconos proporcionados por Divi
Los códigos de los iconos para mostrar, ¡no los he inventado yo! Sólo tiene que consultar la documentación, para ello, vaya a la página oficial de Divi Icons.
En el banco de iconos, verás que hay un código para cada icono. Por ejemplo, el código del icono de Inicio es . Para utilizarlo, debe eliminar el prefijo y el punto y coma (; ). El código del icono de la casa es entonces e009.
Otros ejemplos:
- El código del icono del reloj: 7d
- El código del icono del candado: 7º
- El código del icono de la imagen : e005
- El código del icono de la bombilla : e007
- etc.
Estos son los códigos que tendrás que transferir al CSS, en la línea de "contenido " para mostrar los iconos en el menú Divi:
content: '\e009';
5 - Los iconos del menú Divi funcionan para todos los tipos de cabecera
No importa qué tipo de cabecera se utilice en su sitio, los iconos se mostrarán en su menú Divi: la cabecera por defecto, la cabecera centrada, la cabecera de SlideInetc.
¡Eso es!
Para ir más allá, sugiero esta lista de lecturas relacionadas:
- Cabecera y menú de Divi: todos los ajustes
- Utilice Icomoon en WordPress
- Añadir imágenes al Mega Menú de Divi
- Consigue 300 iconos más gratis
6 - Iconos en el menú Divi en lugar de texto
Muchos de vosotros habéis preguntado en los comentarios: queréis mostrar un icono en lugar del texto del menú y no además del texto...
Aquí hay una actualización del artículo para completar la primera edición...
- En la pestaña Apariencia > Menú, abre las opciones de pantalla y activa la opción Clase CSS, si no está ya activada.
- Coloca tus páginas en el menú como de costumbre, pero en lugar de mantener el título de navegación por defecto, copia y pega el código de los iconos de Divi que desees como se explica en el capítulo 4 de este artículo. Sin embargo, se mantiene el código completo: por ejemplo, el código del icono de la página de inicio es o
- Luego coloque una clase CSS, para mi ejemplo uso ld-icon-menú.
- Renueve según sea necesario y guarde los cambios.
- Por último, vaya a la pestaña Apariencia > Personalizar > CSS adicional para colocar el siguiente código:
/*----Replace text menu with icons---- */
.ld-icon-menu a {
font-family: 'ETmodules';
font-size: 18px !important;
color: #ffffff !important;
}
.ld-icon-menu a:hover {
font-size: 16px !important;
transform: rotate(15deg);
}
Ahora cuando guardas, tu menú Divi muestra iconos en lugar de texto! ¡Eso es genial!
7 - Insertar un icono personalizado en lugar del texto del menú
Si ahora no te gustan los iconos nativos de Divi, puedes utilizar iconos personalizados que importes a tu biblioteca multimedia.
En un artículo anterior, explicó cómo insertar imágenes en el mega menú de Divi.
Se trata de una variante del...
- Importa tus imágenes a la biblioteca multimedia y copia sus URLs.
- A continuación, vaya a la pestaña Apariencia > Menú. Abra un elemento de menú existente o coloque una nueva página en su menú. En el campo "Título de navegación" copie el siguiente código:

- Añade una clase CSS a tu elemento de menú, por ejemplo : ld-icon-import. Guarda tu menú.
- Por último, vaya a la pestaña Apariencia > Personalizar > CSS adicional para colocar el siguiente código:
/*----Align imag with text menu---- */
.ld-icon-import img {
vertical-align: text-bottom !important;
}
Este código le permite mejorar la visualización de la imagen, pero es opcional o depende del tipo de imagen que esté utilizando. Puede que tengas que adaptarlo a tus necesidades.
Aquí tienes... ¡Disfruta!
¿Lo sabías? Puede probar Divi de forma gratuita visitando en esta página y haciendo clic en "PRUEBA GRATUITA
Thank you for the tips. I’m having an issue, the codes appear wrong. For example, I enter ‘\ 69’ and, instead of the double document, play appears, which is the code ‘\ 49’. Any suggestion?
Hello Marcelo,
I don’t see where could be this issue…
Bonjour Lycia,
Merci pour ce tuto bien utile. Une question cependant:
– En ce qui me concerne je souhaite remplacer le mot « home » par la maison… Comment puis-je faire cela? Lorsque je laisse le champ vide ça ne fonction pas.
– Comment changer la couleur selon les états « active », survol etc? J’ai essayé mais je ne dois pas appeler les bons éléments puisque ca ne fonctionne pas!
Merci pour votre aide!
Salut Anaïs, pour le mot « home » ne s’agit-il pas simplement du nom que tu as donné à ta page ? Dans ce cas, c’est facile à modifier. Pour changer les états « active » et « survol » :
– « Active » : c’est une option disponible dans Apparence > Personnaliser > En-tête et navigation > Barre primaire > Couleur du lien actif
– « Survol » : c’est du CSS pur.
Salut, super tuto comme toujours.
Mais si on veut n’avoir que l’icône, sans le texte ?
J’ai essayé de bricoler le CSS mais ça marche pas… si quelqu’un a une idée je prends !
Merci !
Merci Pat de poser cette question ! je me demande la même chose !
Comment rajouter une îcone seule ? : Par exemple, je voudrais rajouter une icône « bonhomme » pour la création de compte (mais sans le texte « compte »)
Salut Adline et Pat ! Voilà, j’ai mis l’article à jour pour répondre à votre question : chapitre 6 et 7.
Bonjour et merci pour ce tuto, cependant je souhaite également utiliser uniquement l’icone « home » () mais j’ai un carré blanc qui s’affiche à côté de mon icône dans mon mon menu si je mets le le code de l’icône Divi dans le titre de la navigation.
Salut Karine, tu as bien suivi le tuto ? Si tu mets le bon code comme indiqué, ça doit marcher.
Merci beaucoup pour ta réponse. J’ai en effet bien suivi le tuto avec le code -- qui correspond à l’icône « home » de Divi. Et j’ai exactement le même carré que celui qui s’est affiché dans mon commentaire précédant.
En alternative, pour ne pas avoir ce carré, j’ai remplacé le titre de mon menu par un point (.) mais ce point à côté de l’icône n’est pas très propre dans ma barre de navigation.
url du site : https://ligue-de-squash-pdl.karine-design.fr/
Hello Karine, si tu lis bien mon article : le code -- doit se placer sans texte, sinon tu veux le texte à côté, tu dois utiliser seulement le code -e074-
Là ça devrait marcher.
Bonsoir Lycia, oui c’est bien ce que j’ai fait à la base, j’ai juste mis le code sans aucun autre texte. Mais ça me met un carré à côté de l’icône (le même carré que dans mon tout premier post ) . C’est pour cette raison que j’ai mis un point pour être une alternative plus discrète que le carré.
Karine, le tuto as été mis à jour la semaine dernière. Si tu veux juste l’icône sans texte, la solution est dans le chapitre 6 du tuto. Si tu veux l’icône + le texte, tu dois supprimer le préfixe &#x
C’est peut-être un espace qui traine et qui empêche le code de fonctionner ?
Reviens nous dire quand tu auras trouvé 😉