I use Font Awesome in pseudo elements as described by marcelo2605 in this post How to: Use Font Awesome 5 in your Sage theme
main.js
import fontawesome from '@fortawesome/fontawesome';
import { library, dom } from '@fortawesome/fontawesome-svg-core';
import { faAngleDown, faAngleUp } from '@fortawesome/free-solid-svg-icons';
fontawesome.config = { searchPseudoElements: true };
library.add(faAngleDown, faAngleUp);
scss
.toggle-btn {
&::after {
content: "\f106";
font-size: 18px;
font-family: "Font Awesome 5 Solid", serif;
display: none;
}
&.collapsed::after {
content: "\f107";
}
}
All works fine at yarn build
or yarn start
. Svg icons are rendered into the html. But when running yarn build:production
the icons do not get rendered.