Roots Discourse

Update Sage 8.5.1 to Font Awesome 5

Hi, I am still using Sage 8.5.1. Love it! But I updated my bower file to use FontAwesome 5 and it installs, but doesn’t work. Can someone post the steps to update properly to FA5?

1 Like

Show us

What does this mean?

FontAwesome 5 doesn’t support Bower out of the box, but you can install it from the Git repo:

bower install --save https://github.com/FortAwesome/Font-Awesome.git

Then add corresponding overrides to bower.json:

{
  "name": "sage",
  "homepage": "https://roots.io/sage/",
  "authors": [
    "Ben Word <ben@benword.com>"
  ],
  "license": "MIT",
  "private": true,
  "dependencies": {
    "Font-Awesome": "https://github.com/FortAwesome/Font-Awesome.git#^5.0.8"
  },
  "overrides": {
    "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"
      ]
    }
  }
}

Then declare the font path variable in main.scss:

$fa-font-path: '../fonts';

// Automatically injected Bower dependencies via wiredep (never manually edit this block)
// bower:scss
@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";
// endbower
2 Likes

For me work with this override:

{

“name”: “sage”,
“homepage”: “https://roots.io/sage/”,
“authors”: [
“Ben Word ben@benword.com
],
“license”: “MIT”,
“private”: true,
“dependencies”: {
“bootstrap”: “^4.0.0”,
“matchHeight”: “^0.7.2”,
“select2”: “select2-ng#^4.0.5”,
“fontawesome”: “https://github.com/FortAwesome/Font-Awesome.git#^5.0.10
},
“overrides”: {
“bootstrap”: {
“main”: [
“./scss/bootstrap.scss”,
“./dist/js/bootstrap.bundle.js”
]
},
“fontawesome” : {
“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”
]
}
}
}

This also works.

“./web-fonts-with-css/webfonts/*”

1 Like

You only need change the variable.

$fa-font-path

For the files on folder dist

$fa-font-path: '../../../my-theme/dist/fonts';

FINAL RESULT

File: bower.json

"font-awesome-5" : {
  "main": [
    "scss/fontawesome.scss",
    "scss/brands.scss",
    "webfonts/fa-brands-400.eot",
    "webfonts/fa-brands-400.svg",
    "webfonts/fa-brands-400.ttf",
    "webfonts/fa-brands-400.woff",
    "webfonts/fa-brands-400.woff2",
    "scss/regular.scss",
    "webfonts/fa-regular-400.eot",
    "webfonts/fa-regular-400.svg",
    "webfonts/fa-regular-400.ttf",
    "webfonts/fa-regular-400.woff",
    "webfonts/fa-regular-400.woff2",
    "scss/solid.scss",
    "webfonts/fa-solid-900.eot",
    "webfonts/fa-solid-900.svg",
    "webfonts/fa-solid-900.ttf",
    "webfonts/fa-solid-900.woff",
    "webfonts/fa-solid-900.woff2"
  ]
}

File main.scss

// Automatically injected Bower dependencies via wiredep (never manually edit this block)
// bower:scss
@import "../../bower_components/foundation-sites/scss/foundation.scss";
@import "../../bower_components/font-awesome-5/scss/fontawesome.scss";
@import "../../bower_components/font-awesome-5/scss/brands.scss";
@import "../../bower_components/font-awesome-5/scss/regular.scss";
@import "../../bower_components/font-awesome-5/scss/solid.scss";
// endbower

File _global.scss

$fa-font-path: '../../../unicolombo/dist/fonts';

@font-face {
  font-family: 'Font Awesome 5 Free';
  font-style: normal;
  font-weight: 400;
  font-display: $fa-font-display;
  src: url('#{$fa-font-path}/fa-regular-400.eot');
  src: url('#{$fa-font-path}/fa-regular-400.eot?#iefix') format('embedded-opentype'),
  url('#{$fa-font-path}/fa-regular-400.woff2') format('woff2'),
  url('#{$fa-font-path}/fa-regular-400.woff') format('woff'),
  url('#{$fa-font-path}/fa-regular-400.ttf') format('truetype'),
  url('#{$fa-font-path}/fa-regular-400.svg#fontawesome') format('svg');
}

@font-face {
  font-family: 'Font Awesome 5 Free';
  font-style: normal;
  font-weight: 900;
  font-display: $fa-font-display;
  src: url('#{$fa-font-path}/fa-solid-900.eot');
  src: url('#{$fa-font-path}/fa-solid-900.eot?#iefix') format('embedded-opentype'),
  url('#{$fa-font-path}/fa-solid-900.woff2') format('woff2'),
  url('#{$fa-font-path}/fa-solid-900.woff') format('woff'),
  url('#{$fa-font-path}/fa-solid-900.ttf') format('truetype'),
  url('#{$fa-font-path}/fa-solid-900.svg#fontawesome') format('svg');
}

After replace run

gulp

and

gulp watch