通常情况下,将渐变色添加到Font Awesome图标似乎很容易,只需应用以下CSS:
background: -webkit-linear-gradient(#9c47fc, #356ad2);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
但是出于某些原因,我无法在React中实现它。我的JSX代码如下:
<FontAwesomeIcon className="audio-icon" icon="step-backward" />
同时需要编写 css:
.audio-icon {
font-size: 20rem;
text-align: center;
position: absolute;
background: -webkit-linear-gradient(#9c47fc, #356ad2);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
渐变不起作用。如果我使用!important:
background: -webkit-linear-gradient(#9c47fc, #356ad2) !important;
这适用于背景,但我无法在webkit-background-clip和webkit-text-fill-color中添加!important标记。
此外,尝试选择伪元素.audio-icon::before没有任何效果。
有什么想法吗?
提前感谢。
linear-gradient()
,移除webit
。 - Temani Afif