Font Icons are always large #284

semyou · 2019-09-21T16:38:35Z

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.

evenmed · 2019-09-30T18:50:40Z

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: #27

ezeikel · 2019-10-18T20:45:05Z

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

adrianwix · 2019-11-06T22:27:43Z

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

evenmed · 2019-11-07T17:14:47Z

@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 :)

robmadole · 2019-11-08T15:19:28Z

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

#300

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

robmadole · 2019-11-08T15:20:37Z

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.

adrianwix · 2019-11-08T17:03:05Z

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.

svachalek · 2020-09-13T18:32:14Z

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

SquireOfSoftware · 2021-11-16T12:11:08Z

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.

kagiura · 2021-11-16T12:18:24Z

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)

SquireOfSoftware · 2021-11-16T20:39:17Z

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.

Thanks to FortAwesome/react-fontawesome#284

lfilho · 2023-10-30T17:49:32Z

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

raj-pulapakura · 2023-12-22T23:50:39Z

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

calderon mentioned this issue Mar 25, 2020

Font awesome icons flash large at load and then resize calderon/blog#36

Closed

francofantini mentioned this issue Nov 19, 2020

Version 1.2.1 breaks FontAwesome Timer/cssnano-simple#7

Closed

thiras mentioned this issue Feb 21, 2021

Huge icon size when add <link> tags to head #412

Open

maximegheraille mentioned this issue Feb 28, 2021

Cannot override classes after huge icon size and default classes not working fix #413

Open

rm3l mentioned this issue May 30, 2021

Huge icons on page initial load rm3l/rm3l.org#782

Closed

abbyoung mentioned this issue Jul 26, 2021

feat: Home Page USSF-ORBIT/ussf-portal-client#45

Merged

griffin-a added a commit to griffin-a/dj-website that referenced this issue Jul 7, 2022

Fixed weird resizing of hamburger menu

3b17639

Thanks to FortAwesome/react-fontawesome#284

CameronCT mentioned this issue Sep 11, 2022

FontAwesome library has large icons for no reason CameronCT/nextjs-node-auth-system#1

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Font Icons are always large #284

Font Icons are always large #284

semyou commented Sep 21, 2019 •

edited

Loading

evenmed commented Sep 30, 2019 •

edited

Loading

ezeikel commented Oct 18, 2019

adrianwix commented Nov 6, 2019

evenmed commented Nov 7, 2019 •

edited

Loading

robmadole commented Nov 8, 2019

robmadole commented Nov 8, 2019

adrianwix commented Nov 8, 2019

svachalek commented Sep 13, 2020 •

edited

Loading

SquireOfSoftware commented Nov 16, 2021

kagiura commented Nov 16, 2021 •

edited

Loading

SquireOfSoftware commented Nov 16, 2021

lfilho commented Oct 30, 2023

raj-pulapakura commented Dec 22, 2023 •

edited

Loading

Font Icons are always large #284

Font Icons are always large #284

Comments

semyou commented Sep 21, 2019 • edited Loading

evenmed commented Sep 30, 2019 • edited Loading

ezeikel commented Oct 18, 2019

adrianwix commented Nov 6, 2019

evenmed commented Nov 7, 2019 • edited Loading

robmadole commented Nov 8, 2019

robmadole commented Nov 8, 2019

adrianwix commented Nov 8, 2019

svachalek commented Sep 13, 2020 • edited Loading

SquireOfSoftware commented Nov 16, 2021

kagiura commented Nov 16, 2021 • edited Loading

SquireOfSoftware commented Nov 16, 2021

lfilho commented Oct 30, 2023

raj-pulapakura commented Dec 22, 2023 • edited Loading

semyou commented Sep 21, 2019 •

edited

Loading

evenmed commented Sep 30, 2019 •

edited

Loading

evenmed commented Nov 7, 2019 •

edited

Loading

svachalek commented Sep 13, 2020 •

edited

Loading

kagiura commented Nov 16, 2021 •

edited

Loading

raj-pulapakura commented Dec 22, 2023 •

edited

Loading