Usar iconos en los elementos del menú de WordPress

22 comentarios

Por: Caribdis.Net

Publicada: 25 de marzo de 2016

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]

Últimas entradas de Caribdis.Net (ver todo)

Se responden todas las dudas o consultas de los lectores acerca del contenido de esta publicación únicamente en su respectiva sección de comentarios, por lo general dentro de las 24/72 hs. Así que asegúrate de suscribirte a las respuestas para recibirlas en tu casilla de correo electrónico (podrás cancelar la suscripción cuando lo desees). Con la suscripción al blog, recibirás en tu correo únicamente las nuevas entradas que se publiquen.

Ten en cuenta que muchas de las preguntas ya fueron respondidas en distintas entradas; recuerda que puedes usar el buscador de la barra lateral, y Ctrl+F para buscar texto dentro de una página.

Esta u otras entradas pueden contener enlaces de afiliado. Esto significa que si usas un enlace para adquirir algún producto recomendado, recibiremos una comisión de afiliados, la cual no te generará ningún costo adicional.

22 Comentarios

  1. Francisco Sanhueza

    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!

    Responder
    • Caribdis.Net

      Hola, Francisco.

      Gracias por tu comentario.

      Lamentablemente, este plugin no incluye esa opción.

      Saludos.

      Responder
  2. Azael

    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..

    Responder
    • Caribdis.Net

      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.

      Responder
  3. carme

    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

    Responder
    • Caribdis.Net

      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.

      Responder
      • Carme

        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

        Responder
          • Carme

            Muchísimas graciasssss, me has salvado 😉

  4. Manel

    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

    Responder
    • Caribdis Diseño Web

      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.

      Responder
  5. David

    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!

    Responder
  6. Mar

    ¡Gracias! ¡Así de bien explicado da gusto!

    Responder
    • Caribdis Diseño Web

      De nada, me alegro de que sea útil.

      Saludos. 🙂

      Responder
  7. Jose Caceres

    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

    Responder
    • Caribdis Diseño Web

      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:

      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css">
      

      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:

      <i class="fa fa-shopping-cart"></i> Tienda
      

      Espero que te sirva.

      Saludos.

      Responder
  8. Hector Salas

    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.

    Responder
    • Caribdis Diseño Web

      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. 🙂

      Responder
      • Hector Salas

        Super !!!!, muchas gracias por la ayuda, funciono perfectamente.

        Saludos 🙂

        Responder
  9. María Luisa Rodríguez

    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.

    Responder
    • Caribdis Diseño Web

      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í:

      <i class="dashicons dashicons-phone"></i> +00 000...
      

      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. 🙂

      Responder
      • María Luisa Rodríguez

        Muchísimas gracias!
        Funciona perfectamente.
        Saludos.

        Responder

Enviar comentario

Pin It en Pinterest

Compartir esto

Compartir es agradecer

Si esta publicación te resultó útil, puedes compartirla y ayudar a otros. ¡Gracias!