7 days of unlimited WordPress themes, plugins & graphics - for free!* Unlimited asset downloads! Start 7-Day Free Trial
Advertisement
  1. Web Design
  2. WordPress

Tutorial de WordPress sobre Dashicons

Scroll to top
Read Time: 5 mins

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.

Sitio web oficial de Dashicons, los iconos de WordPressSitio web oficial de Dashicons, los iconos de WordPressSitio web oficial de Dashicons, los iconos de WordPress
Sitio web oficial de Dashicons, los 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:

¡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.  

Y este el aspecto que tendrá el icono de Dashicons en WordPress:

Settings page menu iconSettings page menu iconSettings page menu icon

También puedes usar Dashicons en el menú de administración para tipos de entradas personalizadas.

Esto añade un icono de menú para un tipo de entrada personalizada, similar al anterior ejemplo de la página de ajustes.

Custom post type menu iconCustom post type menu iconCustom post type menu icon

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:

Esto renderiza los cuatro Dashicons especificados en una única fila.

Componente de Dashicons en un bloque del editorComponente de Dashicons en un bloque del editorComponente de Dashicons en un bloque del editor

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.

Código de marcado de DashiconsCódigo de marcado de DashiconsCódigo de marcado de Dashicons

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.  

Código de marcado de DashiconsCódigo de marcado de DashiconsCódigo de marcado de Dashicons
Para que esto funcione en el front-end, tendrás que encolar manualmente la fuente de Dashicons tal y como hemos descrito anteriormente.

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. 

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Web Design tutorials. Never miss out on learning about the next big thing.
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.