React-fontawesome: Over sized icons on each page refresh

[iamsuneeth]

Hi,

I'm suing react-fontawesome with gatsby js for my site. After the static site is generated, on each page refresh, icons are displayed with its maximum size and goes back to the given size when the site is loaded completely.

I'm using the icons as below,

import FontAwesomeIcon from '@fortawesome/react-fontawesome' import faEnvelope from '@fortawesome/fontawesome-free-solid/faEnvelope' import faDownload from '@fortawesome/fontawesome-free-solid/faDownload'

<div className={styles.body}>
        <button className={styles.button}>
          <a target="_blank" href={PDF}>
            <FontAwesomeIcon icon={faDownload} size="1x" /> download
          </a>
        </button>
        <button className={styles.button}>
          <a href="mailto:[email protected]">
            <FontAwesomeIcon icon={faEnvelope} size="1x" /> Mail me!
          </a>
        </button>
</div>

Styles

.button{ width:20%; min-width: 150px; background: none; color: #02B3E4; border:1px solid #02B3E4; margin:10px 20px ; border-radius:100px; }

I'm not entirely sure this behavior is because of gatsby or the way I use font-awesome components.
You can view the issue here : https://iamsuneeth.github.io/

[robmadole]

We have some docs on this: https://fontawesome.com/how-to-use/server-side-rendering#css (that explains the basic problem)

You should be able to include the file in node_modules/@fortawesome/fontawesome/styles.css in the head of your document to fix this.

You should then turn off the autoAddCss config. https://fontawesome.com/how-to-use/font-awesome-api#configuration

[iamsuneeth]

Thanks. Didn't bother to check ssr docs. Now I understand the similarity with gatsy and ssr. The doc should be updated with reference to static site generators also I guess, just a suggestion.

[iamsuneeth]

Hi, I have added the styles from font awesome and disabled audotAddCss option like below. It seems to be working for all the icons, except brands. They are now enlarged and styles are not getting applied to them it seems. Did I miss anything ??

import React from 'react'
import PropTypes from 'prop-types'
import Helmet from 'react-helmet'
import fontawesome from '@fortawesome/fontawesome'
import FontAwesomeIcon from '@fortawesome/react-fontawesome'
import brands from '@fortawesome/fontawesome-free-brands'
import faUserSecret from '@fortawesome/fontawesome-free-solid/faUserSecret'
import faEnvelope from '@fortawesome/fontawesome-free-solid/faEnvelope'
import faDownload from '@fortawesome/fontawesome-free-solid/faDownload'
import faHome from '@fortawesome/fontawesome-free-solid/faHome'
import faCogs from '@fortawesome/fontawesome-free-solid/faCogs'
import faNewspaper from '@fortawesome/fontawesome-free-solid/faNewspaper'
import Header from '../components/header'
import ScrollReveal from '../components/scroll-reveal'
import ScrollMenu from '../components/scrollMenu'

import './index.module.css'

fontawesome.library.add(
  brands,
  faUserSecret,
  faEnvelope,
  faDownload,
  faHome,
  faCogs,
  faNewspaper
)
fontawesome.config = { autoAddCss: false }
const Layout = ({ children, data }) => (
  <div>
    <Helmet
      title={data.site.siteMetadata.title}
      meta={[
        { name: 'description', content: 'Sample' },
        { name: 'keywords', content: 'sample, something' },
      ]}
    >
      <style>{fontawesome.dom.css()}</style>
    </Helmet>

    <Header />
    <div
      style={{
        margin: '0 0',
        paddingTop: '60px',
      }}
    >
      {children()}
    </div>
  </div>
)

[robmadole]

Can you provide a reproduction of this using StackBlitz or codesandbox?

[fev4]

Having this same problem using Next.js
Did @iamsuneeth find a solution for this?

[danhaynosch]

Same problem with Next.js too....added the code below and it did not fix.

fontawesome.config = {
autoAddCss: false
};

[thanosea]

Hello,

I got this problem on Firefox, but I removed it by adding attribute fixedWidth to the FontAwesomeIcon tag:
<FontAwesomeIcon icon={['fas', 'spinner']} pulse fixedWidth size="4x" />

[asifkabani]

I am using react and gatsby and deploying my site to netlify. In development mode it is fine but when I push the changes to the netlify server, I am getting the large icons issue on load on the site.
Link to site

[paustint]

@asifkabani - I am using Gatsby for the landing page of my application and ran into the same problem you describe. I fixed this by doing the following:

(Note: I am using typescript, so adjust as needed for JSX)
In layouts/index.tsx import the CSS in your layout(s) to make sure that it loads first, before any attempt to render an icon.

import * as React from 'react';
...
// this ensures that the icon CSS is loaded immediately before attempting to render icons
import '@fortawesome/fontawesome-svg-core/styles.css';
...

[asifkabani]

@paustint thank you so much! That fixed my issue.

[jeanregisser]

Adding to what @paustint said for Gatbsy, you should preferably also prevent fontawesome from dynamically adding its css so you don't have duplicate classes:

// This ensures that the icon CSS is loaded immediately before attempting to render icons
import "@fortawesome/fontawesome-svg-core/styles.css";
import { config } from "@fortawesome/fontawesome-svg-core";
// Prevent fontawesome from dynamically adding its css since we did it manually above
config.autoAddCss = false;

[shakesBeardZ]

@fillipvt @alczervik problmes related to nextjs can be solved by importing import '@fortawesome/fontawesome-svg-core/styles.css';
in
_app.js
and don't forget to install
npm install --save @zeit/next-css
to be able to import css files

[rakeshta]

My (imho nicer) fix for SSR rendering:

Insert stylesheet as a link in your HTML template header: (Remember to change the version number in the URL to the one you are using. Bonus: you can use https://www.srihash.org/ to generate the complete link tag with the integrity checksum.)

<link rel='stylesheet' href='https://unpkg.com/@fortawesome/[email protected]/styles.css' integrity='sha384-bM49M0p1PhqzW3LfkRUPZncLHInFknBRbB7S0jPGePYM+u7mLTBbwL0Pj/dQ7WqR' crossorigin='anonymous'>

Turn off auto-insert of CSS by font awesome JS:

import { config } from '@fortawesome/fontawesome-svg-core';

config.autoAddCss = false;

I made this work on Razzle. But this should work regardless of how you are doing SSR.

[bsgreenb]

Thanks @jeanregisser @paustint . Shouldn't this go in gatsby-browser.js instead of Layout? You may have multiple layouts in the future is my thinking. Also this seems like a clean seperation of global type imports.

See https://markoskon.com/notes/fix-oversized-icons-from-react-fontawesome/

[rolandmarg]

After already mentioned fix, my icons went permanently oversized. I was using gatsby-plugin-purgecss.

To fix permanent oversize, add ignore option to purgecss plugin

{
resolve: gatsby-plugin-purgecss,
options: {
printRejected: false,
develop: false,
ignore: ["fontawesome-svg-core/"],
},
},

[avevlad]

If you use next.js with @zeit/next-css

next.config.js

{
    cssModules: false,
}

_app.tsx

import "@fortawesome/fontawesome-svg-core/styles.css";

[py563]

@bsgreenb how to work around this if we are using a theme in gatsby. Do I need create layout.js in my src or fork the theme repo and add to layout.js in the theme.

[bsgreenb]

@py563 What I have in gatsby-browser.ts is:

import "@fortawesome/fontawesome-svg-core/styles.css";

We also use a GlobalStyles object that is shared between our app and our storybook. We eventually plan to seperate the UI/storybook to its own repo.

I'm going to ask my friend who knows more than me what best practice truly is. Will edit this comment to reflect what I learn. Feel free to hit me up on the Gatsby discord: babonk#8581

[py563]

Ok thanks, I am like a two days old in gatsby and i used a theme as a plugin so i dont have access to the layout.js and if i created new file under src will it mess the theme's layout and sytle. I worked with Hugo where we could extend themes.

sorry @bsgreenb I am not on discord. please send a message on twitter at py563 or on keybase at prajwalyashasvi

[Basovs]

@asifkabani - I am using Gatsby for the landing page of my application and ran into the same problem you describe. I fixed this by doing the following:

(Note: I am using typescript, so adjust as needed for JSX)
In layouts/index.tsx import the CSS in your layout(s) to make sure that it loads first, before any attempt to render an icon.

import * as React from 'react';
...
// this ensures that the icon CSS is loaded immediately before attempting to render icons
import '@fortawesome/fontawesome-svg-core/styles.css';
...

You r best! - WORKS!

[cschull]

@fillipvt @alczervik problmes related to nextjs can be solved by importing import '@fortawesome/fontawesome-svg-core/styles.css';
in
_app.js
and don't forget to install
npm install --save @zeit/next-css
to be able to import css files

I've tried this solution because none of the suggestions were working even with the below syntax in my _app.tsx file. I don't have a layouts folder or index.js/index.html files in this app so solutions with suggestions any of those won't work for me.

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

My font awesome icons are still rendering in a huge size on page render, for just a couple seconds. Any suggestions?

[robmadole]

@cschull are you using Next.js or Gatsby? What version are you using?

[cschull]

I'm using version 11.0 of next.js. I actually solved this issue by removing all the import {config}..., import "@fortawesome...", config.autoAddCss.." lines from my _app.tsx file and simply importing icons directly into the files in which they are used, as so:

import {FontAwesomeIcon} from "@fortawesome/react-fontawesome"
import { faExclamationCircle, faInfoCircle, } from "@fortawesome/free-solid-svg-icons"
This solved my styling issues, and the icons only render once in the proper size.

[robmadole]

Ok, so @cschull it sounds like you have solved this then? That's a bit surprising. Have you applied your own styling/CSS to size the icons?

[cschull]

@robmadole yep it's solved! And I've applied my own styling via the style prop.

[dboekhout]

This is still an issue. What is weird for me is that is was working fine before. I've recently created a new Next.js app and was working on it for a couple of days and now suddenly, every icon is huge. Why did it suddenly stop working?

I don't really like the proposed workarounds but
import "@fortawesome/fontawesome-svg-core/styles.css"
seems to be the cleanest one and in the end the only one that was needed for me.

So what I do now is
_app.js

import "@fortawesome/fontawesome-svg-core/styles.css"
import { library } from "@fortawesome/fontawesome-svg-core"
import { fas } from "@fortawesome/free-solid-svg-icons"
import { fab } from "@fortawesome/free-brands-svg-icons"

library.add(fas, fab)

and use as
<FontAwesomeIcon icon="hourglass-half" />