本文介绍了Font-Awesome添加了aria-hidden属性,可防止图标出现在浏览器中[SSR]的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我想在Next.js项目中包含一些真棒字体"图标.我已经添加了所需的

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>

先标记我的头,然后

<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:

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

切换到

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

我已经尝试过react-fontawesome软件包,但似乎不适用于SSR.添加

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

aria-hidden="false"

手动也没有修复它.

我想这是SSR的问题,但我找不到合适的解决方案或替代方案.

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

推荐答案

我遇到了同样的问题,并通过向图标添加 aria-hidden 来解决此问题:

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" />

没有更多警告.

这篇关于Font-Awesome添加了aria-hidden属性,可防止图标出现在浏览器中[SSR]的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

07-07 11:45