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
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“:
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“:
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“:
» 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)“:
Para este ejemplo queremos añadir iconos a nuestro “Menú Principal“, el cual está formado por los elementos:
- Inicio
- Nosotros
- Tienda
- Contacto
- Blog
- Mi cuenta
Visita el “Cheatsheet” oficial de “Font Awesome” para visualizar los iconos disponibles, así como las clases CSS de cada icono en particular:
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:
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“:
Al final el resultado lucirá similar a:
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:
[code][fa class=»fa-home»][/code]
[code]//* Cambia la clase CSS «fa-home» a placer: http://link.mvkoen.com/1aR7Z5t[/code]
Leído en MVKOEN
