Puedes utilizarlos en cualquier parte de tu sitio y sin necesidad de cargar scripts adicionales, ya que son nativos de WP.
Hoy te compartiré toda la información que necesitas saber sobre Dashicons: Desde qué es y cómo añadirlo, hasta cómo utilizarlo y eliminarlo.
¿Listo para empezar? ¡Vamos al lío!
Tabla de Contenidos
¿Qué es Dashicons?
Así se conoce a la fuente de íconos oficial de WordPress. Aquí te presento un vistazo:
Estos son archivos SVG de muy alta calidad, disponibles desde la versión 3.8 de WordPress. Son aproximadamente 350 íconos (y con cada actualización de WordPress se van sumando más) y los encontrarás dentro de los Recursos para desarrolladores de WordPress.
Están organizados por temas o categorías. Algunas de ellas son: Spring, Admin, Notifications, Menu, Products, Welcome, Social, Screen, Image Editing, Media y Post Formats.
Por ejemplo, para encontrar algún ícono solo debes buscar en la categoría o filtrar los íconos utilizando el campo de búsqueda dinámica.
Una vez lo encuentres, únicamente debes copiar el código asociado al icono y el nombre para utilizarlo en WordPress.
Es más, WordPress.org encontrarás todos los datos esenciales de los íconos de Dashicons WordPress (nombre, código numérico, códigos CSS, Glypg y HTML).
¿Por qué tienes que utilizar las fuentes Dashicons para WordPress?
Al inicio del artículo asomé dos de las razones, pero creo conveniente profundizar un poco más. Estás son sus principales ventajas:
1.- Al ser fuentes, puedes escalarlas sin temor a que se pixelen.
2.- No pesan mucho, por lo que no afectarán la velocidad de tu web (algo que sí pueden hacer las imágenes).
3.- Puedes guardar muchas solicitudes HTTP, ya que puedes cargar todas las fuentes a la vez y emplearlas en cuántas páginas quieras, mientras que con las imágenes si necesitas utilizar bastantes tienes que hacer muchas solicitudes para recuperarlas, lo que aumenta el tiempo de carga.
4.- Son personalizables. Puedes cambiarle el color, agregar degradado, sombra y otras opciones de estilo, a través de CSS.
5.- Son más accesibles, ya que están integrados en WordPress.
6.- Son más fáciles de utilizar y de ajustar, en comparación con las imágenes. Por ello, puedes añadir símbolos reconocibles sin necesidad de crear uno cada vez que necesites algún icono específico.
¿Qué uso puedes darle a los íconos Dashicons WordPress?
Todo lo que te he contado hasta ahora imagino te ha parecido genial, pero tal vez no logres visualizar con claridad cómo podrías utilizar los íconos de Dashicons para WordPress. Pues bien, aquí te daré tres ideas para que le saques el máximo provecho.
- Menú de navegación.
¿Quieres llamar la atención sobre algún elemento de tu menú? Agregar un icono puede ser la solución idónea. Por ejemplo, puedes añadir el icono de carrito al botón de carrito de tu tienda o un ícono de teléfono a tu página de contacto.La clave para utilizarlas correctamente está en darles un propósito de conversión, no solo estético.
2. Backend de Wp
También puedes agregar íconos y utilizarlos en tantos títulos, publicaciones o widgets personalizados quieras. Si deseas hacerlo, te sugiero crees un código corto para Dashicons y así puedas utilizarlo con mayor facilidad.
3. Publicación meta
Un ícono delante de la fecha, etiqueta o nombre del autor de una publicación cambia para mejor la apariencia de una página. Aunque son simples detalles, ayudan a darle un aspecto más profesional, y esto lo puedes hacer con Dashicons WordPress, bien sea con un editor CSS personalizado o mediante el archivo style.css.
Cómo añadir Dashicons a WordPress
Para agregar Dashicons WP lo primero que debes hacer es asegurarte que tu plantilla tiene declarados los estilos Dashicons. Para comprobarlo, solo tienes que cargar tu Home, clic derecho y pinchar sobre la opción Ver código fuente.
Luego presiona Ctrl+F y busca «dashicons». ¿Lo encontraste? Genial, tu tema ya lo tiene declarados y está listo para usar.
¿No te aparece? No te preocupes, solo es cuestión de que lo declares en el archivo funciona.php de tu tema.
Aquí te dejo el paso a paso para hacerlo:
1.- Desde el Panel de Administración de tu WP, ve a Editor de temas> Apariencias.
2.- Abre el archivo function.php.
3.- Haz scroll hasta el final del archivo y pega el siguiente código para poner en colamos scripts:
add_action( ‘wp_enqueue_scripts’, ‘load_dashicons_front_end’ ); function load_dashicons_front_end() { wp_enqueue_style( ‘dashicons’ ); }
IMPORTANTE: Antes de editar funcions.php crea un tema hijo. ¿Por qué? Básicamente porque si editas el archivo directamente en el tema y luego surge una actualización para ese tema, todos los cambios que hayas realizado en el archivo quedarán sin efecto. Así es, se anularán.
¿Cómo usar Dashicons para WordPress?
Bueno, hasta aquí todo va bien ¿verdad? Ya tienes una idea clara de dónde utilizar los íconos Dashicons y cómo habilitarlos en tu instalación.
Ahora, solo resta que busques los códigos CSS y HTML y los agregues a tu web.
Como te comenté al inicio en la página oficial de WordPress encontrarás cada icono con su respectivo código CSS y HTML.
Entonces lo que debes hacer es:
1.- Ir a WordPress.org y en Recursos para desarrolladores buscar el icono que quieres usar. Este es el enlace directo
2.- Clica sobre el icono y pincha sobre el código que deseas copiar. Te aparecerá una ventana emergente, copia el código en el portapapeles.
3.- Pega el código en el editor de texto o widget de texto de la página, menú, encabezado, widget o metadatos donde quieres utilizar el icono.
4.- Ajusta la apariencia del icono a la personalidad de tu marca usando CSS personalizado.
En Google Chrome puedes ajustar su tamaño (por defecto es de 20px), color, degradado, etc. usando Inspect Element, mientras que si utilizas Firefox, debes hacerlo con Firebug.
Cómo eliminar Dashicons WordPress
Si por cualquier motivo, Dashicons WP no es lo que esperas y deseas quitar sus fuentes puedes eliminarlos para que ya no se carguen.
No obstante, tendrás un inconveniente: si tienes activa la barra de admin esta se mostrará con errores, lo que afectará tu experiencia como administrador o usuario conectado.
La solución que te propongo es hacer deregister de los estilos CSS de los íconos para todos los visitantes, excepto cuando aparezca la barra de admin.
Para hacerlo únicamente debes añadir un código al archivo functions.php del tema que tengas activo.
Este es el código:
// Deregister los dashicons si no se muestra la barra de admin
add_action( ‘wp_print_styles’, function() {
if (!is_admin_bar_showing()) wp_deregister_style( ‘dashicons’ );
¿Cómo te pareció el proceso? Como viste no es muy complicado.
No obstante, lo que te recomiendo es que verifiques que todo marche bien con tus archivos y los optimices tanto como sea posible, así tendrás la plena seguridad de que la velocidad de tu web no se verá comprometida.
Esta tarea la puedes completar con plugins. Por ejemplo, para optimizar las imágenes te sugiero utilizar Imagify y Wp Smush, para la caché te servirá Wp Rocket y para mejorar el rendimiento de WordPress te recomiendo usar Wp Optimizer.
