Font Icons are always large

semyou commented 5 years ago

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 commented 4 years ago

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

ezeikel commented 4 years ago

@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 commented 4 years ago

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

evenmed commented 4 years ago

@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 commented 4 years ago

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?

robmadole commented 4 years ago

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 commented 4 years ago

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 commented 4 years ago

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 commented 2 years ago

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 commented 2 years ago

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 commented 2 years ago

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.

lfilho commented 10 months ago

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 commented 9 months ago

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

FortAwesome / react-fontawesome

Font Icons are always large #284