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:
- Inicio
- Nosotros
- Tienda
- Contacto
- Blog
- Mi cuenta
- 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:
Y si quieres cambiar el tamaño de la fuente en un único item?
Hola @Pau, vía CSS puedes cambiar el tamaño del icono asignando una clase adicional al campo «Clases CSS (opcional)». O también puedes incluir el «ID» del item en cuestión, su clase individual más la clase «fa«, ejemplo:
Saludos 🙂
Excelente! duda, si coloco una clase en el campo «Clases CSS (opcional)» por ejemplo , «icono», solo tengo que colocar en mi hoja de estilos la clase asi:
.icono { }
o necesito hacer otra cosa? lo he intentado y no lo logro.
Gracias de antemano.
Es correcto @Marco, puedes utilizar las herramientas de desarrollador de tu navegador para identificar los elementos del menú en el tema.
Si utilizas Chrome este tutorial puede ser de tu interés: Introducción a las herramientas para desarrolladores de Chrome) 🙂
Gracias Estella me sirvió mucho!! Saludos.
Hola. Yo he probado colocando en la sección menús de WP «Clases CSS (opcional)» de directamente «fa-twitter fa-lg» (sin las comillas y me ha funcionado bien. Para mayores tamaños cambiar fa-lg por fa-2x, fa-3x, fa-4x o fa-5x. La única pega que he tenido yo, es que si dejo en blanco el campo «Etiqueta de navegación» me desaparece el enlace del menú :(. Por eso he colocado el signo + en ese campo y así me funciona :). Gracias por compartir.
Genial @JC, éxito en tu proyecto!
Hola!
Me parece excelente este plugin y mas la forma en que explicas como usarlo, a mi me viene como anillo al dedo ya que no conozco mucho de programación y me estoy metiendo a este mundillo así que mientras aprendo a hacerlo de forma manual me viene muy bien el plugin!
Un placer @Marco, éxito en tu proyecto 😉 !
Gracias a Benjamin por haber mostrado este plugin excelente para los iconos de menus.
Tambien gracias a Estella que con sus conocimientos nos enseño como poder modificar el tamaño del icono porque el tamaño que da por defecto es muy pequeño.
Dando un excelente resultado en todo lo que aqui se muestra.
Saludos!!!
Un placer @Guillermo, gracias a ti por visitar nuestro blog!
Saludos 😉
Excelente informacion, solo me gustaria saber si hay forma de ponerles un color como dorado, y si se pueden agregar otros iconos
Hola Luis,
Por supuesto! utiliza tu hoja de estilos para añadir el color de tu elección , «font awesome» no ofrece soporte para el uso de iconos personalizados.
Un saludo!
Hola! Primero decir que un genial post, segundo una consulta.
Puedo añadir iconos vectorizados que tenga yo creados por mi mismo a un framework como este y asi tenerlos todos juntos?
Saludos y gracias
Hola soy nuevo en esto, llevo un par de dias 🙂 me sirvió muchisimo este plugin, se agradece el aporte.
Tengo una pequeña duda, ojala que puedan ayudarme estoy seguro que es muy básico. quiero saber como dejar solo un icono sin titulo. por ejemplo como sale arriba el icono
{fa-home} INICIO, yo quiero que solo salga el icono home.
gracias de antemano.
Hola @Kevin,
Asegúrate de incluir el siguiente código en la hoja de estilos «style.css» del tema activo en tu sitio web:
Hecho lo anterior, sólo serán visibles los iconos del menú 🙂
¡Hola!
Estoy creando mi web con el tema Avada que lleva Font Awesome incluido, y estoy intentando que el menú top se componga sólo de iconos y no lo consigo, he incluido el código que indicas en la hoja de estilos del tema y sigue apareciendo el texto.
¿Hay alguna otra forma de hacerlo?
Gracias.
Hola @Muyal, por favor contacta con el desarrollador del tema en cuestión para resolver ese detalle. Un saludo!
Hola, lo primero gracias por tu ayuda.
una pregunta, estoy intentando crear iconos en el menu principal, y no tengo tema hijo. estoy con css custom y tu metodo me sirve con los fontawesome pero necesito quitar el texto en los iconos sociales.. solo en ellos ya que tengo todo el menu lleno de iconos y con este codigo de arriba, me quita todos los textos de menu.
¿Como poner un icono detras de cada menu?
Hola @Daren,
Para utilizar los iconos de Font Awesome como imagen de fondo, te sugiero echar un vistazo a los comentarios de la siguiente publicación: «A list of Font Awesome icons and their CSS content values«. Un saludo 🙂 !
hola, algun plugin para lograr esto
http://themes.kadencethemes.com/virtue-premium-2/
¿Cómo colocar el icono arriba y no a un lado?
Hola, recuerda que siempre podrá añadir una clase CSS, por ejemplo:
Hola, tengo una plantilla de wordpress echa con boostrapp pero necesito agregarle mis iconos personalizados, como puedo hacer eso !!!