Desde WordPress 3.8 tenemos a nuestra disposición los maravillosos Dashicons pero ¿sabes cómo utilizarlos?
Los Dashicons son iconos a partir de fuentes que se pueden utilizar en publicaciones, temas, plugins o incluso la interfaz de administración de WordPress para sustituir a imágenes, mucho más pesadas. Además, los Dashicons son totalmente escalables en tamaño al ser vectores, por lo que se adaptan de maravilla a todo tipo de resoluciones de pantalla sin perder calidad.
Ahora bien, usarlos no es tan fácil como contarlo.
Añadir soporte de Dashicons
Antes de nada debes hacer que tu tema soporte Dashicons, para lo que debes ir al fichero functions.php del mismo y añadir lo siguiente:
//Soporte de dashicons add_action( 'wp_enqueue_scripts', 'load_dashicons_front_end' ); function load_dashicons_front_end() { wp_enqueue_style( 'dashicons' ); } WordPress ya soporta Dashicons así que para otros usos no necesitas nada más. Esto es necesario para que el tema muestre Dashicons.
Cómo añadir Dashicons en temas y plugins
Si vas a añadir, por ejemplo, tipos de entrada personalizadas en un tema de tu creación lo ideal es que las distingas mediante un icono específico que las distinga del resto.
El primer paso es ir a la página oficial de Dashicons de WordPress, donde elegirás el icono a utilizar haciendo clic sobre el mismo para, a continuación copiar el código que necesitas para incorporarlo en tu tema, normalmente en CSS, aunque también ofrece obtener el HTML o incluso el glifo.
Apuntas el nombre del icono y lo añades a la función de tu tipo de entrada personalizada, así:
$args = array( 'label' => __( 'libro', 'libro' ), 'description' => __( 'Descripción del tipo de entrada', 'libro' ), 'labels' => $labels, 'supports' => array( ), 'taxonomies' => array( 'category', 'post_tag' ), 'menu_position' => 15, 'menu_icon' => 'dashicons-book-alt', 'capability_type' => 'post', );
La etiqueta o descripción es la que tu quieras, solo tienes que definir la variable menu_icon con el nombre del Dashicon elegir, en el ejemplo “dashicons-book-alt”.
Lo que conseguimos es que nuestro tipo de entrada personalizada se identifique en el escritorio de WordPress con un bonito icono de un libro.
Si lo que queremos es añadir un icono distintivo a una página de ajustes de un plugin el proceso es parecido. Lo primero es elegir el icono, como antes, y a continuación añadimos el nombre del mismo a nuestra función del plugin que añada la página de ajustes, por ejemplo. Algo así:
function miplugin_custom_menu_page() { add_menu_page( 'Página de opciones del plugin', 'Opciones', 'manage_options', 'miplugin/options.php', '', 'dashicons-admin-tools', 81 ); } add_action( 'admin_menu', 'miplugin_custom_menu_page' ); Cómo usar Dashicons en un menú personalizado de WordPress
Pero no solo para desarrolladores están hechos los Dashicons, sino que podemos usarlos donde queramos. Un uso muy interesante sería en un menú personalizado, que quedará mucho más chulo si lo acompañamos de un bonito icono.
Una vez elegido el icono a utilizar, de nuevo de la página de Dashicons vista al principio de este artículo, en esta ocasión copiamos el código HTML.
Lo siguiente es aplicar la segunda variante del truco que ya vimos para usar imágenes en los menús personalizados de WordPress, solo que en este caso el código a utilizar será el que nos facilita la página de Dashicons, así de simple.
A modo de recordatorio, el proceso es este:
- Crea un elemento nuevo de menú en el que en la denominada Etiqueta de navegación, en vez de poner el típico texto, simplemente pega el código HTML del Dashicon.
- La URL del elemento del menú será el que tu quieras, por supuesto.
- Guarda los cambios.
Cómo usar Dashicons en cualquier otro sitio
Creo que es bastante obvio que puedes usar Dashicons en cualquier parte. Copiando el código HTML puedes añadirlos para ilustrar tus publicaciones, como elementos meta en tu tema mediante CSS o HTML, lo que quieras.
Si vas a utilizarlos como elemento común en tu tema simplemente crea una clase CSS para su uso posterior en el tema, y si los usas puntualmente simplemente utiliza el HTML donde quieras mostrarlos.
Para incorporar un Dashicon en tu CSS podría ser algo así:
.myicon:before { content: "\f155"; display: inline-block; -webkit-font-smoothing: antialiased; font: normal 20px/1 'dashicons'; vertical-align: top; } Para tus publicaciones, puedes copiar y pegar el HTML del icono a usar o, si los usas mucho, incluso instalar un plugin como JM Dashicons Shortcode que te facilita la inserción de iconos en tus entradas o páginas.
