Huge size flash on load (I read other fixes they dont work)

[justinblayney]

When loading my next.js website, the font-awesome fonts flash huge on load

Reproducible test case You can test here https://www.justinblayney.com/figurative-artwork

Expected behavior to load proper size

Desktop (please complete the following information): Firefox / Apple / 78.7.0esr

Additional context I found the fixes on other threads here, but they don't work, for example https://github.com/FortAwesome/react-fontawesome/issues/234

I load my fonts as so.. and they work great other than the flash sometimes

import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faTags } from '@fortawesome/free-solid-svg-icons'
import { faRulerCombined } from '@fortawesome/free-solid-svg-icons'
import { faPalette } from '@fortawesome/free-solid-svg-icons'

So the fix is not relevant to my setup up...

But I tried it anyway, I added

import '@fortawesome/fontawesome-svg-core/styles.css' config.autoAddCss = false

to both my _app.js (error: Internal Server Error)

and the page that uses them (Legend.js) (error: ReferenceError: config is not defined)

[maximegheraille]

Hi, if you are using NextJS you can do this

import "@fortawesome/fontawesome-svg-core/styles.css";
config.autoAddCss = false;

this does work for me, but no idea if you might have the same problem after it ( not be able to override the default classes of the icon)

[meliborn]

Having this lines of code, but still getting this flashing in production.

[troyshu]

@maximegheraille's suggested fix above worked for me. I also had to import config:

import { config as faConfig } from "@fortawesome/fontawesome-svg-core";
import "@fortawesome/fontawesome-svg-core/styles.css";
faConfig.autoAddCss = false;