react-fontawesome Font Icons are always large

Hi

I have seen many people complaining that icon sizes flash large at load and then resize. In my case, they stay large always and the size="sm" or "1x" doesn't do anything. Have you seen this? The fontawesome icon renders as an svg and the path comes with fixed values from the server, so no css can help it.

FYI, I am using nextjs server side rendering and this is how I import my fontawesome in my head:

import { library } from '@fortawesome/fontawesome-svg-core' import { fab } from '@fortawesome/free-brands-svg-icons' import { fas } from '@fortawesome/free-solid-svg-icons'library.add(fab, fas);

And then i use it in any class like this:

import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';

I am using chrome on mac.

Thanks for your help.

Sep 21 '19 16:09 semyou

I had the same issue, in my case font awesome's CSS was just not getting loaded at all, which resulted in SVGs always showing as large as possible.

You can try manually inserting the CSS into your app. I use styled-components and this is how I did it:

import { createGlobalStyle } from "styled-components";
import { config, dom } from "@fortawesome/fontawesome-svg-core";
config.autoAddCss = false;
const GlobalStyles = createGlobalStyle`
    ${dom.css()}
`;

Based on the answers to this issue: https://github.com/FortAwesome/react-fontawesome/issues/27

Sep 30 '19 18:09 evenmed

@evenmed Thanks, this worked for me. Upgraded from NextJS 8 to 9 and suddenly the icons were huge.

Would be interesting to know what exactly changed to cause this though. Thinking maybe the internals of NextJS changing the way they do things maybe..

Oct 18 '19 20:10 ezeikel

@ezeikel Hi, can you post how you solved this? Where did you copy this in _document.js?

Nov 06 '19 22:11 adrianwix

@adrianwix If you're also using styled-components just copy the code I posted and then insert the <GlobalStyles/> element anywhere in your app. I put it in my _app.js file but I guess you could also put it in _document.js.

// _app.js
import App from "next/app";
import { createGlobalStyle } from "styled-components";
import { config, dom } from "@fortawesome/fontawesome-svg-core";

config.autoAddCss = false;
const GlobalStyles = createGlobalStyle`
    ${dom.css()}
    // Insert any other global styles you want here
`;

export default class MyApp extends App {
    render() {
        return(
            <>
                <GlobalStyles/>
                <RestOfYourSite/>
            </>
        );
    }
}

If you're not using styled-components then just insert dom.css() wherever you can insert plain CSS.

Hope this helps :)

Nov 07 '19 17:11 evenmed

I've put a PR up that includes some documentation on this:

https://github.com/FortAwesome/react-fontawesome/pull/300

Can you all take a look and see if I've missed anything?

Nov 08 '19 15:11 robmadole

Also, if there is a preference to either use @zeit/next-css or to use styled-components please let me know. I can include docs for both ways if that's helpful.

Nov 08 '19 15:11 robmadole

Hi, thanks for answering. So I literally added styled-components to fix this bug which seemed a bit overkill. I had already @zeit/next-css so instead, I imported the styles directly in _app.js like show in the PR. Therefore removing styled-components. Thanks again.

Nov 08 '19 17:11 adrianwix

Worked for me just using next's built-in Head element too:

import Head from "next/head";
import { config, dom } from "@fortawesome/fontawesome-svg-core";
config.autoAddCss = false;
...
return (
  <div>
    <Head><style>{dom.css()}</style></Head>
    ...
  </div>
);

Sep 13 '20 18:09 svachalek

Not sure if people are still working on this...so I just came across this issue just now, apparently when you have a combination of:

    "@fortawesome/fontawesome-svg-core": "^1.2.36",
    "@fortawesome/free-brand-svg-icons": "^5.15.4", // as soon as you add this dependency in, the icons are all jacked up
    "@fortawesome/free-solid-svg-icons": "^5.15.4",
    "@fortawesome/react-fontawesome": "^0.1.16",

As soon as you add in the @fortawesome/free-brand-svg-icons dependency, the icons get all large and strange, targeting the font-size of the icon seems to shift the x and y coordinates. But if you remove the dependency then your CSS goes back to the way it was.

Might have to find some sort of hard coded alternative to the icons...maybe I will just crop out some images and use them as the social media buttons in place of the brand-svg-icon library.

Nov 16 '21 12:11 SquireOfSoftware

is...this problem potentially from a recent update, i didn't expect a message 6 minutes ago but I just had this problem (edit: fixes in this issue still works at least, guess I'll be using that for now)

Nov 16 '21 12:11 kagiura

Ah then my issue is probably something different then, my solid icons work as per normal but if I import the brand icons, it scales the existing solid icons up, I haven't had a chance to debug it yet, maybe I will spawn a separate thread about it, once I get a reliable repro.

Nov 16 '21 20:11 SquireOfSoftware

Same issue using Astro (it was working fine with a CRA app)

Solution with Astro:

import '@fortawesome/fontawesome-svg-core/styles.css'; on your main Layout file.

Ref: https://docs.astro.build/en/guides/styling/#import-a-stylesheet-from-an-npm-package

Oct 30 '23 17:10 lfilho

Thanks @semyou for raising the issue and thanks @evenmed and @svachalek for the answers. Solved my problem.

Dec 22 '23 23:12 raj-pulapakura

react-fontawesome react-fontawesome copied to clipboard

Font Icons are always large

react-fontawesome
react-fontawesome copied to clipboard