Divi Tips 97: iconos en el menú Divi

¿Cómo añadir iconos al menú Divi (sin plugin)?

Actualizado en 25/09/21

1501 palabras

6 lectura de minutos
38 Comentarios

Este artículo contiene enlaces de afiliados reconocibles por el icono porcentaje (%) → Soy un enlace de afiliado

En este tutorial rápido y fácil, verás cómo añadir iconos en el menú Divi. Es muy simple y sobre todo, ¡está al alcance de cualquier principiante!

Icon Entetete Defaut
Iconos en el menú – Cabecera predeterminada

No es necesario instalar una extensión compleja que cargará aún más su sitio! Usted verá que con un pedazo de código CSS el turno será jugado!

1 – ¿Por qué añadir iconos al menú Divi?

Bueno, porque es de moda por supuesto! ¿O porque un icono habla con todos?

A primera vista, el usuario de Internet sabrá a qué elemento del menú ir. Esto puede (quizás) mejorar la experiencia de usuario?

Más allá de estas razones, los iconos iluminan una página web, rompen la monotonía y visten su texto. Además, son nativos en Divi... ¿por qué no?

¿Sabes que puedes probar Divi gratis? Nos vemos en esta página y haga clic en "Pruébalo GRATIS"

2 - Añadir clase CSS a los elementos del menú

Primero, tienes que habilitar la adición de CSS Classes dentro de tu menú.

Es muy simple. Vaya a la pestaña Apariencia > Menú y abrirlos Opciones de pantalla (top, right). Compruebe "Clases CSS« .

Agregar menú de icono de clase
Permite añadir la clase CSS

Esta opción permite que un nuevo campo aparezca dentro de cada elemento del menú: el campo Clases CSS.

Entonces usarás este campo para asignar una clase a cada elemento de menú donde quieres añadir un icono.

Añadir Clase Css Icon
Añadir una clase a cada elemento de menú

Por mi ejemplo, usé la clase "ld-menu-homePero podría haber usado la clase "piempiónNo habría tenido ningún impacto. Así que usa este campo para insertar tus Clases.

Tenga en cuenta que no debe utilizar acentos, caracteres especiales o espacios. Asignar una clase diferente a cada elemento si desea mostrar diferentes iconos.

¡No te demores! Descubre el tema Divi aquí. !

3 – Insertar iconos en el menú Divi con CSS

Una vez que haya asignado una Clase a cada elemento en el menú, puede agregar CSS para mostrar el iconos en el menú Divi.

Si es necesario, lea este artículo que explica todas las formas de añadir código personalizado en Divi (incluyendo CSS).

Añadir Css Icone Menu
Añadir CSS para hacer aparecer iconos en el menú Divi

Vaya a la pestaña Aspecto √≥ Personalizar √≥ CSS adicional y copiar el código (Snippet) siguiente :

.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).
  • gordo-familia: ‘ETMODULES’ indica qué fuente de iconos utilizar. Esta fuente es nativa en Divi, llámalo.
  • contenido: 'e009'; indica qué icono se mostrará.
  • color: #4d2ef; indica el color del icono (un sitio como Código de color HTML puede ayudarle a encontrar el color perfecto).

Si quieres insertar un icono diferente para cada elemento de menú, entonces tendrá que duplicar este código tanto como usted tiene d Clase CSS y icono código Cada vez.

Aquí está por ejemplo el CSS que usé para cada elemento en mi menú para mostrar 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 de la imagen:

Icon Entetete Defaut
Iconos en el menú – Cabecera predeterminada

¿Necesita más recursos en Divi? Visita Elegante Themes blog lleno de ideas y tutos! O aprender cómo utilizar eficazmente este tema a través de mi entrenamiento Divi !

4 - Elige los iconos disponibles por Divi

¡Los códigos de iconos para mostrar, no los inventé! Todo lo que tienes que hacer es referirse a la documentación, así que ve a la funcionario Divi Icons página.

Icones Elegantthemes
Utilice los iconos disponibles por Elegantthemes

