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

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.

I've seen this before when browsing some pages, most notably www.getbootstrap.comOnly happened with Firefox and I found that Ctrl+F5 would fix the problem. As soon as I opened another URL on the same site, that effect returned. Never found out what was causing it, as I then decided to go to Chrome.