Buenas amigos, ¿Qué tal el finde? Yo he estado preparando este artículo sobre cómo agregar iconos en el menú personalizado de WordPress.

Añadir iconos al menú de navegación de tu sitio ofrece a tus visitantes algunas pistas visuales sobre el contenido.

Y también añade un toque de diseño agradable a tu sitio web.

Agregar iconos en el menú de WordPress – Sin plugin

Vamos a realizar algunos ajustes al menú de navegación a través del administrador de WordPress y, a continuación, agregar algún código en tu archivo de tema.

Cuando hayas terminado tendrás algunos iconos simples al lado de cada elemento en tu menú de navegación.

Y la mejor parte es que no tendrás que cargar ninguna imagen o archivos que podrían ralentizar tu sitio.

Agregar iconos de menú – una visión general – sin plugin

Éstos son los pasos que tomarás si sigues este tutorial:

1. Activar la biblioteca Font Awesome del archivo de funciones de tu tema.
2. Agregar las clases CSS a los elementos de tu menú de navegación, a través del administrador de WordPress.
3. Agregar CSS a la hoja de estilos de tu tema para obtener el diseño y las fuentes adecuadas.
4. Todo lo anterior pero con plugin.

Empecemos.

¿Qué es Font Awesome?

Antes de hacer eso, echemos un vistazo rápido a Font Awesome:

Font Awesome es una biblioteca de iconos creados con una fuente de icono.

Esto significa que no utiliza imágenes de fondo, como podrías haber hecho en el pasado al agregar iconos a tu sitio.

En su lugar, utiliza clases CSS, agregando un pseudo-elemento a cualquier cosa con una clase de icono.

Este pseudo-elemento añade un carácter especial antes del elemento, con el estilo del icono.

Lo que acabas haciendo es un icono que se emite inmediatamente antes del elemento al que hayas añadido la clase CSS.

Si deseas obtener más información sobre cómo Font Awesome utiliza CSS, echa un vistazo a la página de ejemplos en su sitio web.

Activar la biblioteca Font Awesome en su tema

En tu carpeta de temas, busca o crea un nuevo archivo llamado functions.php.

Agrega este código a tu archivo de funciones:

function wmpudev_enqueue_icon_stylesheet() {
	wp_register_style( 'fontawesome', 'http:////maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css' );
	wp_enqueue_style( 'fontawesome');
}
add_action( 'wp_enqueue_scripts', 'wmpudev_enqueue_icon_stylesheet' );

Echemos un vistazo a lo que hace:

• Crea una función llamada wmpudev_enqueue_icon_stylesheet ().
• Dentro de esa función, utiliza wp_register_style () para registrar la hoja de estilo Font Awesome, que está alojada fuera de su sitio.
• Puede encontrar este enlace en la página de inicio de Font Awesome.
• A continuación, utiliza wp_enqueue_style () para en rasear el estilo que acaba de registrar.
• Finalmente, engancha la función al gancho de acción wp_enqueue_scripts, que indica a WordPress cuándo ejecutar la función.

Ten en cuenta que en la página de Getting Started de Font Awesome, te dan instrucciones para llamar a la hoja de estilos de la sección de tus páginas web (que estarían en el archivo header.php de un tema de WordPress.)

Ahora guarda tu archivo functions.php.

Agregar CSS a los elementos de menú

Ahora que tenemos Font Awesome registrado, podemos usar las clases CSS que proporciona para agregar iconos a los elementos de nuestro menú.

En el Admin de WordPress, haz clic en Aspecto> Menús para que puedas editar tu menú de navegación.

Si aún no has creado un menú de navegación, crea uno ahora y asegúrate de haber marcado la casilla de verificación en la pantalla de menús para que esté en la ranura de «Navegación principal» del tema.

WordPress nos deja agregar una clase CSS a cada elemento de nuestro menú, pero no podemos ver el campo, deberás activarlo.

En la parte superior de la pantalla, haz clic en la pestaña Opciones de pantalla.

Asegúrate de que la casilla junto a «Clases CSS » esté marcada.

Cierra la pestaña Opciones de pantalla.

Ahora puedes agregar una clase a cada uno de tus elementos de menú.

Comienza con el elemento de menú «Inicio».

Junto al elemento del menú, haz clic en la flecha hacia abajo para ver más opciones relacionadas con ese elemento de menú.

En el campo ‘CSS Classes’, escribe lo siguiente:

fa fa-lg fa-home

Esto agrega tres clases a tu elemento de menú:

• fa se utiliza para todos los elementos con un icono de Font Awesome.
• fa-lg ajusta el tamaño del icono a grande.
• fa-home se refiere al icono específico que desea mostrar.

La interfaz de administración de su menú se verá así:

Ahora haz lo mismo para cada uno de tus elementos de menú.

Encontrarás más iconos y sus clases en la página de iconos de Font Awesome.

Puedes usar los iconos que desees.

Sólo asegúrate de agregar fa fa-lg y luego la clase para el icono de cada elemento del menú de navegación en el campo «CSS Classes».

Ahora guarda tu menú haciendo clic en el botón Guardar menú.

Estilizar los elementos del menú

Ahora echa un vistazo al menú de tu sitio en la parte delantera.

¡Eso es un desastre!

Seguramente las fuentes de tu menú han cambiado, los iconos están encima del texto cuando querrás que estén a la izquierda o no.

Si estás trabajando con tu propio tema, puedes encontrar que en tu menú se ve mejor (o peor!)

Nota: si está trabajando con su propio tema, es posible que tengas que orientar diferentes clases o IDs para tu menú, dependiendo de cómo se codifique tu tema. Te aconsejo que te pongas en contacto con un profesional.

Utiliza el inspector web de tu navegador para identificar las clases a las que va dirigido.

Una vez termines, el menú se verá un poco mejor.

Agregar iconos en el menú de WordPress – Con plugin

Esta forma es mucho más sencilla, puesto que no requiere de ningún conocimiento de programación ni editar ningún archivo.

Lo primero que vamos a necesitar es el plugin, para ello, hacemos clic en Plugins>Añadir nuevo y en la caja de búsqueda escribimos «Menu Icons».

Hacemos clic en Instalar ahora y luego Activar.

Ahora hacemos clic en Apariencia>Menús para añadir los iconos en nuestro menú.

Una vez dentro, empezamos con Inicio y hacemos clic en Selección.

Luego elegimos el icono de la casa y hacemos clic en Elegir.

Debería de quedar así:

Ahora deberás hacer lo mismo con el resto de elementos de tu menú.

NOTA: Te aconsejo que marques todas las casillas en las opciones de Ajustes de Menu Icons, como en la imagen siguiente:

Resumen

Añadir iconos a tu sitio es un proceso muy diferente de lo que era hace un año o dos.

Ahora, en lugar de cargar imágenes y usar el estilo para colocarlas en el fondo de los elementos de la página, puedes agregar iconos utilizando una biblioteca de iconos basada en fuentes.

En este post has aprendido a usar la biblioteca Font Awesome para agregar iconos a los elementos del menú y hacer lo mismo pero utilizando un plugin.

Puedes utilizar estas técnica con otros elementos de tu sitio, como listas, menús y botones, simplemente utilizando las clases CSS proporcionadas por la biblioteca Font Awesome.

¿Utilizas iconos en tus menús? Hazlo saber en los comentarios!