Font-Awesome Using NextJS with Kit

Describe the bug

We are using NextJS with FontAwesome pro, and are loading the kit through the script tag placed in the document head.

The initial page load works fine, and the svg minimal styling is in-lined into the head. However, when you make a client-side route transition, the same minimal styling is missing, causing the icons to look large. This issue only seems to affect NextJS running in prod mode.

To Reproduce Bootstrap a new project with create-nextjs-app

npx create-nextjs-app my-project

Create a custom _document.js, and add the kit script from FontAwesome to the Head

<Head>
  <script src={`https://kit.fontawesome.com/${process.env.FA_KIT_TOKEN}.js`} crossOrigin="anonymous" async ></script>
</Head>

Create a new page and a next/link to it from index.js, and add a few FA icons to both pages.

Build and launch in prod mode

npm run build && \
npm start

Load the home page, then click the link to the other page. FontAwesome icon styling will not be applied, causing the icon to not be 1em height.

Expected behavior

It should load and preserve the preserve the minimal styling in the head on route transitions in the browser.

I have created a repo with a minimal example here.

Version and implementation Version:

FontAwesome 5.15.1
NextJS latest

Browser and version:

[x] SVG with JS
[ ] Web Fonts with CSS
[ ] SVG Sprites
[ ] On the Desktop

Bug report checklist

[x] I have filled out as much of the above information as I can
[x] I have included a test case because my odds go way up that the team can fix this when I do
[x] I have searched for existing issues and to the best of my knowledge this is not a duplicate

Jan 13 '21 23:01 chasefranks

Hi!

Thanks for being part of the Font Awesome Community and thanks for this detailed report.

I do not know if using kits with NextJS is a supported use case, @robmadole could you please take a look?

Jan 14 '21 09:01 tagliala

Hello,

Was this ever resolved? I would also like to use a kit with NextJS to make use of several custom uploaded icons. I was told by a representative that kits do not work with npm, but I'm curious if there is another reliable way to integrate with my project. Otherwise, I will be forced to stop using Font Awesome. Thank you

Aug 31 '22 13:08 a-znk

Hey, was this ever solved? My team and I have paid for premium FontAwesome and we can't integrate it with our solution.

Oct 30 '22 06:10 tomasp1189

Asking for an update on this as well

Nov 24 '22 07:11 f-bog

I have the same issue. As a workaround, adding the CSS rules for the .svg-inline--fa class solves the problem :

.svg-inline--fa {
  display: var(--fa-display, inline-block);
  height: 1em;
  overflow: visible;
  vertical-align: -0.125em;
}

I had other issues, I expanded on those there : https://github.com/vercel/next.js/discussions/16027#discussioncomment-5255313

Mar 09 '23 13:03 drskullster

same

import "./globals.css"; import Script from "next/script"; import Footer from "./UI/Other/Footer"; import Header from "./UI/Header/Header"; import { inter } from "./font";

export const metadata = {

}; export default function RootLayout({ children }) { return ( <html lang="en" className="scroll-smooth"> <Script src="https://kit.fontawesome.com/######.js" crossOrigin="anonymous" strategy="beforeInteractive" /> <body className={${inter.className} p-2 text-teal-950 bg-teal-50 lg:text-xl } > <Header /> {children} <Footer />

); }

Apr 02 '24 21:04 tbrown034

We have documentation on integrating with NextJS here: https://docs.fontawesome.com/web/use-with/react/use-with/#nextjs

Apr 05 '24 21:04 robmadole

This does not mention kit usage.?

Apr 16 '24 12:04 jimmailcamp

Font-Awesome Font-Awesome copied to clipboard

Using NextJS with Kit

Font-Awesome
Font-Awesome copied to clipboard