How can I use fontawesome cdn with next.js

Question

In Head component of Next.js I add this CDN code:

<script
    src="https://kit.fontawesome.com/fbadad80a0.js"
    crossOrigin="anonymous"
></script>

and I use the icon in my project as follow:

<Nav.Link href="/cart">
    {" "}
    <i aria-hidden className="fas fa-shopping-cart"></i> Cart
</Nav.Link>

I get this error on the console:

Warning: Extra attributes from the server: aria-hidden
        at i
        at span
        at div
        at Rating (webpack-internal:///./src/components/product/Rating.tsx:14:20)
        at div
        at div
        at CardText (webpack-internal:///./node_modules/react-bootstrap/esm/createWithBsPrefix.js:31:27)
        at div
        at CardBody (webpack-internal:///./node_modules/react-bootstrap/esm/createWithBsPrefix.js:31:27)
        at div
        at Card (webpack-internal:///./node_modules/react-bootstrap/esm/Card.js:44:23)
        at Product (webpack-internal:///./src/components/product/Product.tsx:22:22)
        at div
        at Col (webpack-internal:///./node_modules/react-bootstrap/esm/Col.js:17:23)
        at div
        at Row (webpack-internal:///./node_modules/react-bootstrap/esm/Row.js:19:23)
        at div
        at Container (webpack-internal:///./node_modules/react-bootstrap/esm/Container.js:18:23)
        at div
        at BasePage (webpack-internal:///./src/components/layout/Basepage.tsx:19:25)
        at main
        at div
        at BaseLayout (webpack-internal:///./src/components/layout/BaseLayout.tsx:20:23)
        at Index (webpack-internal:///./src/pages/index.tsx:26:30)
        at App (webpack-internal:///./src/pages/_app.tsx:34:24)
        at Provider (webpack-internal:///./node_modules/react-redux/es/components/Provider.js:14:20)
        at withRedux(App) (webpack-internal:///./node_modules/next-redux-wrapper/es6/index.js:182:35)
        at ErrorBoundary (webpack-internal:///./node_modules/@next/react-dev-overlay/lib/internal/ErrorBoundary.js:23:47)
        at ReactDevOverlay (webpack-internal:///./node_modules/@next/react-dev-overlay/lib/internal/ReactDevOverlay.js:73:23)
        at Container (webpack-internal:///./node_modules/next/dist/client/index.js:149:5)
        at AppContainer (webpack-internal:///./node_modules/next/dist/client/index.js:637:24)
        at Root (webpack-internal:///./node_modules/next/dist/client/index.js:768:24)

Possibly related (but also doesn't have an answer): [Font-Awesome adds attribute aria-hidden which prevents icons from appearing in the browser](https://stackoverflow.com/q/58529779/1870780). — juliomalves, Mar 06 '21 at 17:22

score 0 · Answer 1 · answered Jan 04 '22 at 08:00

In the head component of your next file try this

<Head>
      <link
             async
             rel="stylesheet"
             href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css"
       />
           
        </Head>

This should work, or any other links for that regard

How can I use fontawesome cdn with next.js

1 Answers1