-
Notifications
You must be signed in to change notification settings - Fork 264
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
Comments
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 You should then turn off the |
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. |
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 ??
|
Can you provide a reproduction of this using StackBlitz or codesandbox? |
Having this same problem using Next.js |
Same problem with Next.js too....added the code below and it did not fix. fontawesome.config = { |
Hello, I got this problem on Firefox, but I removed it by adding attribute fixedWidth to the FontAwesomeIcon tag: |
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. |
@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)
|
@paustint thank you so much! That fixed my issue. |
…tyles in the Head of the Document FontAwesome Configuration to Disable AutoAddCss Adding FontAwesome Styles in the Head of the Document FortAwesome/react-fontawesome#136 FortAwesome/react-fontawesome#134 https://fontawesome.com/how-to-use/on-the-web/other-topics/server-side-rendering
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; |
@fillipvt @alczervik problmes related to nextjs can be solved by importing import |
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.)
Turn off auto-insert of CSS by font awesome JS:
I made this work on Razzle. But this should work regardless of how you are doing SSR. |
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/ |
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 { |
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
If you use next.js with next.config.js {
cssModules: false,
} _app.tsx import "@fortawesome/fontawesome-svg-core/styles.css"; |
…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
@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. |
@py563 What I have in
We also use a 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 |
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 sorry @bsgreenb I am not on discord. please send a message on twitter at py563 or on keybase at prajwalyashasvi |
See FortAwesome/react-fontawesome#134 for more information
You r best! - WORKS! |
Workaround suggested in [1] [1] FortAwesome/react-fontawesome#134
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.
My font awesome icons are still rendering in a huge size on page render, for just a couple seconds. Any suggestions? |
@cschull are you using Next.js or Gatsby? What version are you using? |
I'm using version 11.0 of next.js. I actually solved this issue by removing all the
|
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? |
@robmadole yep it's solved! And I've applied my own styling via the style prop. |
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 So what I do now is
and use as |
for angular ssr do this: open angular.json
|
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'
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/
The text was updated successfully, but these errors were encountered: