Utilizar Dashicons en posts y páginas WordPress

Dashicons de WordPress

Los dashicons son los iconos oficiales de la administración de WordPress. Son iconos vectoriales a partir de fuentes y por tanto pueden ser redimensionados sin pérdida de calidad.

Aunque sean los iconos de la parte administrativa de WordPress, podemos utilizarlos en las entradas y páginas que publiquemos. Para ello, lo primero que debemos hacer es dar soporte a nuestro tema para los dashicons incluyendo el siguiente código en el archivo functions.php de nuestro tema:

<?php
add_action( 'wp_enqueue_scripts', 'galusso_dashicons_posts' );
function galusso_dashicons_posts() {
    wp_enqueue_style( 'dashicons' );
}
?>

Una vez hecho esto, lo único que debemos hacer para mostrar un dashicon en nuestro post es incluir el código html que se nos facilita en la página de recursos de WordPress. Por ejemplo, para este icono hemos pegado este fragmento html:

<span class="dashicons dashicons-admin-site"></span>

Pero esto no es todo, si utilizamos con mucha frecuencia algunos dashicons podemos crear nuestras propias clases css para dashicons con un nombre fácil de recordar. Por ejemplo, para el icono anterior podríamos crear la siguiente clase:

.web-icon:before {
    content: "\f319"; /* Lo obtenemos en la página de los dashicons antes mencionada */
    display: inline-block;
    -webkit-font-smoothing: antialiased;
    font: normal 20px/1 'dashicons';
    vertical-align: middle;
}

y en nuestro post o página pondríamos:

<span class="web-icon"></span>

Espero que os sirva.




Leave a Reply

Your email address will not be published. Required fields are marked *