El panel de administración estándar de WordPress se ve ordenado, pero registre un par de tipos de contenido personalizados y el menú se convierte en un revoltijo de iconos predeterminados idénticos. «Entradas», «Páginas», su «Portafolio», «Testimonios», todos con el mismo pictograma de chincheta. La vista tropieza, el cliente se confunde y el área de administración pierde su pulido.

Podría instalar un plugin para iconos personalizados. Podría cargar Font Awesome e incorporar más de 2.000 iconos solo para usar cinco. O podría saltarse ambas opciones, porque WordPress incluye la fuente de iconos Dashicons incorporada desde la versión 3.8. Sin dependencias adicionales, sin CSS extra. Todo ya está en su servidor.

En esta guía cubriremos cómo usar Dashicons para tipos de contenido personalizados, en el frontend de su tema y mediante un shortcode práctico, con ejemplos de código funcionales que puede copiar y pegar ahora mismo.

💡 Resumen rápido:

• Registre un tipo de contenido personalizado, establezca el argumento menu_icon con una clase CSS de Dashicon y el icono aparece en el administrador sin un solo plugin.
• Encole wp_enqueue_style('dashicons') en el frontend e inserte iconos mediante una etiqueta HTML <span> en cualquier parte de su tema.
• Cree un shortcode [dashicon icon="..."] y el cliente añade iconos al contenido sin tocar código.

Qué son los Dashicons y por qué los necesita

Dashicons es la fuente de iconos oficial para el panel de administración de WordPress. Llegó en la versión 3.8 junto con un rediseño importante del administrador y desde entonces se ha usado para cada elemento del menú izquierdo: «Entradas», «Medios», «Plugins», «Ajustes», todos son Dashicons.

La fuente contiene aproximadamente 300 iconos que cubren casi cualquier necesidad: tipos de contenido, medios, redes sociales, el editor, notificaciones, taxonomías, widgets. Hay un catálogo completo con búsqueda disponible en la página de Dashicons en los Recursos para Desarrolladores de WordPress.

La principal ventaja frente a algo como Font Awesome es el costo cero de inclusión. Dashicons ya está cargado en el administrador, y para el frontend lo añade con una sola línea en functions.php. No está arrastrando una librería de más de 2.000 iconos a su sitio cuando el 90% nunca se usará. Si necesita un conjunto personalizado, consulte Fontello, donde puede construir una hoja de estilos solo con los glifos que elija.

Una nota importante: el proyecto Dashicons dejó de aceptar solicitudes de nuevos iconos en junio de 2023. El conjunto existente está congelado, pero para las tareas típicas de WordPress aún cubre sus necesidades con margen de sobra.

Método 1: Icono para un tipo de contenido personalizado

El escenario más común es registrar un nuevo tipo de contenido mediante register_post_type y querer un icono significativo junto a su nombre en el administrador en lugar de la «chincheta» predeterminada.

Esto se hace con el argumento menu_icon:

1
/**
2
 * Registers a custom post type "Portfolio" with a Dashicons icon.
3
 * Code goes into the theme's or child theme's functions.php.
4
 */
5
function sd_register_portfolio_post_type() {
6
    register_post_type( 'portfolio', array(
7
        'public'      => true,
8
        'label'       => __( 'Portfolio', 'textdomain' ),
9
        'menu_icon'   => 'dashicons-portfolio',
10
        'has_archive' => true,
11
        'supports'    => array( 'title', 'editor', 'thumbnail' ),
12
    ) );
13
}
14
add_action( 'init', 'sd_register_portfolio_post_type', 0 );

El valor de menu_icon es la clase CSS del icono. Vaya a la página de Dashicons, haga clic en el icono que desee y copie su clase del tooltip. Simplemente proporcione dashicons-{slug} y WordPress renderizará el icono en el menú izquierdo automáticamente.

Antes de Dashicons tenía que especificar una URL de imagen directa para menu_icon. En un sitio con una docena de plugins, los iconos variaban en estilo y el área de administración se veía descuidada. Ahora todos los iconos de tipos de contenido heredan el estilo unificado de la interfaz de WordPress, limpio y sin esfuerzo.

El mismo enfoque funciona para páginas añadidas mediante add_menu_page:

1
add_menu_page(
2
    __( 'My Reports', 'textdomain' ),
3
    __( 'Reports', 'textdomain' ),
4
    'manage_options',
5
    'my-reports',
6
    'sd_render_reports_page',
7
    'dashicons-chart-area',
8
    25
9
);

Pase la clase Dashicon como quinto parámetro después de la función callback, y el nuevo elemento del menú obtendrá un icono de la misma familia que todos los estándar.

Método 2: Dashicons en el frontend de su tema

Los iconos son útiles más allá del panel de administración. Los metadatos de las entradas (fecha, categoría, autor), un botón de búsqueda en la cabecera, un icono de carrito: estos son lugares típicos donde un icono hace la interfaz más clara.

Para habilitar Dashicons en el lado público del sitio, añada a functions.php:

1
/**
2
 * Enqueues the Dashicons stylesheet on the frontend.
3
 * Code goes into the child theme's functions.php.
4
 */
5
add_action( 'wp_enqueue_scripts', function() {
6
    wp_enqueue_style( 'dashicons' );
7
} );

Ahora puede insertar un icono mediante HTML en cualquier plantilla del tema:

1
<span class="dashicons dashicons-calendar"></span>

Cambie calendar por el slug del icono que necesite, y se mostrará. Este HTML funciona en cualquier parte del tema: header.php, footer.php, single.php, incluso directamente en el campo «Etiqueta de navegación» de un elemento de menú (WordPress permite HTML en las etiquetas de navegación).

