Cómo instalar y usar Font Awesome 5 en WordPress

En este tutorial vamos a ver cómo instalar y utilizar los iconos de Font Awesome 5 en nuestro WordPress, independientemente del tema que utilicemos.

Font Awesome es una libreria de iconos que tiene una versión gratuita (Free) y otra de pago (Pro). Aunque la versión Pro tenga el triple de iconos, la versión Free es más que suficiente.

Font Awesome tiene una multitud de iconos que podemos utilizar en nuestra web.

Instalar Font Awesome 5

Para ello, tienes que añadir este código en tu plugin personalizado o en el archivo functions.php de tu tema hijo:

add_action( 'wp_enqueue_scripts', 'jc_load_font_awesome' );
/**
 * Instalar Font Awesome 5
 */
function jc_load_font_awesome() {

    wp_enqueue_style( 'font-awesome-free', '//use.fontawesome.com/releases/v5.3.1/css/all.css' );

}

Si quieres tener la última versión de la librería, reemplaza el v.5.3.1 por la actual versión que puedes encontrar en su tutorial de cargar Font Awesome.

Cambiar a la última versión de Font Awesome 5, simplemente cambiar el número de v.5.3.1

Usar los iconos

Para ver todos los iconos que tienes a tu disposición, tienes que ir su galería de iconos.

Para insertar un icono, tienes que copiar el código HTML que aparece:

Copiar código HTML para utilizar un icono Font Awesome.

<i class="fab fa-accessible-icon"></i>

Para cambiar de estilo, simplemente tendremos que añadir classes CSS en nuestro style.css.

Otra manera de utilizarlo, es mediante los valores unicode. Vamos a ver un ejemplo:

Vamos a añadir una lista HTML con dos enlaces de Facebook y Twitter.

<ul>
    <li><a href="#" class="fontawesome social-icon twitter">Twitter</a></li>
    <li><a href="#" class="fontawesome social-icon facebook">Facebook</a></li>
</ul>

A continuación, modificaremos nuestro style.css con las clases que hemos declarado en los elementos HTML:

.fontawesome::before {
    display: inline-block;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
}

.social-icon::before {
    margin-right: 10px;
    font-family: "Font Awesome 5 Brands";
}

.facebook::before {
    content: "\f39e";
}

.instagram::before {
    content: "\f16d";
}

Después de aplicar estos estilos CSS, cada vez que escribamos un enlace con las clases «fontawesome social-icon facebook» y «fontawesome social-icon twitter» aparecerán automáticamente los iconos de Facebook y Twitter respectivamente. Este es el resultado después de implementar las clases con la condición de «::before».

Así es como luciría:

Resultado de aplicar los estilos CSS con Font Awesome.

Resumen y conclusión

Imaginaros el potencial que tiene Font Awesome para nuestra página web. Podríamos usar estos iconos en nuestros menús de navegación, en nuestro footer para las redes sociales y en otros sitios. Tu imaginación es tu límite.

Si quieres ver más tutoriales de cómo aplicar Font Awesome o te gustaría conocer más bibliotecas de iconos, sólo hace falta que me lo digas.