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

Actualizado el 25/09/2021 | Publicado el 03/06/2020 | 20 comentarios

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.

Icon Entete Defaut
Iconos en el menú - Cabecera por defecto

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!

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

Ajout Classe Menu Icon
Habilitar la adición de una clase 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.

Ajout Classe Css Icon
Añadir una clase a cada elemento del menú

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

Ajout Css Icone Menu
Añadir CSS para que los iconosaparezcan en el menú de Divi

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 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:

Icon Entete Defaut
Iconos en el menú - Cabecera por defecto

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

Icones Elegantthemes
Utilice los iconos proporcionados por Elegantthemes

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

Icon Entete Centree
Iconos en el menú - Cabecera centrada
Icon Entete Slidein
Iconos en el menú - Cabecera deslizante

¡Eso es!

Para ir más allá, sugiero esta lista de lecturas relacionadas:

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

Afficher une icône dans le menu à la place du texte
Mostrar un icono en el menú Divi en lugar de texto
  1. En la pestaña Apariencia > Menú, abre las opciones de pantalla y activa la opción Clase CSS, si no está ya activada.
  2. 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
  3. Luego coloque una clase CSS, para mi ejemplo uso ld-icon-menú.
  4. Renueve según sea necesario y guarde los cambios.
Afficher une icône dans le menu à la place du texte - partie 2
No olvides el código CSS
  1. 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...

Image dans le menu à la place du texte
Imagen en el menú en lugar de texto
  1. Importa tus imágenes a la biblioteca multimedia y copia sus URLs.
  2. 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:
votre-texte-alternatif
  1. Añade una clase CSS a tu elemento de menú, por ejemplo : ld-icon-import. Guarda tu menú.
Icône dans le menu Divi
No olvides el CSS para mejorar la visualización
  1. 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

Icone Menu Divi Pinterest
Ajouter Icones Menu Divi
Add Icon Divi Menu

1.445 palabras

6

A ti también te debería gustar:

Page d’erreur 404 personnalisée : avec et sans le Divi Thème Builder

Página de error 404 personalizada: con y sin el Divi Theme Builder

¿Ha pensado en personalizar la página de error 404 de su sitio? ¿No? Pues debería hacerlo: no sólo es fácil de hacer, sino que también podría reducir su tasa de rebote. La idea es mantener en su sitio al internauta que pasaría por allí. Descubre el tutorial paso a paso + el vídeo.

Appliquer des masques et des formes sur vos images avec Divi

Aplica máscaras y formas a tus imágenes con Divi

Las máscaras hacen que tus imágenes parezcan más gráficas y dan a tu diseño un aspecto original. ¿Sabías que puedes crearlos fácilmente con el Constructor Visual de Divi? Te muestro cómo en este tutorial y en este vídeo.

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

Soumettre un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Je souhaite recevoir les news du blog Astuces Divi !

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.

Pínchalo en Pinterest

Acciones
Comparte esto