Hoy vas a ver una manera de mejorar el menú de navegación de tu web. Aprenderás a añadir iconos en cada elemento del menú para hacer más atractivo su diseño. Por ejemplo, podrías añadir el icono del carrito en la sección tienda para hacerla más visible, el icono de un sobre o una arroba en contacto, una casita en la home etc…
Algunos temas o themes de WordPress traen ya integrada la opción de añadir Iconos en los menús de navegación. O bien añadiéndolo mediante un plugin o bien en el propio diseño mediante código. Aquí verás cómo hacerlo con ambas opciones:
Añadir iconos usando código
Los iconos que se muestran en las páginas web, no son en realidad imágenes, es un tipo de fuente que se usa para mostrar estas ilustraciones. Así que, lo primero que tenemos que hacer es instalar la fuente Font Awesome en nuestra web.
- Instala Font Awesome y elige tus iconos
- Añade tus iconos en el menú
- Cambia el diseño de tus iconos
Abre el archivo functions.php, añade el siguiente código y guarda el archivo: (Recuerda siempre cambiarlo desde el Theme Child y no desde la plantilla base). Te recordamos como instalar y usar un Child Theme en este artículo.
function wpdean_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', 'wpdean_enqueue_icon_stylesheet' );
Con este sencillo paso ya tendríamos la fuente instalada, ahora lo siguiente sería que entres en esta web y decidas que iconos vas a usar para tu menú.
http://fontawesome.io/icons/
Como has podido ver en la página http://fontawesome.io/icons/ tienes el listado de todos los iconos que puedes usar. Si haces clic encima de cada icono verás a una pantalla como esta.
Lo que nos interesa es copiar este código, que puedes encontrar en cada página de cada icono, y pegarlo en el elemento del menú que decidas, como vamos a hacer ahora.
Ve al escritorio de WordPress > Apariencia > Menús y pega de la manera que ves en la imagen el código en el elemento que corresponda.
Inicio // Si queremos que el icono aparezca delante del nombre Inicio // Si queremos que el icono aparezca detrás del nombre
Así, ya se mostrarían los iconos en tu menú de navegación.
Si quieres cambiar el diseño de los iconos, cambiar el tamaño, el color, la posición… etc sólo tienes que editar tu código CSS.
Añadir iconos usando plugin
Para los que no os queréis complicar la vida usando códigos ni editando archivos, tenéis a vuestra disposición este sencillo plugin: Menu Icons.
Al instalarlo te aparecerá automáticamente una nueva opción de configuración dentro de Apariencia > Menú, como puedes ver en esta imagen.
Desde Global puedes decidir qué fuentes de imágenes vas a usar (en este caso puedes usar otras además de Font Awesome) y desde Menú Actual elige que tamaño tendrán, que posición…etc. Una vez configurado esto, en cada elemento del menú (Icono:Selección) podrás seleccionar el icono que quieres usar.
¿Has podido añadir tus iconos? Déjanos tu experiencia en los comentarios de este artículo.
