Cómo utilizar en tu blog la tipografía de iconos de WordPress

Cómo utilizar en tu blog la tipografía de iconos de WordPress

dashicons

Existen muchas tipografías de iconos que puedes utilizar en tu blog. La ventaja que tienen es que los iconos, al ser representados mediante CSS y no como imágenes, ahorran llamadas y tiempo de carga de la página. Aquí ya vimos hace tiempo tipografías como Font Awesome, que es quizá la más popular de todas. Pero WordPress también tiene la suya propia desde la versión 3.8, llamada Dashicons.

No tiene tantos iconos como Font Awesome, pero utilizarla es mucho más sencillo, ya que viene instalada por defecto, y solo es necesario añadir unas pocas líneas de código para usarla. Ahí están disponibles los iconos de las principales redes sociales, así como otros adicionales para los formatos de posts, y muchos más.

Para que se muestren en tu blog en el sitio deseado hay que seguir dos sencillos pasos:

1. Añadir al archivo header.php del theme que estés usando la siguiente línea, entre las etiquetas :

<link rel="stylesheet" href="<?php bloginfo('url'); ?>/wp-includes/css/dashicons.css">

2. Añadir al archivo style.css del theme que estés usando los selectores para mostrar los iconos. Por ejemplo, para mostrar un icono de Facebook precediendo a un texto añadiríamos:

.facebook-text:before {content: "\f305";
display: inline-block;
-webkit-font-smoothing: antialiased;
font: normal 20px/1 'dashicons';
vertical-align: top;}