En este artículo te voy a explicar cómo añadir iconos a tu menú de navegación con Divi en WordPress, para que puedas diseñar un menú mucho más amigable, visual y dinámico.

Usualmente no solemos ver iconos en el menú de navegación de nuestro WordPress. Más allá del punto de vista de la usabilidad web, probablemente sea por la tendencia que hay en diseñar páginas web por medio de plantillas, y no pararse un poco a diseñar con un poco de código CSS. 

Lo primero que debemos hacer, (y quizás si no eres fan de los plugins me odiarás por esto…) es instalar el plugin FontAwesome en tu wordpress.

Qué es Font Awesome

Font Awesome es un plugin muy potente que sirve como banco de iconos para muchos desarrolladores. De hecho, en Font Awesome se pueden encontrar iconos vectoriales, así como diferentes estilos css. 

Una de las ventajas de Font Awesome, es que podemos eliminar las típicas imágenes de iconos, y sustituirlas por estos vectores reconvertidos a fuentes.

¿Cual es la ventaja de Font Awesome?

Como podrás intuir, la principal ventaja es que podemos reducir significativamente el peso de las imágenes que se suelen utilizar como iconos en los sitios web, y traducirlo a fuentes. De esta manera, reduciremos peso a nuestro sitio web, influyendo positivamente (aunque marginalmente) en la velocidad de la carga.

Además cuenta con más de 500 iconos personalizables en donde no se requiere javascript y pueden ser editados por medio de código css.

¿Cual es la desventaja de Font Awesome?

Aunque para mí no sea una desventaja como tal, la búsqueda de los iconos deberás realizarla en inglés. De todos modos, si no supieras inglés no te preocupes. Podrás utilizar el traductor de google sin problema.

Cómo instalar el plugin FontAwesome en tu WordPress

Lo primero que haremos es ir a la sección de plugins de nuestro WordPress. Una vez ahí, le daremos a añadir nuevo, y en el buscador ingresaremos Font Awesome.

Una vez instalado, debemos realizar un paso previo antes de acudir a la librería de Font Awesome. 

Debemos acudir a la ruta Herramientas >> Menús, y dentro de esta sección, debemos desplegar las opciones de pantalla, para activar “clases CSS” en las propiedades avanzadas del menú.

Nombrar Clases CSS en tu menú de navegación

Una vez hecho lo anterior, nos dirigimos a la estructura de nuestro menú, y desplegando por ejemplo el elemento Inicio, nos aparecerá la casilla de “clases CSS (opcional)”.

En este lugar, debemos asignar un nombre, el que queramos, pero de manera que dicho nombre sea un nombre único, pues después lo tendremos que tener en cuenta para ingresarlo en el código CSS en Divi.

En mi ejemplo, he nombrado a la página de inicio, por medio de “icono-inicio”. 

Con ello, ahora sí podemos entrar a explicar cómo añadir iconos a tu menú de navegación con Divi en WordPress.

Obtener el código del icono desde Font Awesome

Una vez hemos realizado lo anterior, debemos dirigirnos a la página de Font Awesome y podremos elegir el icono que deseemos a través de su buscador.

Una vez lo seleccionemos, observaremos que se nos abre una ventana similar a la siguiente:

Pues bien, en la misma, observaremos un código “unicode”, que hará referencia a nuestro icono seleccionado. 

En nuestro ejemplo, sería el código f015, el cual tendremos que tenerlo en cuenta para posteriormente ingresar el código css.

Instalar código CSS de Font Awesome en Divi

Una vez hemos configurado los pasos previos, nos dirigimos a nuestro constructor visual Divi, por lo que entraremos a la ruta Divi >> opciones del tema, y bajo del todo, podremos encontrar nuestra sección de Css personalizado. 

Aquí deberemos pegar el código siguiente, pero teniendo en cuenta que el parámetro “f015” hace referencia a nuestra fuente.

NOTA: hemos indicado un margen derecho de 5px (margin-rigth: 5px) para que el icono no quede pegado al nombramiento del elemento del menú, de esta manera, tendremos un pequeño espacio para que respire bien el diseño y quede una imagen visual y limpia.

De todos modos, en tu caso puedes establecer más o menos píxeles según consideres.

Pues bien, una vez hecho esto, le daremos a guardar cambios y ya podremos actualizar nuestro WordPress para revisar los cambios efectuados. 

En mi caso, puedes observar como quedaron los iconos en mi menú de mi página web. 

Te recomiendo que pruebes los que mejor encajen con tu negocio o blog, y configures aquellos que realmente consideres.

NOTA: Ten en cuenta que nuestros iconos, al estar convertidos a fuentes, tomarán el estilo que se haya configurado a la fuente de nuestro menú.

Si te ha gustado este artículo, y quieres conocer una técnica de SEO para generar enlaces amigables de tus entradas, te recomiendo leer nuestro artículo cómo quitar el término category de tu URL