Cómo poner iconos en el menú de WordPress

| |

Según el estilo que quieras darle a tu web, tal vez te interese añadir iconos en el menú principal o secundario. Los iconos pueden usarse a modo informativo, decorativo o bien para resaltar un elemento en concreto.

Por ejemplo, fíjate en el siguiente menú. No se ve mal, pero la verdad es que queda un poco soso:

Menú sin iconos

Al añadir iconos, en cambio, el menú se vuelve mucho más llamativo:

Menú con iconos

En el caso de iconos muy conocidos, como los de las redes sociales, a veces no hace falta ni tan solo añadir texto al menú. Todo el mundo entiende que los iconos siguientes se refieren a Twitter y Facebook:

Menú de redes sociales con iconos sin texto

Dos métodos para añadir iconos al menú

Vamos a ver un par de métodos muy sencillos para poner iconos en el menú de una web con WordPress.

En el primer caso vamos a emplear el plugin Menú Icons by Themelsle, en tanto que en el segundo usaremos la herramienta Font Awesome.

PRIMER MÉTODO: Menu Icons by Themelsle

Con este plugin es superfácil añadir iconos al menú de WordPress, y además te permitirá personalizar la forma en que se visualizarán.

Para comenzar, ve al repositorio de plugins de WordPress y escribe menu icons en la barra de búsqueda. Instala y activa el plugin llamado Menu Icons by Themelsle.

Captura de pantalla del plugin Menu Icons by Themelsle

Ve ahora a la sección Menús.

Ubicación de los menús en el back end de WordPress

Selecciona el menú que quieres editar. Verás que ahora todos los elementos tienen una opción llamada Icono: Selección.

Selector del icono en la página de gestión de menús en WordPress

Si clicas en Selección se abrirá una ventana con diversos iconos. Escoge el icono que quieras y clica el botón Seleccionar.

Selector de iconos del plugin Menu Icon by Themelse
En este ejemplo he seleccionado el icono de la casa (Home).

Ahora el icono ya está seleccionado para este elemento del menú. Para terminar, clica el botón Guardar menú.

Icono seleccionado y a punto para guardar los cambios en el menú

Si visitas la web, verás que el icono ya se ha añadido al menú.

Menú con el icono de una casa junto al elemento "Inicio"

No tienes más que repetir el mismo procedimiento para todos los elementos del menú a los que quieras añadir iconos.

Ajustes de los iconos

Una de las cosas buenas de este plugin es que tiene bastantes opciones de configuración.

Para cambiar los ajustes, ve a la página de menús y selecciona la opción Ajustes de Menu Icons. (La encontrarás en la columna de la izquierda, abajo de todo).

En la pestaña Global puedes seleccionar si prefieres mostrar solo los iconos de Dashicons (es decir, los que vienen por defecto con WordPress), o también los de otras herramientas como Font Awesome, Genericons, etc.

Captura de pantalla de los ajustes del plugin Menu Icons by Themelsle

Si clicas en la pestaña Menú actual puedes cambiar las opciones de visualización de los iconos. Puedes elegir, por ejemplo, el tamaño, la alineación vertical, si quieres que se muestren antes o después del texto, etc.

SEGUNDO MÉTODO: Font Awesome

Font Awesome es seguramente la herramienta más popular para añadir iconos a una web. Tiene una cantidad enorme de iconos, algunos de los cuales son gratuitos en tanto que otros solo están disponibles en la versión de pago.

Para usar esta herramienta, ve a fontawesome.com/icons y busca el tipo de icono que deseas (los iconos que aparecen difuminados son los de pago). Puedes ayudarte con la barra de búsqueda.

Selector de iconos de Font Awesome

A modo de ejemplo, voy a buscar el icono de una estrella. Si escribo star en la barra de búsqueda aparecen dos iconos: una estrella delineada y otra sólida.

Resultados de la búsqueda del icono "star" en Font Awesome

