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

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!

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

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:

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

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

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.

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

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:

3. Añade una clase CSS a tu elemento de menú, por ejemplo : ld-icon-import. Guarda tu menú.

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