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 usando 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ú
Aviso: 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 de ellos?
¿Sabías que puedes probar Divi gratis? Ir a esta página y haga 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ú al 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 se demore. Descubra el tema Divi aquí !
3 - Insertar iconos en el menú de Divi usando 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 es necesario, lea este artículo que explica todas las formas de añadir código personalizado en Divi (incluido el CSS).
Vaya a la pestaña Apariencia > Personalizar > CSS adicional y copie y pegue el código (fragmento):
.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 de 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, este es 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 eficaz con mi formación en Divi !
4 - Elija los iconos proporcionados por Divi
Los códigos de los iconos que hay que 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 &#x y el punto y coma (;). El código del icono de 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
Varios de vosotros lo habéis pedido 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 lo necesario y guarde los cambios.
- Por último, vaya a la pestaña Apariencia > Personalizar > CSS adicional y coloque allí 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. Guarde su menú.
- Por último, vaya a la pestaña Apariencia > Personalizar > CSS adicional y coloque allí 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é 😉
Thanks so much for this, great tutorial. Used it to add a lock to my client login link.
Great ! 😉
Meric Lycia pour la mise à jour !!! Bravo.
Bonjour Lycia,
Merci pour ce tuto, je suis en train de créer mon site avec Divi et tes formations ainsi que ces astuces m’aident bien !
J’ai cependant une question, dont je ne trouve la réponse nulle part.
J’ai bien modifié le texte d’une de mes pages du menu (la page compte) par une icone. Cependant, lorsque l’on passe en menu mobile (avec le hamburger), la page « compte » passe dans le hamburger. J’aimerais que cette page reste présente visible (comme c’est le cas pour les icones de panier et de recherche) au lieu qu’elle passe dans le menu hamburger, mais je ne sais pas comment faire en CSS…
Aurais-tu une petite idée ?
Merci !
Salut Camille, non ce n’est pas possible. Le CSS ne suffirait pas, il faudrait le coder en PHP, trop compliqué pour moi je pense.
Bonjour Lycia,
Merci beaucoup pour ce tuto et merci de prendre le temps de répondre aux questions, c’est du travail !
Merci Maxime ! Oui c’est du travail, merci de le reconnaître 😉
Bonjour Lycia,
comme d’habitude superbe article très détaillés.
Je voudrai intégrer mes icones que j’ai créé avec Inkscape au format png ou svg et difficile de trouver un tuto sur le web pour ce point en particulier
Une idée svp ?
Bonjour,
J’ai rencontré un problème sur mon menu, les icones s’affichent correctement sur mozilla, mais sur les autres navigateurs, il n’y a pas de problème, pourtant j’ai essayé de changer d’icone et cela marche correctement,
d’où peut venir le problème
J’en ai aucune idée. Peut-être le cache ?
Bonjour !
J’ai un problème d’envergure : il se trouve que lorsque je suis sur « personnaliser » afin de modifier les codes, les icons apparaissent correctement et tout fonctionne. Mais lorsque je me rend directement sur mon blog, aucun icon ne correspond (sauf un, ce qui est bien étrange). J’ai d’ailleurs remarqué que les icons de votre menu ne fonctionnaient pas non plus, peut-être est-ce un problème de navigateur ou autre ?
Va à l’onglet Divi > Option du thème > Créateur et désactive la génération de fichiers statiques
Bonjour Lycia.
Merci pour le coup de pouce ! J’ai une question toutefois. J’ai mis une icone dans le menu (sans texte). Cependant, j’avais un petit carré à la place de mon icône. J’ai dû faire comme si j’avais du texte et mis une balise à la place. Bref, ça fonctionne pour l’ordinateur mais en revanche en version mobile dans mon menu déroulant les icônes sont bien présentes (je peux cliquer dessus), mais impossible de les voir, elles n’apparaissent pas. J’ai essayer de changer la couleur (elles sont en blanc sur le site), mais rien à faire, elles n’apparaissent pas dans mon menu déroulant…
T’a-t-il un bout de CSS à entrer pour le mobile ?? Merci.
Je pense que c’est à cause du cache de Divi. Il faut le désactiver à Divi > Options du thème > Créateur > Avancé et désactiver l’option « génération de fichier CSS statistiques »
Bonjour Lycia,
Merci pour ce super tuto! j’ai un petit problème avec les icons, lorsque je suis sur la page personnalisée, mes icons apparaissent bien. J’ai mis 2 icones dans mon menu une pour ma page contact et une pour ma page login. lorsque je navigue sur mon site, les icones disparaissent en fonction des pages de mon menu. par exemple si je vais sur ma page d’accueil, les icones disparraissent du menu mais sur la page « a propos », les icones sont bien présentes. J’ai essayé de désactiver l’option « génération de fichier CSS statistiques », cela n’a rien changé. une idée? Merci beaucoup!
Ah c’est bizarre car justement j’allais te dire de désactiver la génération de CSS. Peut-être as-tu un plugin de cache ?
Utilises plutôt le thème builder et ajoute des modules images avec un lien dessus, c’est bien plus simple que de tout recoder
Bonjour Lycia,
petite question complémentaire pour laquelle je ne trouve de réponse nulle part sur la toile, y’a t’il un moyen simple d’intervertir l’icone du panier et de recherche, a savoir mettre le panier apres le bouton search ?
merci de tes éclaircissements !! a bientôt
Bonne question. Ce doit être faisable en codant je suppose. Je n’ai pas de solution à te proposer par l’instant
Hello !
Merci pour le tuto ! ça marche nickel.
=> une astuce pour passer le picto à droite (plutôt qu’à gauche du texte du menu) ?
Hum bonne question…
C’est bon j’ai trouvé comment faire passer le picto de gauche à droite de l’intitulé du menu.
(dans mon cas c’est le menu secondaire, donc pour ceux qui en aurait besoin pour le menu primaire il faudra remplacer #et-secondary-menu par la bonne class (que je connais pas de mémoire et je préfère ne pas laisser d’indications hasardeuses)
#et-secondary-menu li >a:before {
position:absolute;
right: -15px;
}
#et-secondary-menu li {
padding-right: 25px;
}