Instalar Font Awesome 5 y Bootstrap 4 en sage 8

Font Awesome es la fuente de íconos vectoriales más utilizada, los iconos son escalables y pueden personalizarse por tamaño, color y cualquier atributo que se pueda cambiar con css, la nueva versión de Font Awesome 5 dispone de iconos nuevos, muchos, si utilizas Sage en tus proyectos WordPress seguro que estás deseando probar esta nueva versión de iconos.

Para instalar la nueva versión de Font Awesome 5 en Sage 8 tenemos que incluir la dependencia en el archivo bower.json, el siguiente código está basado en la versión 8.5.4 de Sage, debería funcionar en versiones anteriores que utilicen sass.

{ "name": "sage", "homepage": "https://roots.io/sage/", "authors": [ "Ben Word <ben@benword.com>" ], "license": "MIT", "private": true, "dependencies": { "bootstrap": "^4.0.0", "Font-Awesome": "https://github.com/FortAwesome/Font-Awesome.git#^5.0.8" }, "overrides": { "bootstrap": { "main": [ "./scss/bootstrap.scss", "./dist/js/bootstrap.bundle.js" ] }, "Font-Awesome" : { "main": [ "./web-fonts-with-css/scss/fontawesome.scss", "./web-fonts-with-css/scss/fa-brands.scss", "./web-fonts-with-css/webfonts/fa-brands-400.eot", "./web-fonts-with-css/webfonts/fa-brands-400.svg", "./web-fonts-with-css/webfonts/fa-brands-400.ttf", "./web-fonts-with-css/webfonts/fa-brands-400.woff", "./web-fonts-with-css/webfonts/fa-brands-400.woff2", "./web-fonts-with-css/scss/fa-regular.scss", "./web-fonts-with-css/webfonts/fa-regular-400.eot", "./web-fonts-with-css/webfonts/fa-regular-400.svg", "./web-fonts-with-css/webfonts/fa-regular-400.ttf", "./web-fonts-with-css/webfonts/fa-regular-400.woff", "./web-fonts-with-css/webfonts/fa-regular-400.woff2", "./web-fonts-with-css/scss/fa-solid.scss", "./web-fonts-with-css/webfonts/fa-solid-900.eot", "./web-fonts-with-css/webfonts/fa-solid-900.svg", "./web-fonts-with-css/webfonts/fa-solid-900.ttf", "./web-fonts-with-css/webfonts/fa-solid-900.woff", "./web-fonts-with-css/webfonts/fa-solid-900.woff2" ] } }
}

A continuación tenemos que declarar la variable en nuestro main.scss

@import "common/variables";
$fa-font-path: '../fonts';
// Automatically injected Bower dependencies via wiredep (never manually edit this block)
// bower:scss

Bower importará de forma automática las fuentes

@import "../bower_components/Font-Awesome/web-fonts-with-css/scss/fontawesome.scss";
@import "../bower_components/Font-Awesome/web-fonts-with-css/scss/fa-brands.scss";
@import "../bower_components/Font-Awesome/web-fonts-with-css/scss/fa-regular.scss";
@import "../bower_components/Font-Awesome/web-fonts-with-css/scss/fa-solid.scss";

Por último mostramos las fuentes con el siguiente código:

<i class="far fa-file-image"></i>
<i class="fas fa-file-image"></i>

Puedes ver todos los iconos de Font Awesome 5 en este enlace