• Saltar a la navegación principal
  • Saltar al contenido principal
  • Saltar a la barra lateral principal

DecodeCMS

Tu WordPress a otro Nivel ...

  • Acerca de
  • Contacto
  • Inicio
  • Tutoriales
    • Themes
    • Plugins
    • Core
    • Recursos
  • Cursos
  • Acceder
    • Mis cursos
    • Mi Cuenta
    • Acceder
Inicio / Tutoriales / Themes / ¿Cómo usar Dashicons en WordPress?

¿Cómo usar Dashicons en WordPress?

Dashicons en WordPress

[ 19 diciembre 2017 ] [ Actualizado: 8 mayo 2019 ]
[ Autor: Jhon Marreros Guzmán ][ Themes - Intermedio] [ ]

css librería

¿Me ayudas a llegar a más gente?

Twittear Compartir LinkedIn WhatsApp

¿Has visto los iconos que tiene el backend de WordPress?, estas imágenes son parte de una fuente de íconos llamada Dashicons y son exclusivos para el backend, sin embargo podrías también usarlos en el front-end de tu sitio.

En un artículo anterior vimos cómo insertar una fuente de iconos FontAwesome, puedes revisar la siguiente entrada para mayor detalle: Insertar una fuente de iconos en WordPress

 

1- Insertar el archivo de estilos

Para hacer uso de la fuente de iconos, necesitas agregar a la cola de scripts CSS el script que ya esta registrado por WordPress con el nombre “dashicons”, para realizar esto usa el siguiente código en tu archivo functions.php de tu theme:


add_action( 'wp_enqueue_scripts', 'dcms_load_dashicons_front_end' );

function dcms_load_dashicons_front_end() {
	wp_enqueue_style( 'dashicons' );
}

Para asegurarte que el archivo se ha cargando en el front-end de tu sitio, puedes inspeccionar el código fuente y buscar el texto : dashicons.min.css

código fuente HTML revisando archivo dashicons.min.css

 

Para ver el código fuente puedes hacerlo con: ctrl+u si estas en PC, cmd+u si estas en Mac

 

2- Seleccionar algún Icono de Dashicons

Una vez que te has asegurado que el archivo .CSS esta cargando, entonces ya estas listo para usar los iconos, puedes ir al sitio web: Dashicons WordPress Oficial, y elegir alguno de los iconos que esta librería tiene disponible.

Dashicon de ejemplo en sitio oficial

En la imagen puedes ver hasta tres maneras de usar el icono: CSS, HTML y Glyph, en este artículo veremos las dos primeras.

El formato Glyph es para copiar la forma del icono directamente, por ejemplo a algún programa gráfico

 

3- Insertar icono como HTML

Si usas la opción de copiar HTML, verás que tienes un código de la siguiente forma:


<span class="dashicons dashicons-arrow-right-alt"></span>

En el código anterior:

  • hay una clase genérica “dashicons“
  • también hay una clase específica “dashicons-arrow-right-alt” que es la que hace cambiar el ícono

 
Puedes usar este código HTML directamente en cualquier contenido en donde acepte HTML. Por ejemplo:

Como parte de tu contenido, en el siguiente ejemplo se usa como parte de un subtítulo


<h2><span class="dashicons dashicons-arrow-right-alt"> </span> Algún subtítulo importante</h2>

También posible usar las clases directamente sin la etiqueta span


<h2 class="dashicons-before dashicons-arrow-right-alt">Algún subtítulo importante</h2>

Como parte de un texto de ítem de menú, desde Apariencia > Menus, elegir algún menú y luego dentro de algún ítem cambiar la etiqueta de Navegación incluyendo al inicio del texto el código del dashicon.

codigo dashicon como parte del texto del ítem de menú

 

4- Insertar icono como CSS

En este caso cuando usas la opción de copiar CSS, verás que mostrará un texto como:


content: "\f344";

Este texto muestra la propiedad content asignada al valor Hexadecimal que tiene el dashicon. Esta propiedad content debe ser parte de una clase CSS.

Por ejemplo, si quieres que todos los subtítulos h2 que son parte del contenido de tus entradas tengan un icono puedes usar el siguiente código CSS.


.entry-content h2::before{
	font-family: "dashicons";
	content: "\f344";
	display: inline;
	margin-right: 6px;
	vertical-align: middle;
}

Subtítulo con dashicon

 

¿Aún con dudas?, en el siguiente video se detallan los puntos anteriores.

 

¿Me ayudas a llegar a más gente?

Twittear Compartir LinkedIn WhatsApp

Artículos Relacionados

  • Insertar Font Awesome en WordPressInsertar Font Awesome en WordPress
  • Google Fonts en WordPressAgregar Google Fonts en WordPress sin usar plugins
  • Búsqueda en tabla personalizada en WordPressBúsqueda en tabla personalizada en WordPress
  • Estilos de editor en GutenbergEstilos de editor en Gutenberg
Valora este artículo : 1 barra2 barras3 barras4 barras5 barras (4 votos, promedio: 5,00 de 5)
Cargando...

Interacciones con los lectores

Para escribir código envolver con: <pre class="language-xxx"><code> </code></pre> ,reemplaza las xxx (php, css, html)

*

* Gravatar habilitado

Barra lateral principal

Presentación

Curso Decodifica WordPress

Únete a DecodeCMS

Recibirás como regalo:

Guia práctica con video:
¿Quieres agregar código a WordPress? Revisa las diferentes opciones que tienes.Ver más

Jooble
Alojamiento Wordpress

Niveles

Básico Intermedio Avanzado

Etiquetas

accesibilidad css dashboard editor error funcionalidad herramientas imagen js librería mejoras optimización seguridad social woocommerce

Populares

Generar código para WordPress con GenerateWP

Activar el modo catálogo en WooCommerce

Cómo usar la REST API de WordPress

Agregar efecto de partículas en WordPress

© logo decode pie
Política de Privacidad | Política de devoluciones
Copyrigth 2023 Todos los derechos reservados