Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Over sized icons on each page refresh #134

Closed
iamsuneeth opened this issue May 20, 2018 · 27 comments
Closed

Over sized icons on each page refresh #134

iamsuneeth opened this issue May 20, 2018 · 27 comments

Comments

@iamsuneeth
Copy link

@iamsuneeth iamsuneeth commented May 20, 2018

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:a@a.com">
            <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
Copy link
Member

@robmadole robmadole commented May 25, 2018

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
Copy link
Author

@iamsuneeth iamsuneeth commented May 25, 2018

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
Copy link
Author

@iamsuneeth iamsuneeth commented May 29, 2018

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
Copy link
Member

@robmadole robmadole commented May 31, 2018

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

@fev4
Copy link

@fev4 fev4 commented Aug 26, 2018

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

@danhaynosch
Copy link

@danhaynosch danhaynosch commented Sep 11, 2018

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

fontawesome.config = {
autoAddCss: false
};

@thanosea
Copy link

@thanosea thanosea commented Sep 13, 2018

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
Copy link

@asifkabani asifkabani commented Sep 15, 2018

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
Copy link

@paustint paustint commented Sep 15, 2018

@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
Copy link

@asifkabani asifkabani commented Sep 16, 2018

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

@jeanregisser
Copy link

@jeanregisser jeanregisser commented Mar 12, 2019

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
Copy link

@shakesBeardZ shakesBeardZ commented Mar 25, 2019

@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
Copy link

@rakeshta rakeshta commented Apr 24, 2019

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/fontawesome-svg-core@1.2.17/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
Copy link

@bsgreenb bsgreenb commented Oct 18, 2019

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
Copy link

@rolandmarg rolandmarg commented Dec 8, 2019

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/"],
},
},

skalee added a commit to fotorelacjonusz/fotorelacjonusz-ng that referenced this issue Dec 16, 2019
Normally, it is should be added automatically, but for some reason that
doesn't work in this NW.js application.  Therefore, this feature is
opted out in favour of manual setup.

The reason is unknown, possibly one of following explains the problem:
- FortAwesome/Font-Awesome#12969
- FortAwesome/react-fontawesome#134
@avevlad
Copy link

@avevlad avevlad commented Apr 2, 2020

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

next.config.js

{
    cssModules: false,
}

_app.tsx

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

nicobao pushed a commit to baozi-technology/baozi-web that referenced this issue Apr 14, 2020
…ting to render icons

Prevent fontawesome from dynamically adding its css since we did it manually
FortAwesome/react-fontawesome#134 (comment)
FortAwesome/vue-fontawesome#14 (comment)
Closes #10
@py563
Copy link

@py563 py563 commented May 11, 2020

@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
Copy link

@bsgreenb bsgreenb commented May 11, 2020

@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
Copy link

@py563 py563 commented May 11, 2020

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

DigiPie added a commit to DigiPie/kaya-folio that referenced this issue Dec 23, 2020
@Basovs
Copy link

@Basovs Basovs commented Mar 31, 2021

@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!

rm3l added a commit to rm3l/rm3l.org that referenced this issue May 30, 2021
@cschull
Copy link

@cschull cschull commented Aug 9, 2021

@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
Copy link
Member

@robmadole robmadole commented Aug 9, 2021

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

@cschull
Copy link

@cschull cschull commented Aug 11, 2021

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
Copy link
Member

@robmadole robmadole commented Aug 11, 2021

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
Copy link

@cschull cschull commented Aug 12, 2021

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

@dboekhout
Copy link

@dboekhout dboekhout commented Dec 21, 2021

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" />

@ezhupa99
Copy link

@ezhupa99 ezhupa99 commented Feb 4, 2022

for angular ssr do this:

open angular.json

"architect": {
  "build": {
    ...,
    "options": {
      ...,
      "styles": [
	"node_modules/@fortawesome/fontawesome-svg-core/styles.css", // -> this does the magic
	"src/styles.scss"
	],
    }
  }
}

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests