FontNext.js & React 设置中的 FontAwesome 渐变色

Question

我一直在努力为页面中的字体图标添加渐变。无论我的目标是什么，我似乎都无法让它发挥作用。我只能通过使用标签或svg本身的color属性在.active图标中获得颜色，这不支持渐变。

我已经尝试了许多我在这里和其他网站上使用背景剪辑找到的解决方案，但由于某种原因，它们似乎不起作用。我的网站使用的是next.js，这就是为什么这些类看起来很有趣，但我不认为这会影响图标的样式。

当font真棒组件具有.active类时，我如何将渐变应用于该组件？

这是元素的代码

const [video, setVideo] = useState({
videoUrl:"resources/videos/video1.mp4",
videoType: "video/mp4",
videoTitle: "Explore ",
videoMsg: "Express ",
videoButton: "Features"
});
const [numberState, setNumberState] = useState(1);
const refillHook = (obj, i) => {
setVideo({
videoUrl: obj.link,
videoType: obj.type,
videoTitle: obj.title,
videoMsg: obj.msg,
videoButton: obj.button
});
setNumberState(i);
}
const videoItem = IconsVideos.map((video, i) => {
return (
<a onClick={() => refillHook(video, i)} className={numberState === i && `${Styles.active}`} key={i}>
<FontAwesomeIcon
className={`${Styles.iconLink}`}
icon={faCoffee}
size="2x"
/>
</a> 
)});
return (
<section className={`${Styles.stripe} ${Styles.stripeWithIcons} ${Styles.segment}`}>
<div className={`${Styles.left} ${Styles.leftWithIcons}`}>
<div className={`${Styles.leftInnerWithIcons}`}>
<div className={`${Styles.iconsContainer}`}>
<ul className={`${Styles.iconsList}`}>
{videoItem}
</ul>
</div>
<div className={`${Styles.videosContainer}`}>
<VideoPlayer src={video.videoUrl} type={video.videoType} />
</div>
</div>
</div>
<div className={`${Styles.right} ${Styles.rightWithIcons}`}>
<div className={`${Styles.rightInner}`}>
<h1 className={`${Styles.pageH1}`} >{video.videoTitle}</h1>
<p className={`${Styles.pageP}`}>{video.videoMsg}</p>
<PageButton buttonText={video.videoButton} />
</div>
</div>
</section>
);
};

Answer 1

对于将来有这个问题的人，我终于找到了解决方案。你可以通过掩蔽来实现这一点。

在您的HTML:中

<FontAwesomeIcon className={styles.featureIcon} icon={["fas", "bolt"]} size="5x" mask={["fas", "square-full"]} />

在您的CSS中：

.featureIcon {
background: rgb(226, 56, 56);
background: linear-gradient(
180deg,
rgba(255, 185, 0, 1),
rgba(247, 130, 0, 1),
rgba(226, 56, 56, 1),
rgba(151, 57, 153, 1),
rgba(0, 156, 223, 1) 91%
);
color: var(--bg-color);
border: black 2px;
}