En el banco de iconos, verá que hay un código para cada uno. Por ejemplo, el código de iconos Home es . Para usar, debe quitar el prefijo > > > > > > El código de iconos de la casa es entonces iere/p√Īadop títuloe009 Otros ejemplos: El código del icono Reloj: 7d escrito/p√Īo seleccionadop]El código de icono de Cadenas: 7e correspondió/p√Īo especificadop El código del icono Imagen: e005 seleccionada/p El código del icono Bulb: e007 selecciona/p Esos son los códigos que tendrá que reportar en el CSS, en la línea seleccionada/p Confeccionadop especificadop correctamente"contenido"Seguido/p Confeccionado(s) iconos del menú Divi(s) No importa el tipo de encabezado que utilice en su sitio, se mostrarán en su sitio los identificados/p] Menú Divi seleccionado/p Contraseña Nocturno asignado/por defecto encabezador seleccionado/p Confeccionado/por ejemplo: Slide En encabezados realizados/p√Īo especificadop acordadop especificadop√≠p especificadop√Īo-cabeza de teclas en el menú correspondientep Para ir más lejos, propongo esta lista de reproducción relacionada:;Menú Header y Divi: todos los ajustes Uso.

Icomoon en WordPress

  • Añadir imágenes al Mega Menu de Divi
  • Obtener 300 iconos adicionales gratis
  • Eras muchos a preguntar en comentarios: quieres mostrar un icono en lugar del texto del menú y no además del texto...
  • Aquí está una actualización del artículo para completar la primera edición...
  • etc.

Mostrar un icono en el menú Divi en lugar de texto , abrir las opciones de pantalla y activar la opción para Si no está hecho. :

content: '\e009';

5 - Los iconos de menú Divi funcionan para todos los tipos de encabezados

Coloque sus páginas en el menú, como de costumbre pero en lugar de mantener el título de navegación predeterminado, copiar y pegar el código de icono Divi deseado, como se explica en el capítulo 4 de este artículo. Por otro lado, guardas todo el código: por ejemplo, el código de iconos Home es Entonces coloca una clase CSS, por mi ejemplo, yo uso : ld-icon-menu, Renovar según sea necesario y guardar sus cambios., No olvide el código CSSpara colocar el siguiente código:

Icon Entete Centree
Aquí, cuando se guarda, su menú Divi muestra iconos en lugar de texto! ¡Genial!
Icon Entetete Slidein
Si no te gustan los iconos nativos de Divi ahora, puedes usar iconos personalizados que importas en tu biblioteca de medios.

En un artículo anterior, usted explicó cómo

insertar imágenes en el mega menú de Divi

6 – Iconos en el menú Divi en lugar de texto

ld-icon-import

. Guarda tu menú.

Mostrar un icono en el menú en lugar de texto
Afficher une icône dans le menu de Divi à la place du texte
  1. En la pestaña Apariencia > Menú, ouvrez les options de l’écran et activez l’option Clase CSS, si ce n’est pas déjà fait.
  2. Placez vos pages dans le menu, comme à votre habitude mais au lieu de conserver le titre de la navigation par défaut, copiez et collez le code de l’icône Divi désiré, comme expliqué au chapitre 4 de cet article. Par contre, vous conservez le code en entier : par exemple, le code de l’icône de la Maison (Home) est  o 
  3. Placez ensuite une classe CSS, pour mon exemple, j’utilise ld-icon-menu.
  4. Renouvelez au que de besoin puis sauvegardez vos changements.
Mostrar un icono en el menú en lugar de texto - parte 2
Ne pas oublier le code CSS
  1. Por último, vaya a la pestaña Aspecto √≥ Personalizar √≥ CSS adicional pour y placer le code suivant :
/*----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);
}

Voilà, lorsque vous sauvegardez, votre menu Divi affiche des icônes à la place du texte ! Génial !

7 - Insertar un icono personalizado en lugar de texto del menú

Si maintenant, les icônes natives de Divi ne vous plaisent pas, vous pouvez utiliser des icônes personnalisés que vous importez dans votre médiathèque.

Lors d’un précédent article, vous vous avais expliqué comment insérer des images dans le méga menu de Divi.

Il s’agit ici d’une variante…

Image dans le menu à la place du texte
Image dans le menu à la place du texte
  1. Importez vos images dans la médiathèque et copiez leurs URL.
  2. Rendez-vous ensuite à l’onglet Apparence > Menu. Ouvrez un élément de menu existant ou placez une nouvelle page dans votre menu. Dans le champ « Titre de la navigation » copiez le code suivant :
<img src="url-de-votre-image" alt="votre-texte-alternatif" width="20%" />
  1. Ajoutez une Classe CSS à votre élément de menu, par exemple : ld-icon-import. Sauvegardez votre menu.
Icono en el menú Divi
No olvide CSS para mejorar la pantalla
  1. Por último, vaya a la pestaña Aspecto √≥ Personalizar √≥ CSS adicional pour y placer le code suivant :
/*----Align imag with text menu---- */

