{"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":"<p>Una de las formas m&aacute;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&oacute;n m&aacute;s eficaz.<\/p><p>Aqu&iacute; es donde los Dashicons de WordPress pueden ser &uacute;tiles.<\/p><p>Los Dashicons son los &iacute;conos oficiales de fuentes de WordPress disponibles desde la versi&oacute;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&aacute;gina de tu sitio web.&nbsp;<\/p><p>En este art&iacute;culo te mostraremos c&oacute;mo habilitar y utilizar el conjunto de iconos de fuentes Dashicons en WordPress.<\/p><p>\n\n\n\n\n\n\n\n\n\n<div class=\"protip\">\n                    <h2 class=\"featured-snippet title\">&iquest;Qu&eacute; son los Dashicons de WordPress?<\/h2>\n                    <p>Los Dashicons de WordPress son un conjunto de iconos de fuentes, incluido en el n&uacute;cleo de WordPress desde la versi&oacute;n 3.8. Esta librer&iacute;a incluye m&aacute;s de 300 iconos de fuentes en formato SVG listos para usar, sin necesidad de cargar una biblioteca de iconos de terceros.<\/p>\n                <\/div>\n\n\n\n<\/p><h2 class=\"wp-block-heading\" id=\"h-como-usar-y-mostrar-dashicons-en-wordpress\">C&oacute;mo usar y mostrar Dashicons en WordPress<\/h2><p>La biblioteca de Dashicons est&aacute; disponible por defecto en el panel de administraci&oacute;n de WordPress. Sin embargo, debes activar manualmente los Dashicons si deseas a&ntilde;adir iconos en tu tema.<\/p><p>En las siguientes secciones, te ense&ntilde;aremos c&oacute;mo utilizar la biblioteca Dashicons en WordPress.<\/p><h3 class=\"wp-block-heading\">Activar Dashicons en WordPress<\/h3><p>El primer paso para habilitar Dashicons en WordPress es editar el archivo <strong>functions.php <\/strong>de tu tema.<\/p><ol class=\"wp-block-list\">\n<li>Ve a <strong>Apariencia <\/strong>&rarr; <strong>Editor de archivos de temas <\/strong>en el &aacute;rea de administraci&oacute;n de WordPress.<\/li>\n<\/ol><figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"424\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2023\/05\/image-5.png\/public\" alt=\"Panel de control de WordPress\" class=\"wp-image-31054\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2023\/05\/image-5.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2023\/05\/image-5.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2023\/05\/image-5.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2023\/05\/image-5.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure><ol class=\"wp-block-list\" start=\"2\">\n<li>Abre el archivo <strong>functions.php<\/strong>.<\/li>\n<\/ol><figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"393\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2023\/05\/image-6.png\/public\" alt=\"Archivo Functions.php del tema de WordPress\" class=\"wp-image-31055\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2023\/05\/image-6.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2023\/05\/image-6.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2023\/05\/image-6.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2023\/05\/image-6.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure><ol class=\"wp-block-list\" start=\"3\">\n<li>A&ntilde;ade el siguiente fragmento de c&oacute;digo al final del archivo <strong>Functions<\/strong>:<\/li>\n<\/ol><pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">add_action( 'wp_enqueue_scripts', 'load_dashicons_front_end' ); \nfunction load_dashicons_front_end() { \nwp_enqueue_style( 'dashicons' ); \n}<\/pre><ol class=\"wp-block-list\" start=\"4\">\n<li>Una vez hecho esto, selecciona <strong>Actualizar archivo<\/strong>. Ahora puedes utilizar Dashicons en el front-end de tu sitio de WordPress.<\/li>\n<\/ol><p>\n\n\n\n<div class=\"protip\">\n                    <h4 class=\"title\">Consejo profesional<\/h4>\n                    <p>Aseg&uacute;rate de a&ntilde;adir el c&oacute;digo a tu <a href=\"\/es\/tutoriales\/utilizar-child-theme\">tema hijo<\/a> para evitar que futuras actualizaciones del tema reviertan los cambios.<\/p>\n                <\/div>\n\n\n\n<\/p><h3 class=\"wp-block-heading\">C&oacute;mo encontrar los c&oacute;digos HTML y CSS de Dashicon<\/h3><p>Despu&eacute;s de habilitar Dashicons para el front-end de tu sitio, puedes a&ntilde;adir iconos a entradas, p&aacute;gina de inicio o partes de tu tema.<\/p><p>Sigue los siguientes pasos para a&ntilde;adir Dashicons a los elementos del men&uacute;.<\/p><ol class=\"wp-block-list\">\n<li>Accede a la biblioteca de iconos Dashicons en los <a href=\"https:\/\/developer.wordpress.org\/resource\/dashicons\/\" target=\"_blank\" rel=\"noreferrer noopener\">Recursos para desarrolladores de WordPress<\/a>. Haz clic en el icono elegido, pulsa el enlace <strong>Copiar HTML <\/strong>y copia el c&oacute;digo HTML de los Dashicons en la ventana emergente.<\/li>\n<\/ol><figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"1024\" height=\"488\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2023\/05\/image-7.png\/public\" alt=\"P&aacute;gina de recursos para desarrolladores de WordPress\" class=\"wp-image-31058\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2023\/05\/image-7.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2023\/05\/image-7.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2023\/05\/image-7.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2023\/05\/image-7.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure><ol class=\"wp-block-list\" start=\"2\">\n<li>Dir&iacute;gete a <strong>Apariencia <\/strong>&rarr; <strong>Men&uacute;s <\/strong>desde el panel de control de WordPress. Haz clic en el elemento de men&uacute; para expandir el men&uacute; desplegable y pega el c&oacute;digo HTML en el cuadro de texto <strong>Etiqueta de navegaci&oacute;n <\/strong>antes del texto.<\/li>\n\n\n\n<li>Haz clic en <strong>Guardar men&uacute;<\/strong>. Sigue estos pasos para otros elementos de men&uacute; que desees modificar.<\/li>\n<\/ol><p>Adem&aacute;s del <a href=\"\/es\/tutoriales\/anadir-css-personalizado-wordpress\">c&oacute;digo CSS<\/a>, Dashicons tambi&eacute;n proporciona el c&oacute;digo HTML y el car&aacute;cter glifo de tus iconos de fuentes para agilizar el proceso de creaci&oacute;n de sitios web. Utiliza la funci&oacute;n de filtro para encontrar un icono de fuente espec&iacute;fico y copia el c&oacute;digo apropiado en cualquier lugar dentro de tu sitio web de WordPress, utilizando un editor de texto.<\/p><p>Por ejemplo, copia el c&oacute;digo CSS para a&ntilde;adir un icono de fuente al archivo <strong>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><p>Estas son algunas formas diferentes de utilizar Dashicons en WordPress:<\/p><ul class=\"wp-block-list\">\n<li>En la meta de la entrada, por ejemplo, delante del t&iacute;tulo.<\/li>\n\n\n\n<li>En la configuraci&oacute;n del plugin.<\/li>\n\n\n\n<li>Como parte del contenido de entradas y p&aacute;ginas.<\/li>\n\n\n\n<li>Dentro o delante de un bloque Gutenberg.<\/li>\n<\/ul><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><a href=\"\/es\/hosting-wordpress\"><img decoding=\"async\" width=\"1024\" height=\"300\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2024\/06\/ES-New-WP_in-text-banner.png\/public\" alt=\"\" class=\"wp-image-40615\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2024\/06\/ES-New-WP_in-text-banner.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2024\/06\/ES-New-WP_in-text-banner.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2024\/06\/ES-New-WP_in-text-banner.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2024\/06\/ES-New-WP_in-text-banner.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure><\/div><h3 class=\"wp-block-heading\">Creaci&oacute;n de iconos personalizados con Dashicons<\/h3><p>El proyecto Dashicons dej&oacute; de aceptar peticiones de iconos en 2020. Por lo tanto, la &uacute;nica forma de crear un icono personalizado es modific&aacute;ndolo mediante c&oacute;digo CSS.<\/p><p>Aqu&iacute; un ejemplo de fragmento de c&oacute;digo para cambiar el tama&ntilde;o y el color de un Dashicons. Col&oacute;calo en tu archivo <strong>style.css <\/strong>y aseg&uacute;rate de que el selector CSS se dirige al elemento elegido para que este m&eacute;todo funcione.<\/p><pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">.dashicons { \nfont-size: 50px; \nwidth: 50px; \nheight: 50px; \ncolor: blue;\n}<\/pre><h3 class=\"wp-block-heading\">A&ntilde;adir Dashicons a los tipos de entradas personalizadas de WordPress<\/h3><p><a href=\"\/es\/tutoriales\/custom-post-types-wordpress\/\">Los tipos de entrada personalizados de WordPress<\/a> aparecen en el men&uacute; de control. Como otros elementos del men&uacute;, un tipo de entrada personalizado tiene un icono a su lado. El &uacute;nico problema es que WordPress asigna por defecto el mismo icono que a las<strong> entradas<\/strong>.<\/p><figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"308\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2023\/05\/image-10.png\/public\" alt=\"Panel de control de WordPress\" class=\"wp-image-31061\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2023\/05\/image-10.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2023\/05\/image-10.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2023\/05\/image-10.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2023\/05\/image-10.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure><p>A&ntilde;adir Dashicons a tus tipos de entrada personalizadas puede resolver este problema y hacer que tu panel de administraci&oacute;n sea m&aacute;s agradable. Si desarrollas plugins personalizados, puedes asignar diferentes iconos para ayudar a retener la atenci&oacute;n de los usuarios y mejorar su legibilidad.<\/p><p>Puedes insertar manualmente un icono de men&uacute; en tu men&uacute; de tipo de entrada personalizado o hacerlo utilizando un plugin. Para este tutorial, te mostraremos c&oacute;mo a&ntilde;adir Dashicons utilizando el plugin <a href=\"https:\/\/es.wordpress.org\/plugins\/custom-post-type-ui\/\" target=\"_blank\" rel=\"noreferrer noopener\">Custom Post Type UI<\/a>:<\/p><ol class=\"wp-block-list\">\n<li><a href=\"\/es\/tutoriales\/plugins-en-wordpress-gratis\">Instala y activa el plugin<\/a>.<\/li>\n<\/ol><figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"201\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2023\/05\/image-11.png\/public\" alt=\"Plugin Custom Post Type UI instalado en WordPress\" class=\"wp-image-31062\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2023\/05\/image-11.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2023\/05\/image-11.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2023\/05\/image-11.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2023\/05\/image-11.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure><ol class=\"wp-block-list\" start=\"2\">\n<li>Abre la pesta&ntilde;a <strong>A&ntilde;adir\/Editar tipos de entrada <\/strong>y selecciona el tipo de entrada personalizado que deseas modificar en el men&uacute; desplegable. Si a&uacute;n no has creado uno, hazlo a trav&eacute;s de la pesta&ntilde;a <strong>A&ntilde;adir nuevo tipo de contenido<\/strong>.<\/li>\n\n\n\n<li>Despl&aacute;zate hacia abajo hasta que veas la secci&oacute;n <strong>Icono del men&uacute;<\/strong>. Haz clic en <strong>Elegir el Dashicon <\/strong>y elige un icono que se ajuste al tipo de entrada personalizada. Si ya tienes una imagen preparada, selecciona <strong>Elegir imagen de icono <\/strong>para importarla desde tu biblioteca multimedia.<\/li>\n<\/ol><figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"679\" height=\"189\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2023\/05\/image-13.png\/public\" alt=\"Opci&oacute;n de Elegir Dashicon en WordPress\" class=\"wp-image-31066\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2023\/05\/image-13.png\/w=679,fit=scale-down 679w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2023\/05\/image-13.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/32\/2023\/05\/image-13.png\/w=150,fit=scale-down 150w\" sizes=\"(max-width: 679px) 100vw, 679px\" \/><\/figure><ol class=\"wp-block-list\" start=\"4\">\n<li>Haz clic en <strong>Guardar tipo de contenido <\/strong>para guardar los cambios. Si el proceso se realiza correctamente, ver&aacute;s un mensaje de confirmaci&oacute;n y el icono deber&iacute;a aparecer junto al tipo de entrada personalizado.<\/li>\n<\/ol><h3 class=\"wp-block-heading\">Eliminar Dashicons en WordPress<\/h3><p>El tama&ntilde;o del archivo de Dashicons es de s&oacute;lo unos <strong>30 KB<\/strong>. Aunque no es muy grande, desactivar la carga autom&aacute;tica de Dashicons cuando no lo uses puede mejorar la velocidad de carga de tu p&aacute;gina.<\/p><p>A&ntilde;ade el siguiente fragmento de c&oacute;digo en la parte inferior del archivo <strong>functions.php <\/strong>utilizando el Editor de archivos de tu tema. Se desactivar&aacute; Dashicons desde el front-end de tu sitio web para los usuarios registrados.<\/p><pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">function disable_dashicon() {\n  if (current_user_can( 'update_core' )) {\n      return;\n  }\n  wp_deregister_style('dashicons');\n}\nadd_action( 'wp_enqueue_scripts', 'disable_dashicon' );<\/pre><h2 class=\"wp-block-heading\" id=\"h-conclusion\">Conclusi&oacute;n<\/h2><p>Dashicons es una funci&oacute;n &uacute;til que te ahorra la molestia de a&ntilde;adir im&aacute;genes innecesarias. Los iconos son ligeros, f&aacute;ciles de incrustar y tienen soporte nativo para WordPress. Aunque no es para uso front-end, puedes arreglarlo habilit&aacute;ndolo manualmente desde el c&oacute;digo fuente. <\/p><p>En este post has aprendido c&oacute;mo mostrar y desactivar Dashicons en WordPress. Esperamos haber resuelto tus preguntas sobre la popular biblioteca de iconos y las formas de aprovecharla correctamente.<\/p><p>Si tienes m&aacute;s preguntas, no dudes en dejar un comentario a continuaci&oacute;n.<\/p><h2 class=\"wp-block-heading\" id=\"h-dashicons-wordpress-preguntas-frecuentes\">Dashicons WordPress &ndash; Preguntas frecuentes<\/h2><p>Echa un vistazo a las siguientes preguntas comunes sobre los Dashicons de WordPress.<\/p><div id=\"rank-math-faq\" class=\"rank-math-block\">\n<div class=\"rank-math-list \">\n<div id=\"faq-question-69446ee36a54e\" class=\"rank-math-list-item\">\n<h3 class=\"rank-math-question \">&iquest;Cu&aacute;les son los mejores Dashicons para WordPress?<\/h3>\n<div class=\"rank-math-answer \">\n\n<p>Algunos de los mejores Dashicons para WordPress son los iconos <strong>admin-home<\/strong>, <strong>admin-tools<\/strong>, <strong>admin-users<\/strong>, <strong>admin-post<\/strong>, <strong>admin-media<\/strong>, <strong>welcome-widgets-menus <\/strong>y <strong>format-image<\/strong>. Estos iconos se utilizan com&uacute;nmente para funciones diferentes en el panel de WordPress y pueden ayudar a mejorar la experiencia del usuario.<\/p>\n\n<\/div>\n<\/div>\n<div id=\"faq-question-69446ee36a550\" class=\"rank-math-list-item\">\n<h3 class=\"rank-math-question \">&iquest;Necesito Dashicons en WordPress?<\/h3>\n<div class=\"rank-math-answer \">\n\n<p>No, no necesitas usar Dashicons en WordPress. Los Dashicons son ideales para mejorar el dise&ntilde;o visual y el estilo de tu panel de control de WordPress y no afectan a la funcionalidad de tu sitio. Sin embargo, eliminar los Dashicons puede afectar a la apariencia de algunos plugins o temas que dependen de ellos.<\/p>\n\n<\/div>\n<\/div>\n<div id=\"faq-question-69446ee36a551\" class=\"rank-math-list-item\">\n<h3 class=\"rank-math-question \">&iquest;C&oacute;mo a&ntilde;ado Dashicons personalizados a WordPress?<\/h3>\n<div class=\"rank-math-answer \">\n\n<p>Para a&ntilde;adir Dashicons personalizados a WordPress, utiliza la regla <strong>font-face <\/strong>en tu CSS e incluye el archivo de fuente Dashicons personalizado. A continuaci&oacute;n, utiliza la propiedad content para mostrar el icono personalizado, utilizando un <strong>pseudo elemento <\/strong>antes o despu&eacute;s.<\/p>\n\n<\/div>\n<\/div>\n<div id=\"faq-question-69446ee36a552\" class=\"rank-math-list-item\">\n<h3 class=\"rank-math-question \">&iquest;Cu&aacute;l es el tama&ntilde;o de los Dashicons en WordPress?<\/h3>\n<div class=\"rank-math-answer \">\n\n<p>El tama&ntilde;o de los Dashicons en WordPress, por defecto, es de <strong>20px<\/strong> por<strong> 20px<\/strong>. Sin embargo, esto se puede ajustar usando CSS para cambiar la propiedad font-size o usando un archivo de fuente personalizado con diferentes dimensiones.<\/p>\n\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Una de las formas m&aacute;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&oacute;n m&aacute;s eficaz. Aqu&iacute; es donde los Dashicons de WordPress pueden ser [&#8230;]<\/p>\n<p><a class=\"btn btn-secondary understrap-read-more-link\" href=\"\/es\/tutoriales\/dashicons-wordpress\">Read More&#8230;<\/a><\/p>\n","protected":false},"author":353,"featured_media":31068,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"rank_math_title":"%title%: gu\u00eda completa","rank_math_description":"Aprende c\u00f3mo Dashicons puede mejorar la experiencia de usuario en tu sitio web. Lee nuestro art\u00edculo y mejora tu dise\u00f1o hoy mismo.","rank_math_focus_keyword":"dashicons wordpress","footnotes":""},"categories":[4747,14349],"tags":[],"class_list":["post-31048","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-wordpress","category-basico"],"hreflangs":[{"locale":"en-US","link":"https:\/\/www.hostinger.com\/tutorials\/wordpress-dashicons","default":0},{"locale":"es-ES","link":"https:\/\/www.hostinger.com\/es\/tutoriales\/dashicons-wordpress","default":0},{"locale":"nl-NL","link":"https:\/\/www.hostinger.com\/nl\/tutorials\/wordpress-dashicons","default":0},{"locale":"en-UK","link":"https:\/\/www.hostinger.com\/uk\/tutorials\/wordpress-dashicons","default":0},{"locale":"en-MY","link":"https:\/\/www.hostinger.com\/my\/tutorials\/wordpress-dashicons","default":0},{"locale":"en-PH","link":"https:\/\/www.hostinger.com\/ph\/tutorials\/wordpress-dashicons","default":0},{"locale":"es-MX","link":"https:\/\/www.hostinger.com\/mx\/tutoriales\/dashicons-wordpress","default":0},{"locale":"es-CO","link":"https:\/\/www.hostinger.com\/co\/tutoriales\/dashicons-wordpress","default":0},{"locale":"es-AR","link":"https:\/\/www.hostinger.com\/ar\/tutoriales\/dashicons-wordpress","default":0},{"locale":"en-IN","link":"https:\/\/www.hostinger.com\/in\/tutorials\/wordpress-dashicons","default":0},{"locale":"en-CA","link":"https:\/\/www.hostinger.com\/ca\/tutorials\/wordpress-dashicons","default":0},{"locale":"en-AU","link":"https:\/\/www.hostinger.com\/au\/tutorials\/wordpress-dashicons","default":0},{"locale":"en-NG","link":"https:\/\/www.hostinger.com\/ng\/tutorials\/wordpress-dashicons","default":0}],"acf":[],"_links":{"self":[{"href":"https:\/\/www.hostinger.com\/es\/tutoriales\/wp-json\/wp\/v2\/posts\/31048","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hostinger.com\/es\/tutoriales\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hostinger.com\/es\/tutoriales\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/es\/tutoriales\/wp-json\/wp\/v2\/users\/353"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/es\/tutoriales\/wp-json\/wp\/v2\/comments?post=31048"}],"version-history":[{"count":9,"href":"https:\/\/www.hostinger.com\/es\/tutoriales\/wp-json\/wp\/v2\/posts\/31048\/revisions"}],"predecessor-version":[{"id":49827,"href":"https:\/\/www.hostinger.com\/es\/tutoriales\/wp-json\/wp\/v2\/posts\/31048\/revisions\/49827"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/es\/tutoriales\/wp-json\/wp\/v2\/media\/31068"}],"wp:attachment":[{"href":"https:\/\/www.hostinger.com\/es\/tutoriales\/wp-json\/wp\/v2\/media?parent=31048"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hostinger.com\/es\/tutoriales\/wp-json\/wp\/v2\/categories?post=31048"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hostinger.com\/es\/tutoriales\/wp-json\/wp\/v2\/tags?post=31048"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}