Why my font-awesome icons are being displayed big at first and then updated to the right size?

Question

Every time I refresh the page the font-awesome icons are being displayed big. Seems like the css in being loaded before applying the proper size because right after the refresh it shows big, and then goes to the right size.

I tried some solutions I found online but none of them worked.

Right now I'm back to square one where I have these:

import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faFacebook } from '@fortawesome/free-brands-svg-icons'
import { faTwitter } from '@fortawesome/free-brands-svg-icons'
import { faLinkedin } from '@fortawesome/free-brands-svg-icons'
import { faEnvelope } from '@fortawesome/free-solid-svg-icons'
import { faMapMarkerAlt } from '@fortawesome/free-solid-svg-icons'

and then use them like this:

<FontAwesomeIcon icon={faFacebook} color="white" size="2x"/>

I didn't need to import any css but I did install following this link:

https://www.npmjs.com/package/@fortawesome/react-fontawesome

Basically I installed those:

$ npm i --save @fortawesome/fontawesome-svg-core
$ npm i --save @fortawesome/free-solid-svg-icons
$ npm i --save @fortawesome/react-fontawesome

If someone could give me a direction on what to look for it would be great.

My project is hosted at Github (https://github.com/palomaschkrab/keto-ui) And you can run it with "npm run dev" and go to localhost:3000/about_us if you want to see it happening.

Answer 1

This is a very common bug when using Font Awesome icons with static site generators that use server side rendering, like Gatsby.js and Next.js. The cause is the fact that the icon is being rendered before the CSS is loaded.

You can fix this by loading the CSS manually in your root component, and then preventing Font Awesome from loading it again so you don't have duplicate classes.
Add the following to e.g. layout.js or index.js:

// The following import prevents a Font Awesome icon server-side rendering bug,
// where the icons flash from a very large icon down to a properly sized one:
import '@fortawesome/fontawesome-svg-core/styles.css';
// Prevent fontawesome from adding its CSS since we did it manually above:
import { config } from '@fortawesome/fontawesome-svg-core';
config.autoAddCss = false; /* eslint-disable import/first */

More info can be found in this Github issue.