Sage 9 with FontAwesome 5 Pseudo Issue during on Dev

sage
,
1

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
2

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

1 Like
3

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.

4

Just an update:

import { config, library, dom } from '@fortawesome/fontawesome-svg-core';
import { fas } from '@fortawesome/free-solid-svg-icons';
config.searchPseudoElements=true;
library.add(fas);
dom.watch();

    "@fortawesome/fontawesome-svg-core": "^1.2.19",
    "@fortawesome/free-solid-svg-icons": "^5.9.0",

Pseudo elements still won’t show on Latest Firefox.

3 Likes