How to fix FontAwesome icons being huge on page load in React

Question

After a lot of searching, I can't seem to find a solution for this. I'm using forawesome icons on my main page, and on load they are huge for a short period of time.

here is an example: https://makeyka.herokuapp.com/

I've tried

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

then trying to add the css with no luck

Answer 1

Turn off autoAddCss:

import { config } from '@fortawesome/fontawesome-svg-core'
config.autoAddCss = false

Load in CSS directly in SCSS file:

@import 'node_modules/@fortawesome/fontawesome-svg-core/styles'

And in your style put this:

<style jsx global>{`
  ...

  @import url('https://fonts.googleapis.com/css?family=Didact+Gothic');

  ${dom.css()}

  ...
`}</style>

please follow the link: https://fontawesome.com/how-to-use/on-the-web/other-topics/server-side-rendering

Answer 2

Basically this question is abut React.js. However I was stumbling over the very same issue in context of Vue.js. This solution of mine is basically meant to work with Vue.js in context of single-file components.

Insert this code in your entry code file:

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

Now, prepend another block addressing the required file to any existing <style> block in your root element's component:

<style src="@fortawesome/fontawesome-svg-core/styles.css"></style>

Answer 3

class.hero-section-content-intro(container for all font Icons) has width: 300;

until CSS file for Icon is not loaded all icons takes width: 300 (of parent)

you need to handle this case to resolve issue.

add font-size for icons.

Answer 4

Cant reproduce the behaviour you described. Is it fixed? If so close the question.