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