Spanish (Español) translation by Eva Collados Pascual (you can also view the original English article)
Los Dashicons son un conjunto de iconos para WordPress, ya integrados en él, que proporcionan una forma sencilla de añadir iconos en tu sitio WordPress. Desde que fueron incluidos en este CMS, han crecido hasta convertirse en un recurso de gran valor, e incluyen un rico conjunto de alrededor de hasta 300 distintos iconos de WordPress.
Los iconos de Dashicons para WordPress son fáciles de utilizar y cubren casi todos los casos de uso, de modo que reducen la necesidad de usar bibliotecas de terceros.
Datos curiosos: Cada vez que visitas la página de inicio de Dashicons, ¡muestra un icono aleatorio! Pruébalo tú mismo.
¿Qué son los iconos de fuentes?
Los iconos de fuente son exactamente lo que parece. Cada conjunto de iconos fuente (por ejemplo, los Dashicons de WordPress) son una fuente estándar, como cualquier otra, pero es una que contiene símbolos en lugar de letras y números.
Esto logra que sean muy fáciles de usar, pero la desventaja de los Dashicons es que están recopilados en un único y gran archivo de imagen ("sprite") que contiene todos los iconos individuales.
Como puedes imaginar, cuanto más crece una colección de iconos, mayor es el peso del archivo resultante. Incluso cacheado, no es ideal incluir todos los iconos en WordPress si solo vas a necesitar uno o dos.
Sin embargo, esto no ha evitado que los iconos de fuente sean tremendamente populares durante los últimos años. Continúa leyendo y aprende más con este tutorial sobre WordPress y Dashicons.
Acceder a los Dashicons en WordPress
La buena noticia es que el proyecto Dashicons ya está incluido en el núcleo de WordPress y, por tanto, son fiables y están listos para ser usados de inmediato. De hecho, se añaden automáticamente a cada página de administración de WordPress, de modo que no tienes que realizar mucho trabajo para hacer uso de los mismos.
Sin embargo, si intentas mostrar Dashicons en el front-end de tu sitio web, debes encolarlos antes de intentar usarlos.
Para habilitar los Dashicons en el front-end de tu sitio, añade la siguiente función a tu plugin o tema:
function enable_frontend_dashicons() {
wp_enqueue_style( 'dashicons' );
}
add_action( 'wp_enqueue_scripts', 'enable_frontend_dashicons' );
¡Ahora estamos preparados para usar Dashicons en WordPress!
Tutorial de WordPress sobre cómo mostrar Dashicons
¡Ahora viene la parte que has estado esperando! Los iconos de Dashicons pueden añadirse a tu sitio de unas cuantas distintas formas, dependiendo de cuáles sean tus necesidades:
- Un icono personalizado de plugin para el menú de administración de WordPress
- Un icono personalizado para la página de ajustes de un plugin
- Un icono para el componente de un bloque
- Cualquier lugar del contenido de una página o entrada en el frontend
Crear un icono personalizado de menú para un plugin
Si estás desarrollando un plugin, puedes usar los Dashicons ya disponibles en el panel de administración de WordPress para mostrar un icono de menú personalizado para dicho plugin, y también si lo deseas para el titular de su página de ajustes.
function htud_add_options_page() {
add_menu_page(
'How to use Dashicons',
'How to use Dashicons',
'manage_options',
'how-to-use-dashicons',
'htud_render_settings_page',
'dashicons-superhero-alt' // Add Dashicon to menu.
);
}
add_action('admin_menu', 'htud_add_options_page');
function htud_render_settings_page() {
// Add Dashicon to settings page title.
?>
<div class="wrap" style="display:flex;align-items:baseline;">
<span class="dashicons dashicons-admin-site"></span>
<h1 class="heading"><?php _e( 'Settings Page', 'text-domain' ); ?></h1>
</div>
<?php
}
Y este el aspecto que tendrá el icono de Dashicons en WordPress:
También puedes usar Dashicons en el menú de administración para tipos de entradas personalizadas.
function custom_post_type() {
$args = array(
'label' => __( 'My Custom Post Type', 'text_domain' ),
'show_ui' => true,
'menu_icon' => 'dashicons-drumstick', // Add Dashicon to custom post type menu.
);
register_post_type( 'My Custom Post Type', $args );
}
add_action( "init", "custom_post_type" );
Esto añade un icono de menú para un tipo de entrada personalizada, similar al anterior ejemplo de la página de ajustes.
Usar en WordPress Dashicons para un bloque de Gutenberg
Si desarrollas bloques para el editor Gutenberg, puedes utilizar Dashicons directamente en tu código a través del componente <Dashicon/ >.
El componente es muy fácil de usar. Simplemente, impórtalo y añádelo a un bloque de la siguiente forma:
import { useBlockProps } from '@wordpress/block-editor';
import { Dashicon } from '@wordpress/components';
export default function Edit() {
return (
<div {...useBlockProps()}>
<Dashicon icon="businessman" />
<Dashicon icon="awards" />
<Dashicon icon="pets" />
<Dashicon icon="heart" />
</div>
);
}
Esto renderiza los cuatro Dashicons especificados en una única fila.
Si inspeccionamos el código, comprobaremos el código de salida que proporciona el componente <Dashicons />, se trata de una etiqueta span con la misma estructura de contenido generada en el sitio web de Dashicons cuando seleccionas un icono y pulsas el enlace Copiar HTML.
Añadir Dashicons en WordPress con el bloque para HTML nativo
La otra forma en la que se pueden usar los iconos en WordPress de Dashicons consiste en añadir el código del icono a través del bloque de Gutenberg para HTML. Así podrás añadir directamente el código de uno o varios iconos de Dashicons.
Conclusión
En este tutorial de WordPress sobre Dashicons he explicado cómo funcionan en este CMS. A continuación, te he mostrado diversas disponibles formas en las que puedes añadir los iconos de Dashicons en tu propio sitio WordPress o en tus plugins.