Al clicar en el icono deseado, vamos a la página de ese icono concreto. Verás que justo encima del icono hay un código parecido a este:

<i class="far fa-star"></i>
Copiado del código HTML del icono "star" en Font Awesome

Si clicas en el código, este se copiará al portapapeles. Ahora inicia sesión en WordPress y ve a Apariencia > Menús.

Selecciona el elemento del menú al que quieres añadir el icono, y pega el código en el campo Etiqueta de navegación antes del texto.

Código de Font Awesome añadido a la etiqueta de navegación de un elemento del menú
Fíjate en que hay un espacio en blanco entre el código y el texto.

Importante. Deja un espacio en blanco entre el final del código y el inicio del texto. De otro modo, el icono aparecerá pegado al texto y no se verá bien.

Clica el botón Guardar menú para que se guarden los cambios.

Si visitas tu web verás el resultado.

Elemento del menú con el icono de la estrella

Si deseas desplazar un elemento a la derecha del menú (como en el ejemplo anterior), debes añadir una clase CSS en el campo Clases CSS (opcional). En el caso de GeneratePress, la clase para «flotar» un elemento a la derecha del menú es menu-item-float-right.

Qué hacer si Font Awesome no funciona en tu web

Hay algunos temas de WordPress que ya vienen con Font Awesome instalado por defecto, pero otros no.

Si tu tema no tiene instalado Font Awesome, el método anterior no funcionará. Por lo tanto, la solución es instalar Font Awesome.

No te preocupes, es muy fácil.

Cómo instalar Font Awesome

La forma más sencilla de instalar esta herramienta en WordPress es con un plugin. Ve al repositorio de plugins de WordPress y busca el plugin oficial de Font Awesome. Instálalo y actívalo.

Plugin Font Awesome en el repositorio de plugins de WordPress

Los ajustes del plugin los encontrarás en la sección Ajustes de WordPress.

Ubicación de Font Awesome en el menú de WordPress

Verifica que el estatus del plugin tenga el signo de OK. En principio no es necesario que modifiques ninguna de las otras opciones.

Captura de pantalla de la configuración del plugin Font Awesome

Con esto ya tienes Font Awesome habilitado en tu web, y podrás instalar los iconos en el menú según el método descrito anteriormente.

¿Cuál de los dos métodos es mejor?

Si solo quieres instalar iconos en el menú y nada más, entonces yo me decantaría por el plugin Menu Icons by Themelsle.

Sin embargo, a largo plazo tal vez te convenga más usar Font Awesome. El motivo es que con Font Awesome podrás instalar iconos no sólo en el menú, sino también en encabezados o en cualquier parte de tus páginas web.

Te lo muestro con un par de ejemplos.

1. ICONOS EN ENCABEZADOS. Fíjate qué interesante se vuelve un encabezado gracias a los iconos:

Ejemplo de encabezado con iconos

2. ICONOS EN PÁGINAS WEB. Aquí tenemos un párrafo muy atractivo en tres columnas que bien podría estar en la página de servicios de una empresa de alojamiento web:

Rendimiento

Servidores con la última tecnología SSD de velocidad ultrarrápida

Calidad

Servicios homologados con el certificado ISO 9001 de calidad

Servicio

Atención técnica 24 horas de expertos en WordPress y Joomla

Ambos ejemplos se han hecho con Font Awesome y sin necesidad de usar un maquetador visual.

Conclusión

Cuantos menos plugins uses, tanto mejor para ti.

Por este motivo, aunque Menu Icons by Themelsle es muy tentador por su sencillez y efectividad, te aconsejo que uses Font Awesome.

De esta forma, con un solo plugin podrás añadir iconos no solo en el menú, sino también en cualquier parte de la web.

Anterior

Cómo instalar GeneratePress

Cómo escribir una entrada de blog en inglés

Siguiente

Deja un comentario

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.