在React中使用渐变的Font Awesome图标。

Question

通常情况下，将渐变色添加到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没有任何效果。

有什么想法吗？

提前感谢。

- sir-haver

---

只保留 linear-gradient()，移除 webit。 - Temani Afif

嘿，特尔马尼，我试过了，不起作用。 - sir-haver

我是说你不再需要使用带有渐变的webkit，你可以使用上面那个，并且你应该会得到同样的结果（无论它是否有效）。 - Temani Afif

Answer 1

我不确定这是否与React的Font Awesome npm有关，但无论如何，解决方法就是按照旧方式操作： 1. 在index.html中添加CDN链接 2. 使用正常的HTML语法：

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

如果有人知道如何在React的npm包中应用它，我会非常感激。

谢谢。

- sir-haver

Answer 2

这对我有用

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

（不使用 !important）

或者使用普通的“linear-gradient”

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

- Paul P M