CODEWITHSUNDEEP
javascriptreactjs
A-Makeyev
A-Makeyev

Reputation: 409

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

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

Upvotes: 7

Views: 3779

Answers (3)

Thomas Urban
Thomas Urban

Reputation: 5061

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>

Upvotes: 4

Aravind
Aravind

Reputation: 159

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

Upvotes: 6

Bhagawat Dongre
Bhagawat Dongre

Reputation: 99

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.

Upvotes: 2

Related Questions