Question

通常在字体真棒图标中添加渐变颜色似乎很容易，只需应用以下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

此外，尝试选择psuedo元素.audio-icon :: before不会执行任何操作。

有什么想法吗？

预先感谢

Answer 1

我不确定npm的字体是否有问题，但是无论如何，解决方法是按照旧方法进行： 1.将CDN链接添加到index.html 2.使用普通的html语法：

<i className="fas fa-step-backward audio-icon"></i>

如果有人碰巧知道如何将其与React的npm包一起使用，我将不胜感激

谢谢

Answer 2

这对我有用

<FontAwesomeIcon icon="step-backward" style={{background:"-webkit-linear-gradient(#9c47fc, #356ad2)"}} />

（没有！important）

或使用普通的“线性梯度”

<FontAwesomeIcon icon="step-backward" style={{background:"linear-gradient(#9c47fc, #356ad2)"}} />

渐变字体真棒IN REACT

2 个答案: