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):
Menú vertical en la página de inicio de Tesla Themes
Menú vertical en la página de inicio de YouTube
Página de documentación de WooThemes
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:
- Dashicons (nativos de WordPress)
- Elusive Icons
- Font Awesome
- Foundation Icons
- Genericons
- Paquetes de iconos de Fontello
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?
- 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ú:
Con los iconos, vamos a darle un toque visual un poco más interesante. Primero, activamos los iconos nativos de WordPress, Dashicons.
Luego vamos asignando un icono a cada elemento del menú. Por ejemplo, para el primer elemento, hacemos clic en Seleccionar.
Seleccionamos uno de la lista de iconos (podemos filtrarlos por categoría o usar el formulario de búsqueda).
Al seleccionar un icono, en la parte derecha se mostrarán los ajustes para ese elemento individual, junto con una vista previa.
Hacemos clic en el botón Elegir y listo.
¿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):
Guardamos el menú y este será el resultado:
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.
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; }
¿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:
Y también es genial poder usar iconos en los submenús:
Por último, ¿y si usamos un menú vertical? Veamos cómo se porta la extensión IcoMoon con Divi:
¡Súper! 🙂
Traducciones para Menu Icons y el paquete IcoMoon
Descargar [48 KB]
Técnica en electromecánica, periodista, entusiasta de los idiomas y enamorada de WordPress. Amante del mate, la lectura, la música y las series de sci-fi. Mamá de una vizsla loca.
- Guía para WordPress 6.6 disponible - 22 de septiembre de 2024
- Guía para WordPress 6.5 disponible - 13 de junio de 2024
- Guía para WordPress 6.4 disponible - 5 de diciembre de 2023
Hola, buen contenido y aporte!
Tengo una duda, estoy integrando un menú con iconos personalizados pero quiero posicionar los iconos sobre el texto y el plugin Menu Icons ofrece las opciones de posicionarlo a la izquierda o a la derecha. Quiesiera saber si existe una forma de posicionar los iconos sobre el texto.
De ante mano muchas gracias!
Hola, Francisco.
Gracias por tu comentario.
Lamentablemente, este plugin no incluye esa opción.
Saludos.
Hola, muy buen post, tengo una duda, estoy usando este plugin con el tema Zerif Line, pero al momento de agregar un “enlace personalizado” no me aparece la opción ni de “abrir el enlace en una pestaña nueva” ni tampoco la de “Clases CSS (opcional), ¿cómo podría resolver esto?, gracias..
Hola, Azael.
Gracias por tu comentario.
Las propiedades avanzadas del menú se activan desde Apariencia > Menús > Opciones de pantalla > Cajas marcando las casillas correspondientes.
Saludos.
Hola,
Estoy usando el tema Hestia y tengo problemas por que en la sección de “Features” no se me funcionan los iconos awesome (solo los que estan predeterminado y no los que busco en www.fontawesome.io/icons/). Por ejemplo fa-dna, o fa-grin-stars que son gratuitos.
Gracias
Hola, Carme.
Esos iconos no están disponibles, ya que pertenecen a la versión 5+ de Font Awesome, y Hestia incluye la versión 4.7. Para referencia, usá esta biblioteca.
Saludos.
Gracias por la respuesta.
Es mi primera web y algunas cositas me encallo.
He ido a Apariencia/editor/funtions.php y he escrito:
add_action( ‘wp_enqueue_scripts’, ‘enqueue_load_fa’ );
function enqueue_load_fa() {
wp_enqueue_style( ‘load-fa’, ‘https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css’ );
}
Pero cuando voy a personalizar tema (hestia)/secciones paginas inicio/features/ (nota algunos iconos nos se muestran aqui… https://fontawesome.com/icons/
Continuo viendo los iconos que no estan disponibles…
Como actualizo la biblioteca de forma que sólo vea los iconos disponibles?
Mil gracias por tu ayuda
Carme
Hola, Carme.
En tal caso, el código que hay que usar es el siguiente:
add_action( 'wp_head', 'use_fontawesome' ); function use_fontawesome() { ?> <link rel="stylesheet" [...] <?php }El enlace completo que va en la línea
<link rel="stylesheet" [...]lo copiás de aquí: https://fontawesome.com/how-to-use/on-the-web/setup/getting-started?using=web-fonts-with-cssSaludos.
Muchísimas graciasssss, me has salvado 😉
Hola
Estoy preparando un blog con Divi. Tengo un menú vertical a la izquierda con el logo en la parte superior y las opciones de menú en el centro. Quisiera que los iconos sociales aparecieran en esta misma barra de menu, pero en la parte inferior. He estado buscando plugins, pero ninguno me aporta esta funcionalidad. ¿Hay algun plugin? En caso negativo, ¿Tienes alguna documentación al respecto?
Muchas gracias por tu trabajo y un saludo
Manel
Manel
Hola, Manel.
Podrías usar este mismo plugin y agregarlos como elementos del menú (Enlaces personalizados). Para que no te queden alineados verticalmente, asignales una clase CSS a cada elemento (por ejemplo
iconos), y agregá el siguiente código CSS:li.iconos { display: inline-table !important; margin-top: 30px; padding: 0; margin-right: 10px; /* variar de acuerdo con la cantidad de iconos */ }(Salió la respuesta antes de tiempo)
Esto sería lo más sencillo. Ahora, si necesitás que queden en la parte inferior de la pantalla, dentro de la barra, es bastante más complicado porque hay que modificar la plantilla de la cabecera y hacer unos cuantos ajustes de estilos.
Saludos.
Excelente aporte! Por ahora no me he encontrado con la necesidad pero puede que algún día lo necesite y ahora ya se cómo hacerlo fácilmente.
Como siempre super con tus recomendaciones!
¡Gracias! ¡Así de bien explicado da gusto!
De nada, me alegro de que sea útil.
Saludos. 🙂
Hola y saludos al equipo por tan lindo y util sitio
Quisiera usar un icon como elemento del menu (DIVI 2.7). He visto un articulo que propone un plugin (icoMood). Acaso es utilizable con DIVI 2.7? o hay manera de hacerlo sin plugin dentro del tema ?
gracias por la ayuda
Hola, José.
Gracias por tu comentario.
El plugin Menu Icons funciona con cualquier tema. Es la manera más sencilla de añadir iconos al menú sin mayores conocimientos de HTML y CSS. Divi no incluye esta posibilidad en las opciones. Sin plugin es posible, pero hay que integrar una hoja de estilos en la cabecera del tema y agregar el código correspondiente antes de la etiqueta del menú.
Por ejemplo, para Font Awesome, habría que añadir el siguiente código en Opciones del tema > Integración > Añadir código al <head> de su sitio:
Y luego, en el campo Etiqueta de navegación del elemento del menú, añadir el código que corresponda al icono, por ejemplo para el carro de compras:
Espero que te sirva.
Saludos.
Hola nuevamente, instale el plugin y las traducciones, pero al momento de crear el enlace personalizado no me salen opciones como a ustedes en las imágenes de muestra, no tengo Atributos del titulo, abrir en nueva ventana, CSS opcional y descripción, como puedo solucionar esto?
Por otro lado en su ejemplo usan dashicons para Facebook y twitter, yo uso linkedin pero no viene ese icono en dashicons, cual seria la clase css personalizada para iconos de Font awesome y se vean con el color original?
Saludos y como siempre son de gran ayuda.
Hola, Héctor.
Podés activar las opciones adicionales para los elementos de menú haciendo clic en la pestaña Opciones de pantalla y marcando las casillas correspondientes.
El nombre de la clase puede ser el que quieras, pongámosle
.lnkdin-color, en tanto es el elemento de la lista el que lleva la clase personalizada, así que sirve para cualquier paquete de iconos.Y el código CSS sería:
.navbar-inverse .navbar-nav > li.lnkdin-color > a { color: #007bb5; }Saludos. 🙂
Super !!!!, muchas gracias por la ayuda, funciono perfectamente.
Saludos 🙂
Hola,
Tengo una plantilla Divi, me gustaría saber si los iconos también pueden añadirse a los widgets del pie de página dónde indicamos Información, teléfono, etc.
Muchas gracias.
Hola, María Luisa.
Tendrías que añadir el código a mano, dentro del widget que si no me equivoco es de Texto. Sería algo más o menos así:
Para cada icono, es el mismo código y lo que cambia es la segunda clase, de acuerdo con los ejemplos listados en https://developer.wordpress.org/resource/dashicons/
Espero que te sirva. Saludos. 🙂
Muchísimas gracias!
Funciona perfectamente.
Saludos.