{"id":31048,"date":"2023-05-03T20:04:12","date_gmt":"2023-05-03T18:04:12","guid":{"rendered":"\/tutoriales\/?p=31048"},"modified":"2025-12-18T22:15:15","modified_gmt":"2025-12-18T21:15:15","slug":"dashicons-wordpress","status":"publish","type":"post","link":"\/es\/tutoriales\/dashicons-wordpress\/","title":{"rendered":"C\u00f3mo utilizar y mostrar dashicons en WordPress"},"content":{"rendered":"

Una de las formas más sencillas de cambiar la apariencia de tu sitio web de WordPress es cambiando tu tema. Sin embargo, buscar el tema adecuado puede llevar mucho tiempo, por lo que cambiarlo con frecuencia para refrescar el sitio no es la solución más eficaz.<\/p>

Aquí es donde los Dashicons de WordPress pueden ser útiles.<\/p>

Los Dashicons son los íconos oficiales de fuentes de WordPress disponibles desde la versión 3.8. Estos son escalables, ligeros y personalizables mediante CSS. Es por eso que puedes utilizar dashicons sin que ello afecte a la velocidad de carga de la página de tu sitio web. <\/p>

En este artículo te mostraremos cómo habilitar y utilizar el conjunto de iconos de fuentes Dashicons en WordPress.<\/p>

\n\n\n\n\n\n\n\n\n\n

\n \n \n <\/svg>\n

\n ¿Qué son los Dashicons de WordPress?\n <\/p>\n <\/div>\n

Los Dashicons de WordPress son un conjunto de iconos de fuentes, incluido en el núcleo de WordPress desde la versión 3.8. Esta librería incluye más de 300 iconos de fuentes en formato SVG listos para usar, sin necesidad de cargar una biblioteca de iconos de terceros.<\/p><\/div>\n\n\n\n<\/p>

Cómo usar y mostrar Dashicons en WordPress<\/h2>

La biblioteca de Dashicons está disponible por defecto en el panel de administración de WordPress. Sin embargo, debes activar manualmente los Dashicons si deseas añadir iconos en tu tema.<\/p>

En las siguientes secciones, te enseñaremos cómo utilizar la biblioteca Dashicons en WordPress.<\/p>

Activar Dashicons en WordPress<\/h3>

El primer paso para habilitar Dashicons en WordPress es editar el archivo functions.php <\/strong>de tu tema.<\/p>

    \n
  1. Ve a Apariencia <\/strong>→ Editor de archivos de temas <\/strong>en el área de administración de WordPress.<\/li>\n<\/ol>
    \"Panel<\/figure>
      \n
    1. Abre el archivo functions.php<\/strong>.<\/li>\n<\/ol>
      \"Archivo<\/figure>
        \n
      1. Añade el siguiente fragmento de código al final del archivo Functions<\/strong>:<\/li>\n<\/ol>
        add_action( 'wp_enqueue_scripts', 'load_dashicons_front_end' ); \nfunction load_dashicons_front_end() { \nwp_enqueue_style( 'dashicons' ); \n}<\/pre>
          \n
        1. Una vez hecho esto, selecciona Actualizar archivo<\/strong>. Ahora puedes utilizar Dashicons en el front-end de tu sitio de WordPress.<\/li>\n<\/ol>
          \n\n\n\n        
          \n            
          \n                \n                    \n                <\/svg>\n                
          \n                    Consejo profesional                <\/p>\n            <\/div>\n            
          Asegúrate de añadir el código a tu tema hijo<\/a> para evitar que futuras actualizaciones del tema reviertan los cambios.<\/p>\n                    <\/div>\n        \n\n\n\n<\/p>
          Cómo encontrar los códigos HTML y CSS de Dashicon<\/h3>
          Después de habilitar Dashicons para el front-end de tu sitio, puedes añadir iconos a entradas, página de inicio o partes de tu tema.<\/p>
          Sigue los siguientes pasos para añadir Dashicons a los elementos del menú.<\/p>
            \n
          1. Accede a la biblioteca de iconos Dashicons en los Recursos para desarrolladores de WordPress<\/a>. Haz clic en el icono elegido, pulsa el enlace Copiar HTML <\/strong>y copia el código HTML de los Dashicons en la ventana emergente.<\/li>\n<\/ol>
            \"Página<\/figure>
              \n
            1. Dirígete a Apariencia <\/strong>→ Menús <\/strong>desde el panel de control de WordPress. Haz clic en el elemento de menú para expandir el menú desplegable y pega el código HTML en el cuadro de texto Etiqueta de navegación <\/strong>antes del texto.<\/li>\n\n\n\n
            2. Haz clic en Guardar menú<\/strong>. Sigue estos pasos para otros elementos de menú que desees modificar.<\/li>\n<\/ol>
              Además del código CSS<\/a>, Dashicons también proporciona el código HTML y el carácter glifo de tus iconos de fuentes para agilizar el proceso de creación de sitios web. Utiliza la función de filtro para encontrar un icono de fuente específico y copia el código apropiado en cualquier lugar dentro de tu sitio web de WordPress, utilizando un editor de texto.<\/p>
              Por ejemplo, copia el código CSS para añadir un icono de fuente al archivo style.css<\/strong>. Puedes utilizar un editor de CSS personalizado para modificar tu archivo CSS si no te gusta lo que ofrece el editor de archivos de temas.<\/p>
              Estas son algunas formas diferentes de utilizar Dashicons en WordPress:<\/p>