--- title: "Usar iconos en los elementos del menú de WordPress" url: https://caribdis.net/2016/03/25/usar-iconos-los-elementos-del-menu-wordpress/ date: 2016-03-25 modified: 2019-10-11 lang: es author: "Caribdis.Net" description: "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..." categories: - "Consejos" - "Destacados" tags: - "español" - "gratuito" - "plugin" - "traducción" - "tutorial" - "WordPress" image: https://caribdis.net/wp-content/uploads/2016/03/wpmenuicons.png word_count: 680 --- # Usar iconos en los elementos del menú de WordPress 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](//caribdis.net/wp-content/uploads/2016/03/tesla-menu.png)Menú vertical en la página de inicio de [Tesla Themes](https://caribdis.link/Tesla) ![YouTube](//caribdis.net/wp-content/uploads/2016/03/youtube.png)Menú vertical en la página de inicio de **YouTube** [![Página de documentación de WooThemes](//caribdis.net/wp-content/uploads/2016/03/woothemes-1024x98.png)](https://caribdis.net/wp-content/uploads/2016/03/woothemes.png)Página de documentación de **WooThemes** [![Página de inicio de Themefuse](//caribdis.net/wp-content/uploads/2016/03/themefuse-1024x468.jpg)](https://caribdis.net/wp-content/uploads/2016/03/themefuse.jpg)Página del blog de **Themefuse** Hoy vamos a destacar este plugin creado por [Dzikri Aziz](http://kucrut.org/), [**Menu Icons**](https://wordpress.org/plugins/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: - **[Dashicons](https://developer.wordpress.org/resource/dashicons/)** (nativos de WordPress) - **[Elusive Icons](http://elusiveicons.com/)** - **[Font Awesome](http://fontawesome.io/)** - **[Foundation Icons](http://zurb.com/playground/foundation-icon-fonts-3/)** - [**Genericons**](http://genericons.com/) - Paquetes de iconos de **[Fontello](http://fontello.com/)** 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**](http://icomoon.io/), que se instala como un [plugin separado](http://wordpress.org/plugins/menu-icons-icomoon/). ### ¿Cómo se usa? - Luego de activar el plugin, vamos a *Apariencia > Menús* para editar los elementos del menú en uso - Activamos o desactivamos los distintos tipos de iconos desde el panel *Ajustes de iconos del menú* (conviene activar únicamente aquellos que vamos a utilizar) - Asignamos los ajustes predeterminados para el menú actual de navegación; estos ajustes serán aplicados a cada nuevo elemento del menú que agreguemos - Seleccionamos el icono de la lista y hacemos clic en el botón *Elegir* - 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](//caribdis.net/wp-content/uploads/2016/03/menu-no-icons-1024x57.png)](https://caribdis.net/wp-content/uploads/2016/03/menu-no-icons.png) 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ú](//caribdis.net/wp-content/uploads/2016/03/ajustes-iconos-menu.png)](https://caribdis.net/wp-content/uploads/2016/03/ajustes-iconos-menu.png) Luego vamos asignando un icono a cada elemento del menú. Por ejemplo, para el primer elemento, hacemos clic en *Seleccionar*. [![Iconos del menú - Seleccionar](//caribdis.net/wp-content/uploads/2016/03/menu-icons-seleccionar.png)](https://caribdis.net/wp-content/uploads/2016/03/menu-icons-seleccionar.png) Seleccionamos uno de la lista de iconos (podemos filtrarlos por categoría o usar el formulario de búsqueda). [![Dashicons](//caribdis.net/wp-content/uploads/2016/03/menu-icons-dashicons-1024x637.png)](https://caribdis.net/wp-content/uploads/2016/03/menu-icons-dashicons.png) 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](//caribdis.net/wp-content/uploads/2016/03/menu-icons-dashicons2-1024x637.png)](https://caribdis.net/wp-content/uploads/2016/03/menu-icons-dashicons2.png) Hacemos clic en el botón *Elegir* y listo. [![Zerif Lite - Menú con iconos](//caribdis.net/wp-content/uploads/2016/03/menu-icons0-1024x57.png)](https://caribdis.net/wp-content/uploads/2016/03/menu-icons0.png) ¿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 *Sí* del menú *Ocultar etiqueta*. (Y agrandamos un poco la fuente, para que destaque del resto): ![Iconos del menú - Sin etiqueta](//caribdis.net/wp-content/uploads/2016/03/menu-icons-sin-etiqueta.png) Guardamos el menú y este será el resultado: [![Zerif Lite - Iconos de redes sociales](//caribdis.net/wp-content/uploads/2016/03/menu-icons-1024x57.png)](https://caribdis.net/wp-content/uploads/2016/03/menu-icons.png) 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](//caribdis.net/wp-content/uploads/2016/03/menu-icons-custom-css.png)](https://caribdis.net/wp-content/uploads/2016/03/menu-icons-custom-css.png) Y luego, en la hoja de estilos del tema hijo, o en el recuadro de [Simple CSS](https://wordpress.org/plugins/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](//caribdis.net/wp-content/uploads/2016/03/menu-icons-css-1024x57.png)](https://caribdis.net/wp-content/uploads/2016/03/menu-icons-css.png) ¿Qué tal si queremos usar iconos en un tema de [**Genesis**](https://caribdis.link/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ú](//caribdis.net/wp-content/uploads/2016/03/menu-icons-genesis-1024x600.jpg)](https://caribdis.net/wp-content/uploads/2016/03/menu-icons-genesis.jpg) Y también es genial poder usar iconos en los submenús: [![Genesis Café Pro - Iconos en submenú](//caribdis.net/wp-content/uploads/2016/03/menu-icons-genesis2-1024x600.jpg)](https://caribdis.net/wp-content/uploads/2016/03/menu-icons-genesis2.jpg) Por último, ¿y si usamos un menú vertical? Veamos cómo se porta la extensión **IcoMoon** con [**Divi**](https://caribdis.link/Divi): [![Divi - Iconos del menú](//caribdis.net/wp-content/uploads/2016/03/menu-icons-divi-1024x600.jpg)](https://caribdis.net/wp-content/uploads/2016/03/menu-icons-divi.jpg) ¡Súper! :) ## Traducciones para Menu Icons y el paquete IcoMoon ### Descargar [48 KB]