Over sized icons on each page refresh

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:[e-mail]">
            <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/

[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';
...

[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;