Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

react font awesome renders big icon until scales down

I am using react server side rendering and client side rendering (hydrate) with fontawesome but when page is rendering, the icon is huge until it scales down and the correct size class is added to the icon OR the css is loaded (I dont know).

enter image description here

like image 912
Ron Avatar asked Apr 11 '18 18:04

Ron


3 Answers

Turn off autoAddCss:

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

Load in CSS directly in SCSS file:

@import 'node_modules/@fortawesome/fontawesome-svg-core/styles'
like image 105
Jeremy Lynch Avatar answered Oct 16 '22 10:10

Jeremy Lynch


Please, see this article:

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

In react you need to this in your layout or global config:

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

And in your style put this:

<style jsx global>{`
  ...

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

  ${dom.css()}

  ...
`}</style>
like image 35
Fernando M. Tenório Avatar answered Oct 16 '22 10:10

Fernando M. Tenório


This is an issue with the CSS loading after the page renders initially, as you have guessed. The solution that I have found is to either make sure the CSS on the server renders on the same page as the icon (depending on what frameworks you are using to manage stylesheets), or to make sure that whatever .css file you are using for this gets loaded before the html renders. This can be done by making sure the link tag for the stylesheet appears near the top of your page.

like image 2
jaredkwright Avatar answered Oct 16 '22 11:10

jaredkwright