Font-Awesome adds attribute aria-hidden which prevents icons from appearing in the browser [SSR]

Question

I want to include some Font-Awesome Icons in my Next.js project. I've added the needed

<script src="https://kit.fontawesome.com/xxxxxxxx.js" crossorigin="anonymous"></script>

tag to my Head and then the

<i className="fas fa-arrow-right"></i>

tag to my render method. If I open the website in my browser it gives me this console warning:

index.js:1 Warning: Extra attributes from the server: aria-hidden

and the

<i className="fas fa-arrow-right"></i>

switches to

<i className="fas fa-arrow-right" aria-hidden="true"></i>

I've already tried the react-fontawesome package but that doesn't seem to work with SSR. Adding

aria-hidden="false"

manually didn't fix it either.

I guess this is a problem with SSR but I wasn't able to find a good solution or alternative for it.

Also possibly helpful: https://fontawesome.com/how-to-use/on-the-web/other-topics/server-side-rendering — isherwood, Oct 24 '19 at 17:00
I've tried adding the attribute myself (updated the question). — DoubleJ, Oct 25 '19 at 17:22
It may be a warning, but the icons won't load or show up for me and that's the problem.. — DoubleJ, Oct 25 '19 at 17:22
Hi! Did you solve the issue. I have same issue. it was working before, suddenly i got this error — Yilmaz, May 03 '20 at 15:12
Unfortunately not... Looks like there's something wrong when using FontAwesome with NextJS — DoubleJ, May 04 '20 at 18:00

score 14 · Answer 1 · answered Mar 26 '20 at 13:37

14

I had the same issue and I resolved by adding aria-hidden to the icon in this way:

<i aria-hidden className="fab fa-whatsapp" />

No more warnings.

answered Mar 26 '20 at 13:37

Valentino Valenti

Thank you so much for this. I've had this problem for quite sometime and was never able to solve it until today. Thanks! – Kirasiris May 01 '22 at 08:33
Sorry for the late reply @Kirasiris. It is a pleasure being of help :) – Valentino Valenti Jul 28 '22 at 12:49

1 Answers1