Roots Discourse

Sage 9 with FontAwesome 5 Pseudo Issue during on Dev

Try to use Pseudo elements with the Sage 9.

However, when I put the fontawesome.config no matter on the head or on the main.js, the FontAwesome pseudo elements sometime showing and sometime not showing when I doing the yarn start development.

When not showing, the svg icons is not being generated on html markup.

Sometime shows up on Home page, then when i go inside of the post page, the pseudo elements would be gone, seems the fontawesome.config is not adding to those inside page. unless, I save my CSS when I on that page.

It is only happen during on the development, build:production or build would be fine.

Not sure if I put the fontawesome.config in the right place.

import '@fortawesome/fontawesome-free/js/all';
import fontawesome from '@fortawesome/fontawesome';
fontawesome.config = {searchPseudoElements: true};
1 Like

updated: yarn build:production Pseudo elements won’t show on Latest Firefox.

1 Like

Hey @weizung -

I use a different method to set up Font Awesome in Sage (which you may have better luck with), but here’s the first thing I’m noticing in your code: the @fortawesome/fontawesome package is deprecated, and you’re mixing it with the newer @fortawesome/fontawesome-free package.

I would recommend heading over to Font Awesome to get clarification on how you would set this up and then trying again once you have a clearer picture of how their packages and config work. If you’re still running into problems that might be connected to Sage after setting up their packages correctly, I can try to help you out here.

Also, FYI, Font Awesome recommends against using pseudo elements with SVG like this. May still work fine for you, but good to know.

Just an update:

import { config, library, dom } from '@fortawesome/fontawesome-svg-core';
import { fas } from '@fortawesome/free-solid-svg-icons';
    "@fortawesome/fontawesome-svg-core": "^1.2.19",
    "@fortawesome/free-solid-svg-icons": "^5.9.0",

Pseudo elements still won’t show on Latest Firefox.

1 Like