如何使用带有 Font Awesome 图标的渐变？ [复制]答案

【问题标题】：How do I use gradients with Font Awesome icons? [duplicate]如何使用带有 Font Awesome 图标的渐变？ [复制]
【发布时间】：2019-11-16 21:08:42
【问题描述】：

类似于gradient text in css with text shadow，我想使用带有渐变的 Font Awesome 图标。

i.fab {
  font-size: 5rem;
  font-style: normal;
  font-family: fontawesome;
}

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<i class="fab fa-stack-overflow"></i>

【问题讨论】：

这个问题不是重复的。链接的问题没有解决字体真棒图标。请在标记为重复之前阅读问题。
我添加了 3 个副本，我仍然可以添加更多。我添加了规范的和与 fontawesome 相关的（我总是在关闭之前阅读问题）
第二个和第三个和这个不一样。我现在正在读第一个。
是的，第一个就是答案。奇怪的是，当我查看时它没有出现在谷歌搜索中。
还要注意 font awesome 4 是一个 Font 所以对图标应用渐变与对文本应用渐变是一样的，没有区别，这就是为什么规范的也适用的原因

标签： html css font-awesome

【解决方案1】：

带动画

i.fab {
font-size: 5rem;
font-style: normal;
font-family: fontawesome;
background: -webkit-linear-gradient(225deg, rgb(251, 175, 21), rgb(251, 21, 242),             
rgb(21, 198, 251)) 0% 0% / 300% 300%;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
animation: 2s ease 0s infinite normal none running fontgradient;
-webkit-animation: fontgradient 2s ease infinite;
-moz-animation: fontgradient 2s ease infinite;
animation: fontgradient 2s ease infinite;  
}
@-webkit-keyframes fontgradient {
0%{background-position:0% 92%}
50%{background-position:100% 9%}
100%{background-position:0% 92%}
}
@-moz-keyframes fontgradient {
0%{background-position:0% 92%}
50%{background-position:100% 9%}
100%{background-position:0% 92%}
}
@keyframes fontgradient { 
0%{background-position:0% 92%}
50%{background-position:100% 9%}
100%{background-position:0% 92%}
}  
}

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<i class="fab fa-stack-overflow"></i>

【讨论】：

哦，真漂亮
可以这样做，以便在多个图标上出现相同的动画背景吗？
我已经提出了一个新问题，因为我意识到它超出了这个问题的范围：stackoverflow.com/q/60871748
是的，你可以创建一个像“.f-animate”这样的类，然后把 CSS 代码添加到你的图标类中，或者在 i.fab 中用逗号添加你的类图标。 @Larm

【解决方案2】：

我从 OP 中的同一个问题中窃取了我的答案，然后对其进行了调整。

i.fab {
  font-size: 5rem;
  font-style: normal;
  font-family: fontawesome;
}

.fa-stack-overflow:before {
  color: transparent;
  position: relative;
  background-clip: text;
  -webkit-background-clip: text;
  background-image: linear-gradient(#F48024 20%, black);
}

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<i class="fab fa-stack-overflow"></i>

幸运的是，由于fa-*:before 已经设置了content，我们不需要从 font-awesome.css 文件中复制它。事实上，如果你想在多个图标上使用渐变，你可以创建几个辅助类。

i.fab {
  font-size: 5rem;
  font-style: normal;
  font-family: fontawesome;
}

.fa-gradient:before {
  color: transparent;
  position: relative;
  background-clip: text;
  -webkit-background-clip: text;
}

.fa-stack-overflow:before {  
  background-image: linear-gradient(#F48024 20%, black);
}

.fa-font-awesome:before {
  background-image: linear-gradient(30deg, #2C2541, #a99ec7);
}

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<i class="fab fa-gradient fa-stack-overflow" title="Stack Overflow"></i>
<i class="fab fa-gradient fa-font-awesome" title="Font Awesome"></i>

【讨论】：

你有一个引用 :before:after 是一个有效的选择器？
不是官方的。我刚刚在 Firefox、Chrome 和 Edge 中进行了尝试，并且代码有效。 /耸肩
您删除它并查看它是否有效？因为我做到了，没有任何改变
啊，在写这篇文章的时候，我尝试编辑:before的样式，它改变了一点，所以我添加了:before:after并弄乱了定位。我没有想到 :before 正在做我需要它做的事情。谢谢！我会编辑答案。