Como añadir Ionicons en Genesis Framework

Vamos a aprender como añadir Ionicons en Genesis Framework. Lo haremos con código, por supuesto.

Ya vimos en otros tutoriales como añadir Font Awesome en Genesis, o incluso como añadir Line Awesome en Genesis, que es una fuente de iconos alternativa a Font Awesome.

Incluso, vimos como trabajar con Dashicons, que es la fuente de iconos de que WordPress trae consigo.

Hoy le toca el turno a Ionicons. Es una fuente de iconos con la que trabajé en un proyecto y que no la he vuelto a tocar. No por nada, sino por que he trabajado con otras.

La implementación es sencilla. Ellos la hacen sencilla, pues nos proporcionan como Google hace el CSS desde su propio servidor.

Os dejo el snippet de código necesario para implementar esta fuente. Debes añadir el snippet al final del archivo functions.php de tu Genesis Child Theme activo.

add_action( 'wp_enqueue_scripts', 'ionicons_font_script' );
function ionicons_font_script() {

	wp_enqueue_style( 'ion-icons-free', '//unpkg.com/ionicons@4.4.8/dist/css/ionicons.min.css' ); 
		
}

Si te fijas en la URL dentro de la función, viene especificada la versión actual (en el día en que escribo este tutorial), de la fuente de iconos Ionicons.

Mi consejo es que la revises en la página de cdnjs.com de Ionicons, para así disponer de la última versión.

Como usar Ionicons

Su uso difiere poco de como usamos las otras fuentes de iconos que mencionábamos al principio de este tutorial.

Utilizaremos la etiqueta HTML <i></i> con la debida clase, dependiendo que icono queramos mostrar. Dejo un enlace al listado de todos sus iconos con las clases de cada uno de ellos.

Deberá contener dos clases. La clase icon y la correspondiente al icono. Por ejemplo para mostrar el icono de alarma sería algo así.

<i class="icon ion-md-alarm"></i>

Conclusiones

Ahora ya sabes como trabajar con la fuente de iconos Ionicons en Genesis.

¿Hay alguna fuente de iconos con la que te gustaría trabajar pero no sabes come implementarla en Genesis? Déjame abajo en los comentarios cual es y me pondré manos a la obra.

Lo mismo para cualquier duda con respecto a este tutorial. Las puedes dejar en los comentarios.

Feliz Día!