En todo sitio web los menús son un componente esencial. Para ofrecer una buena experiencia al usuario, es fundamental que los elementos de navegación sean accesibles: la ubicación, la visibilidad y la distribución son los principales aspectos para tener en cuenta al crear la lista de enlaces a las páginas de nuestro sitio. Sin embargo, otra buena manera de hacer que resalten es acompañar los textos con una imagen simple, pero bien descriptiva. Aquí es donde entran en juego los iconos, esos símbolos gráficos que son reconocidos casi universalmente y que han copado todos los dispositivos de tecnología desde los albores de la computación personal a hoy.

Veamos algunos ejemplos de usos geniales de iconos en los menús (no necesariamente de WordPress):

Tesla Themes

Menú vertical en la página de inicio de Tesla Themes

YouTube

Menú vertical en la página de inicio de YouTube

Página de documentación de WooThemes

Página de documentación de WooThemes

Página de inicio de Themefuse

Página del blog de Themefuse

Hoy vamos a destacar este plugin creado por Dzikri Aziz, Menu Icons, que nos da la posibilidad de añadir iconos a los elementos de cualquier menú de WordPress, en unos pocos pasos.

Paquetes de iconos que incluye:

Además es posible elegir:

  • Imágenes (de la biblioteca de medios de WordPress)
  • Archivos en formato SVG (de la biblioteca de medios de WordPress)

Está en los planes para una versión futura incluir también imágenes desde una URL externa y como extensión, está disponible IcoMoon, que se instala como un plugin separado.

¿Cómo se usa?

  1. Luego de activar el plugin, vamos a Apariencia > Menús para editar los elementos del menú en uso
  2. Activamos o desactivamos los distintos tipos de iconos desde el panel Ajustes de iconos del menú (conviene activar únicamente aquellos que vamos a utilizar)
  3. Asignamos los ajustes predeterminados para el menú actual de navegación; estos ajustes serán aplicados a cada nuevo elemento del menú que agreguemos
  4. Seleccionamos el icono de la lista y hacemos clic en el botón Elegir
  5. Guardamos el menú

 

Veámoslo en acción, en uno de nuestros temas favoritos, Zerif Lite. Esta es la apariencia predeterminada del menú:

Menú de Zerif Lite sin iconos

Con los iconos, vamos a darle un toque visual un poco más interesante. Primero, activamos los iconos nativos de WordPress, Dashicons.

Ajustes de iconos del menú

Luego vamos asignando un icono a cada elemento del menú. Por ejemplo, para el primer elemento, hacemos clic en Seleccionar.

Iconos del menú - Seleccionar

Seleccionamos uno de la lista de iconos (podemos filtrarlos por categoría o usar el formulario de búsqueda).

Dashicons

Al seleccionar un icono, en la parte derecha se mostrarán los ajustes para ese elemento individual, junto con una vista previa.

Dashicons - Vista previa

Hacemos clic en el botón Elegir y listo.

Zerif Lite - Menú con iconos

¿Qué tal si queremos mostrar solo iconos, por ejemplo para añadir enlaces a redes sociales? Para eso es la opción Ocultar etiqueta.

Añadimos los enlaces personalizados al menú, para Facebook y Twitter. Luego seleccionamos los iconos, y en las opciones de la parte derecha elegimos del menú Ocultar etiqueta. (Y agrandamos un poco la fuente, para que destaque del resto):

Iconos del menú - Sin etiqueta

Guardamos el menú y este será el resultado:

Zerif Lite - Iconos de redes sociales

Podemos también ir un poco más allá y personalizar los colores de los iconos, pero esto siempre dependerá del tema que estemos usando. Por ejemplo, para Zerif Lite, vamos a usar los colores predeterminados de Facebook y Twitter. Para eso, tendremos que aplicar una clase personalizada a cada elemento, como se muestra en la siguiente imagen.

Iconos del menú - Clase CSS

Y luego, en la hoja de estilos del tema hijo, o en el recuadro de Simple CSS, agregar el siguiente código:

.navbar-inverse .navbar-nav > li.fb-color > a { color: #3b5998; }
.navbar-inverse .navbar-nav > li.tt-color > a { color: #00aced; }

Zerif Lite - Iconos personalizados

¿Qué tal si queremos usar iconos en un tema de Genesis? No problem! Así es como se verán los iconos de Font Awesome en el tema Café Pro:

Genesis Café Pro - Iconos del menú

Y también es genial poder usar iconos en los submenús:

Genesis Café Pro - Iconos en submenú

Por último, ¿y si usamos un menú vertical? Veamos cómo se porta la extensión IcoMoon con Divi:

Divi - Iconos del menú

¡Súper! 🙂

Traducciones para Menu Icons y el paquete IcoMoon

Descargar [48 KB]

Caribdis Diseño Web

Caribdis Diseño Web

Ana Ayelén Martínez - Buenos Aires, Argentina
Técnica en electromecánica, periodista, entusiasta de los idiomas y enamorada de WordPress. Amante de la lectura, la música y el mate, y fanática de las series de J.J. Abrams.
Caribdis Diseño Web