• Ir a navegación principal
  • Ir al contenido principal
  • Github
  • Codepen
  • Twitter
  • Instagram

Eduardo Santillana

  • Tutoriales
  • Blog
  • Info
  • Contacto
Inicio / Tutoriales / Genesis Framework / Font Awesome en Genesis Framework

Font Awesome en Genesis Framework

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.

Font Awesome en Genesis Framework - Eduardo Santillana

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.

Interacciones con los lectores

Deja una respuesta Cancelar la respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Acepto la Política de privacidad * for Click to select the duration you give consent until.

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.

© 2021 · Eduardo Santillana · Graphic & Web Designer
© 2021 · Eduardo Santillana
Graphic & Web Designer

Github · Codepen · Twitter · Instagram · Política de privacidad
Github · Codepen
Twitter · Instagram · Política de privacidad

Esta web usa cookies con objetivos estadísticos. Asumo que estás de acuerdo, pero también puedes no estarlo.AceptarPolítica de privacidad