.ld-icon-import img {
    vertical-align: text-bottom !important;
}

Este código mejora la pantalla de la imagen pero es opcional o depende del tipo de imagen que utilice. Es posible adaptarlo a sus necesidades.

¡Disfruta!

¿Lo sabías? Puedes probar Divi gratis visitando en esta página y haciendo clic en "Pruébalo GRATIS"

Menú Icono Divi Pinterest
Añadir iconos Menú Divi

Obtener Divi

Entrenamiento Divi

Libro electrónico Divi

Consejos gratis

Cuestionario Divi

Entrenamiento en vivo

icono 256x256

Proudly translated by wpLingua, la extensión de traducción para WordPress ¡Que me desarrolle! SEO-Friendly / Automático / Editable

38 Commentaires

  1. Marcelo

    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?

  2. Lycia Diaz

    Hello Marcelo,
    I don’t see where could be this issue…

  3. AnaïsM

    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!

  4. Lycia Diaz

    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.

  5. Pat

    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 !

  6. ADELINE SCHINELLA

    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 »)

  7. Lycia Diaz

    Salut Adline et Pat ! Voilà, j’ai mis l’article à jour pour répondre à votre question : chapitre 6 et 7.

  8. Karine

    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.

  9. Lycia Diaz

    Salut Karine, tu as bien suivi le tuto ? Si tu mets le bon code comme indiqué, ça doit marcher.

  10. Karine

    Merci beaucoup pour ta réponse. J’ai en effet bien suivi le tuto avec le code -&#xe074- 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/

  11. Lycia Diaz

    Hello Karine, si tu lis bien mon article : le code -&#xe074- doit se placer sans texte, sinon tu veux le texte à côté, tu dois utiliser seulement le code -e074-
    Là ça devrait marcher.

  12. Karine

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

  13. Lycia Diaz

    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é 😉

  14. Lesley

    Thanks so much for this, great tutorial. Used it to add a lock to my client login link.

  15. Lycia Diaz

    Great ! 😉

  16. Pat

    Meric Lycia pour la mise à jour !!! Bravo.

  17. Camille

    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 !

  18. Lycia Diaz

    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.

  19. Maxime Bardou

    Bonjour Lycia,

    Merci beaucoup pour ce tuto et merci de prendre le temps de répondre aux questions, c’est du travail !

  20. Lycia Diaz

    Merci Maxime ! Oui c’est du travail, merci de le reconnaître 😉

  21. Youssef

    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 ?

  22. Saurel

    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

  23. Lycia Diaz

    J’en ai aucune idée. Peut-être le cache ?

  24. Sarah

    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 ?

  25. Lycia Diaz

    Va à l’onglet Divi > Option du thème > Créateur et désactive la génération de fichiers statiques

  26. Bertrand

    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.

  27. Lycia Diaz

    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 »

  28. stephanie

    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!

  29. Lycia Diaz

    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 ?

  30. Lycia Diaz

    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

  31. stephanie

    Merci Lycia pour ta réponse. En faite j’ai désactivé l’option « dynamic icons » et ça a marché!

  32. Stephane

    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

  33. Lycia Diaz

    Bonne question. Ce doit être faisable en codant je suppose. Je n’ai pas de solution à te proposer par l’instant

  34. Raffi

    Hello !
    Merci pour le tuto ! ça marche nickel.

    => une astuce pour passer le picto à droite (plutôt qu’à gauche du texte du menu) ?

  35. Lycia Diaz

    Hum bonne question…

  36. Raffi

    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;
    }

  37. Anne

    Bonjour, quel code CSS peut-on ajouter pour que l’icône soit de taille raisonnable en affichages tablette et mobile ?

    Merci !

  38. Lycia Diaz

    Ah mince, bonne question. C’est un peu compliqué car il faut inspecter le code puis l’écrire avec des Medias Queries. Je ne peux pas vraiment te répondre là comme ça…

Presentar un comentario

Su dirección de correo electrónico no será publicada. Los campos obligatorios se indican con *