Font Awesome Gradient in React

Question

我在react中添加字体awesome图标的渐变时遇到了问题。我看过其他类似的问题，我所拥有的似乎是匹配的，但是当我看开发工具，它说，样式正在应用，除了似乎有一个问题的透明度，因为如果我把它关闭，我看到背景中的梯度。

这是在typescript中完成的

const NavBar: React.FC<Props> = ({ darkTheme, setDarkTheme }: Props) => {
// TODO: Refactor so dark theme hooks are in this component
return (
<header className="primary-header">
<div className="logo">
<NavLink className={({ isActive }) => (isActive ? "active" : "")} to="/">
<FontAwesomeIcon icon={faHome} />
</NavLink>
</div>
</header>

我省略了大部分代码，但这是不能工作的部分。

.active,
.active > .fa-house {
/* Start Gradient Text */
background-color: var(--clr-grad-left);
background-image: linear-gradient(
90deg,
var(--clr-grad-left) var(--grad-left-per),
var(--clr-grad-right) 100%
);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
/* End Gradient Text */
}

这个css适用于普通文本，但我不知道为什么这对字体awesome图标不起作用。

Answer 1

你用的是什么版本的FontAwesome ?对于6.2.1,React代码应该是<FontAwesomeIcon icon="fa-solid fa-house" />

无论如何……

在下面的代码中，这一切似乎工作得很好。也许你的--grad-left-per值太高了?

而且，如果只有两种颜色，父元素可能太宽而无法显示渐变。

请关闭CSS中的background-image: var(--gradient)。

:root {
--gradient: linear-gradient(
90deg, 
aqua   , #00bcff, #007aff,
#0037ff, #0b00ff, #4e00ff,
#9000ff, #d300ff, #ff00e9,
#ff00a6, #ff0064, #ff0021,
#ff2100, #ff6400, #ffa600,
#ffe900, #d3ff00, #90ff00,
#4eff00, #0bff00, #00ff37,
#00ff7a, #00ffbc, aqua
);
--clr-grad-left : Crimson;
--grad-left-per : 0%;
--clr-grad-right: Blue;
}
.active { font-size: 4rem }
.active,
.active > .fa-house {
/* Start Gradient Text */
background-color: var(--clr-grad-left);
background-image: linear-gradient(
90deg,
var(--clr-grad-left) var(--grad-left-per),
var(--clr-grad-right) 100%
);
/* Works, enable to verify */
background-image: var(--gradient); /**/
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
/* End Gradient Text */
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css" rel="stylesheet"/>
<div class="active">
<div>some text</div>
<i class="active fa-solid fa-house"></i>
</div>

Answer 2

我对react一无所知，但也许这会对你有所帮助

文本的渐变如下:

.myclass.filler {
background-image: linear-gradient(72.44deg, #FF7A00 11.92%, #FF0169 51.56%, #D300C5 85.69%);
}
.filler {
-webkit-background-clip: text;
background-repeat: no-repeat;
color: transparent;
display: inline;
}
<div class="myclass filler"></div>

而FA图标的渐变是这样的:

i.fa-thin.fa-check.fa-fw {
background: -webkit-linear-gradient(32deg,#ff0000 20%,#4b8f94 50%,#ff981f 80%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
<i class="fa-thin fa-check fa-fw"></i>

希望有帮助

Answer 3

我认为，因为一个font-awesome图标在渲染时没有文本，那么它就不支持背景属性，如background-color或background-image。

你可以使用color代替background-color或background-image，看看这是否解决了你的问题。

.active > .fa-house {
/* Start Gradient Text */
color: linear-gradient(
90deg,
var(--clr-grad-left) var(--grad-left-per),
var(--clr-grad-right) 100%
);
/* End Gradient Text */
}