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