Añadir iconos a los menús en WordPress es algo relativamente fácil de hacer, en esta entrada te mostraremos cómo hacerlo a través de un plugin gratuito.


Plugin: Font Awesome

Añadir iconos a los menús en WordPress

Utilizaremos el plugin gratuito “Font Awesome 4 Menus“, originalmente diseñado para Twitter Bootstrap, “Font Awesome” nos proveerá de 369 iconos vectoriales que son completamente personalizables vía CSS (ideal para los usuario más experimentados), los iconos no utilizan JavaScript y son perfectos para pantallas retina.


» Paso 1: Instalar y activar Font Awesome

Descarga el plugin “Font Awesome 4 Menus” desde el repositorio oficial de plugins, o búscalo en la página “Instalar plugins“:

Añadir iconos a los menús en WordPress

Una vez instalado y activado, “Font Awesome 4 Menus” es completamente funcional en tu sitio web y no requiere configuraciones adicionales.

» Paso 2: Activar clases CSS

Ahora es momento de activar un ajuste de las propiedades avanzadas de menú. Desde el menú lateral izquierdo ve a la sección “Apariencia” > “Menús“:

Añadir iconos a los menús en WordPress

En la página “Menús” haz clic sobre la pestaña superior izquierda “Opciones de pantalla“. En el apartado “Mostrar propiedades avanzadas de menú” asegúrate de activar la casilla de verificación “Clases CSS“:

Añadir iconos a los menús en WordPress

» Paso 3: Personalizar el menú de navegación

Una vez activadas las “Clases CSS“, ve al estructura del menú que es de tu interés, asegúrate que por cada elemento de navegación se muestre el campo “Clases CSS (opcional)“:

Añadir iconos a los menús en WordPress

Para este ejemplo queremos añadir iconos a nuestro “Menú Principal“, el cual está formado por los elementos:

Visita el “Cheatsheet” oficial de “Font Awesome” para visualizar los iconos disponibles, así como las clases CSS de cada icono en particular:

Añadir iconos a los menús en WordPress

Observa que cada clase inicia con el prefijo “fa-“. Copia ese prefijo y pégalo en el campo “Clases CSS (opcional)” de cada elemento del menú en WordPress:

Añadir iconos a los menús en WordPress

Repite el procedimiento para el resto de los elementos del menú. En este ejemplo utilizaremos:

Elementos del menú de navegación:

  • Inicio
  • Nosotros
  • Tienda
  • Contacto
  • Blog
  • Mi cuenta

Clases CSS a utilizar:

  • fa-home
  • fa-users
  • fa-shopping-cart
  • fa-envelope-o
  • fa-files-o
  • fa-key

Una vez que hayas integrado las clases CSS a los elementos de tu menú, asegúrate de guardar los cambios y de asignar el menú a la ubicación que es de tu interés. La ubicación de los menús que se desplegaran en tu tema puedes controlarla desde la pestaña “Gestionar lugares“:

Añadir iconos a los menús en WordPress

Al final el resultado lucirá similar a:

Añadir iconos a los menús en WordPress

Descargar plugin: Font Awesome 4 Menus


Comentarios finales

Font Awesome 4 Menus” es un plugin ligero y con muy pocos problemas de compatibilidad gracias a que no requiere de JavaScript, ahora que conoces este interesante plugin no dudes en añadir iconos a los menús en WordPress, inclusive puedes utilizar iconos en entradas o páginas utilizando un shortcode similar a:

[fa class="fa-home"] //* Cambia la clase CSS "fa-home" a placer: http://link.mvkoen.com/1aR7Z5t

 

Leído en MVKOEN