Cómo usar los iconos de Font Awesome en Genesis Framework? Muy fácil.

Como siempre, hay varias maneras de hacerlo. Voy a explicar My Way.

En el tutorial anterior explicaba como utilizar Google Fonts en Genesis. La manera de utilizar Font Awesome es similar, salvo por un par de cosas.

Font Awesome nos permite utilizar un amplio catálogo de iconos vectoriales escalables que pueden ser modificados —tamaño, color, sombreado, etc— en nuestra querida hoja de estilos con CSS.

Lo primero será descargar la última versión del paquete de Font Awesome desde su página. Una vez descomprimido vamos a copiar en la raíz de nuestro child theme sólo las carpetas css y fonts.

El siguiente paso será abrir nuestro archivo functions.php y copiar este código:


//* Agregar FontAwesome
add_action( 'wp_enqueue_scripts', 'edo_add_font_awesome' );
function edo_add_font_awesome() {
if ( !is_admin() ) {
wp_enqueue_style( 'edo-font-awesome', get_bloginfo( 'stylesheet_directory' ) . '/css/font-awesome.min.css', array(), '4.6.1' );
}
}


Hay que tener en cuenta la versión de Font Awesome que estamos utilizando para cambiarla en la última línea del código en caso sea necesario. Una vez guardados lo cambios podremos verificar en el código fuente de nuestro site que el script de Font Awesome se está cargando de forma correcta.

Ahora bien, cómo utilizo los iconos de Font Awesome en Genesis y concretamente en mi site? Estaba pensando en hacer un tutorial sobre ello, pero mejor dejaré que sean nuestros amigos de Font Awesome los que lo expliquen, quien mejor si no.

Aquí les dejo el enlace —clic aquí— a algunos ejemplos que han creado donde explican con lujo de detalles la manera correcta de utilizar los iconos, así como la versatilidad de sus diferentes características.

También les dejo el enlace al catálogo de iconos de Font Awesome —ahora clic aquí— que podemos utilizar de manera gratuita en nuestros proyectos. Si no los conocías, lo vas a flipar.