Iconos en nuestro menú principal y en barra lateral.

Personaliza tu menú con Dashicons WP

En el post de hoy vamos a ver cómo podemos mejorar el aspecto de nuestra web añadiendo iconos en nuestro menú de navegación.

Vamos a ello.

×Recuerda Hacer una copia de los archivos que vayas a editar

Desde la versión 3.8 WordPress incorpora una serie de iconos para el panel de administración llamada Dashicons. Con cada versión nueva de WP se van añadiendo más iconos.

Vamos a usar Dashicons para cambiar el aspecto de nuestro menú de navegación.

Cargando Dashicons

Edita el archivo functions.php de tu tema y añade el siguiente código.

add_action( 'wp_enqueue_scripts', 'estilos_iconos' );
 function estilos_iconos() {
wp_enqueue_style( 'dashicons' );
}

Usando el icono

Una vez cargado nuestros dashicons vamos a implementar algunos. Aquí tienes todos los dashicons disponibles.

Escoge los que quieras usar. Para este ejemplo hemos escogido los iconos de WP, Home, y Audio.

iconos-dashicons

Todo lo que necesitas hacer es aplicar esto a la pseudo clase: before del elemento.

Añade el siguiente código CSS a tu hoja de estilos.

.icono-home:before { 
 font-family: "dashicons";
 content: "\f102"; 
color: #F80505; 
font-size: 16px;
width:20px;
height:18px; 
float:left;
}
.icono-audio:before { 
 font-family: "dashicons"; 
content: "\f127"; 
color: #2D792E; 
font-size: 16px; 
width:20px;
height:18px; 
float:left;
}
.icono-wordpress:before { 
 font-family: "dashicons"; 
content: "\f324";
 color: #87CEEB; 
font-size: 16px;
width:20px;
height:18px; 
float:left;
}

Modifica los iconos a tu gusto, así como el color etc.

Actualiza el menú

Accede a Apariencia/Menús y en la parte superior derecha verás una pestaña llamada Opciones de pantalla. Despliégala y marca la casilla Clases CSS.

iconos-clase-css

Al activarla verás que en elemento del menú hay un campo para que pongas la clase que aplicaste anteriormente.

icono-menu-clase

Resultado

Para este ejemplo hemos usado un tema hijo del tema Twenty Fourteen y hemos creado un menú para ilustrarlo. Colocandólo también en la barra lateral para que te hagas una idea de como queda.

Iconos en nuestro menú principal y en barra lateral.
Iconos en nuestro menú principal y en barra lateral.

Sencillo ¿verdad?.

Ahora ya puedes Personalizar tu menú con Dashicons WP y darle a tu blog otro aspecto.

Y Tú ¿Usas iconos en tus menús?.

Comenta, comparte, difunde.

Carlos A para FreelanceEvolution.

 

Deja un comentario

Your email address will not be published.Los campos requeridos están marcados *