¿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.
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
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.
En la imagen puedes ver hasta tres maneras de usar el icono: CSS, HTML y Glyph, en este artículo veremos las dos primeras.
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.
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;
}
¿Aún con dudas?, en el siguiente video se detallan los puntos anteriores.
Artículos Relacionados
(4 votos, promedio: 5,00 de 5)
Cargando...