Cómo utilizar y mostrar Dashicons en Wordpress
Como ya sabes las Dashicons son los íconos oficiales de Wordpress que puedes añadir a tu web. Para agregarlos puedes utilizar los siguientes pasos:
Como agregar los Dashicons
- Revisa tu plantilla de Wordpress.
Debes confirmar que tienes activos los estilosa de Dashicons, de lo contrario no podrás agregarlos. Carga tu Home en la página, luego utiliza tu clic derecho para que te aparezca la opción: “Ver código fuente”.
Una vez dentro de esta opción usa Ctrl+F y busca «dashicons».
Si te aparece, entonces puedes usarlos, si no aparecen entonces activalos de la siguiente manera:
Ve al panel de Administración de tu Wordpress y presiona sobre el editor de temas: Presiona en “Apariencias”.
Abre el archivo function.php. y revisa hasta el final del archivo, ahí deberás pegar este código:
add_action( ‘wp_enqueue_scripts’, ‘load_dashicons_front_end’ ); function load_dashicons_front_end() { wp_enqueue_style( ‘dashicons’ ); }
Luego de esto recuerda crear un tema aparte, porque si editas sobre el original, cuando haya alguna actualización, tus modificaciones no se guardarán.
- Usa los Dashicons con los códigos CSS y HTML.
Cada ícono tiene su respectivo código, así que para encontrarlos debes ir a los recursos para desarrolladores de Wordpress y hacer clic en el icono a usar.
Aquí verás el link de cuál es el código de ese icono en una ventana nueva, así que sólo deberás copiarlo de la siguiente manera:
La URL de la página cambiará para coincidir con el nombre del icono seleccionado y ese icono se mostrará en la parte superior de tu pantalla. Aquí es donde podrás copiar el código del icono y ver el nombre completo del mismo.
Hay tres formas de obtener el código que te permitirá incluir un icono en tu sitio web: copiando el CSS, el HTML o el Glifo.
Puedes usar un CSS personalizado para ajustar la apariencia según tu gusto.
Pero está opción dependerá del navegador web que estés usando para editar tu página, así que debes tenerlo en cuenta.
Luego de tener el Dashicons,, seleccione el menú que desea editar y haga clic. Deberá pegar el código HTML directamente dentro de esa área. Dependiendo de si desea que el icono aparezca antes o después del elemento de menú cuando se muestre en el sitio web, deberá pegar el código antes o después de la etiqueta del elemento de menú existente. Después de añadir el código HTML, pulse el botón Guardar menú para guardar los cambios realizados.
¿Puedo eliminar un Dashicons de mi página?
Eliminarlos no es difícil, pero si tienes la opción de la barra se administración activa, te mostrará un error cada vez que trates de eliminar el Dashicons. Así que puedes hacer deregister de los estilos CSS, para los usuarios, cuando la barra admin no esté activa.
Para esto tendrás que añadir este código al archivo functions.php del tema:
// 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’ );