Para agrupar un icono con texto, use la clase auxiliar dashicons-before; añade el icono antes del contenido del elemento sin marcado adicional:

1
<h2 class="dashicons-before dashicons-smiley">Welcome Heading</h2>

Método 3: Shortcode para insertar iconos en el contenido

Si está construyendo un sitio para un cliente que no trabaja con HTML, proporciónele un shortcode. Usted añade el código a functions.php una vez, y el cliente inserta un icono en cualquier entrada mediante [dashicon icon="..."].

1
/**
2
 * Registers the shortcode [dashicon icon="..."] to insert Dashicons into content.
3
 * Requires prior enqueuing of dashicons via wp_enqueue_style (Method 2).
4
 * Code goes into the theme's functions.php or a separate included file.
5
 */
6
add_shortcode( 'dashicon', function( $atts ) {
7
    $atts = shortcode_atts( array(
8
        'icon' => 'menu',
9
    ), $atts, 'dashicon' );
10
 
11
    if ( ! empty( $atts['icon'] ) ) {
12
        return sprintf(
13
            '<span class="dashicons dashicons-%s"></span>',
14
            esc_attr( $atts['icon'] )
15
        );
16
    }
17
 
18
    return '';
19
} );

Uso en el editor:

1
[dashicon icon="chart-pie"]

El shortcode asume que usted ya ha encolado el estilo Dashicons en el frontend (Método 2). Si no lo ha hecho, el icono no se mostrará. Alternativamente, puede incrustar wp_enqueue_style directamente dentro del cuerpo del shortcode para que el estilo se cargue solo cuando se use realmente un icono. Pero este enfoque tiene una salvedad: la hoja de estilos se carga en el pie de página, lo que provoca que los iconos «parpadeen» después de renderizarse. La inclusión global es más fiable.

Extra: Dashicons en bloques de Gutenberg

Si está desarrollando bloques personalizados, Dashicons también funciona allí. Al registrar un bloque mediante registerBlockType, establezca el parámetro icon con un nombre de Dashicon:

1
registerBlockType( 'my-plugin/my-block', {
2
    apiVersion: 2,
3
    title:    'My Block',
4
    icon:     'dashicons-admin-site',
5
    category: 'design',
6
    edit()   {},
7
    save()   {},
8
} );

Para componentes React en el panel de administración, hay un componente Dashicon listo para usar disponible en el paquete @wordpress/components:

1
import { Dashicon } from '@wordpress/components';
2
 
3
const MyComponent = () => (
4
    <div>
5
        <Dashicon icon="admin-home" />
6
        <Dashicon icon="products" />
7
        <Dashicon icon="wordpress" />
8
    </div>
9
);

Esto funciona solo en el panel de administración (editor de bloques, páginas de ajustes). En el frontend el componente Dashicon no incluye los estilos; usted aún necesita wp_enqueue_style('dashicons') allí.

⁉️🤔 Preguntas frecuentes

¿Necesito instalar un plugin para usar Dashicons?

No. Dashicons está integrado en el núcleo de WordPress desde la versión 3.8. En el panel de administración se carga por defecto. Para el frontend, una sola línea (wp_enqueue_style('dashicons')) en functions.php es suficiente.

¿Por qué Dashicons es mejor que Font Awesome?

Por el tamaño y la dependencia externa cero. Font Awesome contiene más de 2000 iconos, la mayoría de los cuales nunca necesitará. Dashicons tiene aproximadamente 300, todos adaptados para WordPress, y la hoja de estilos ya está en su servidor. Si el icono existe en el catálogo de Dashicons, úselo y evite la sobrecarga.

¿Qué iconos están disponibles en Dashicons?

Alrededor de 300: tipos de contenido, medios, redes sociales, editor, notificaciones, taxonomías, widgets y glifos específicos de WordPress (Products, Buddicons). Una lista completa con buscador está en developer.wordpress.org/resource/dashicons.

¿Puedo añadir mi propio icono a Dashicons?

No. Desde junio de 2023 el proyecto ya no acepta solicitudes de nuevos iconos. Si el glifo que necesita no está en el catálogo, use Font Awesome, Fontello o suba un SVG personalizado.

¿Por qué no se muestran los iconos en el frontend?

Lo más probable es que haya olvidado llamar a wp_enqueue_style('dashicons'). Revise su functions.php: la llamada debe estar enganchada a wp_enqueue_scripts. Otra posible causa es que un tema o plugin esté eliminando Dashicons mediante wp_dequeue_style.

¿Vale la pena usar Dashicons en 2026?

Respuesta corta: sí, para el panel de administración y necesidades sencillas del frontend. Dashicons significa cero sobrecarga, renderizado predecible e integración total con la interfaz de WordPress. Para tipos de contenido personalizados y elementos del menú de administración sigue siendo el estándar de facto.

Comprenda las limitaciones desde el principio: el conjunto de iconos está congelado y no se añadirán nuevos iconos. Si está construyendo un sitio con un diseño visual rico, Font Awesome o un sprite SVG personalizado le darán más flexibilidad. Pero para la mayoría de las tareas típicas de WordPress la fuente integrada es más que suficiente, y arrastrar una librería de más de 2000 glifos para tres iconos no tiene sentido.

La forma más rápida de añadir un icono para un tipo de contenido personalizado es copiar la clase del catálogo de Dashicons y colocarla en menu_icon. Lleva 30 segundos y no requiere plugins.

Si este material le resultó útil, vea el videotutorial sobre el uso de Dashicons en menús de navegación: está en inglés, pero cada paso se muestra en pantalla para que pueda seguirlo sin necesidad de traducción.