Html 共享背景渐变的多个字体图标

我已经在网上爬行了大约2个小时，试图找到一个解决方案。所以我道歉，我的起始代码没有太大帮助

我尝试过使用背景剪辑、multiple.js、fill，但无法获得我想要的效果

事实上，我现在甚至无法复制：使用字体Awome5和讨厌的SVG

以下是我目前所在的位置：

正文{
字体大小：150px；
}
svg{
背景：-webkit线性梯度（225度，rgb（251，175，21），rgb（251，21，242），
rgb（21198251））0%0%/300%300%；
-webkit文本填充颜色：透明；
动画：2s ease 0s无限正常无渐变；
-webkit动画：无限轻松；
-moz动画：无限轻松；
动画：无限轻松；
}
@-webkit关键帧和渐变{
0%{背景位置：0%92%}
50%{背景位置：100%9%}
100%{背景位置：0%92%}
}
@-moz关键帧和渐变{
0%{背景位置：0%92%}
50%{背景位置：100%9%}
100%{背景位置：0%92%}
}
@关键帧{
0%{背景位置：0%92%}
50%{背景位置：100%9%}
100%{背景位置：0%92%}
}

---

给你一个解决方案

正文{
字体大小：150px；
}
i、 晶圆厂{
字体大小：5rem；
字体风格：普通；
字体系列：Fontsome；
背景：-webkit线性梯度（225度，rgb（251，175，21），rgb（251，21，242），
rgb（21198251））0%0%/300%300%；
-webkit背景剪辑：文本；
-webkit文本填充颜色：透明；
动画：2s ease 0s无限正常无渐变；
-webkit动画：无限轻松；
-moz动画：无限轻松；
动画：无限轻松；
}
@-webkit关键帧和渐变{
0%{背景位置：0%92%}
50%{背景位置：100%9%}
100%{背景位置：0%92%}
}
@-moz关键帧和渐变{
0%{背景位置：0%92%}
50%{背景位置：100%9%}
100%{背景位置：0%92%}
}
@关键帧{
0%{背景位置：0%92%}
50%{背景位置：100%9%}
100%{背景位置：0%92%}
}

---

对于您正在使用的版本，您会发现图标显示为

svg

，而

背景剪辑

效果将不起作用

您可以使用旧版本，其中元素在伪元素中呈现为

内容

（

：before

），并为

i

标记设置父级，以在图标上获得单个渐变：

正文{
字体大小：150px；
}
#母公司{
显示：内联；
背景：webkit线性梯度（225deg，rgb（251,175,21），rgb（251,21242），rgb（21198251））0%0%/300%300%；
-webkit背景剪辑：文本；
-webkit文本填充颜色：透明；
动画：2s ease 0s无限正常无渐变；
}
i{
字体大小：5rem；
字体风格：普通；
字体系列：Fontsome；
}
@-webkit关键帧和渐变{
0% {
背景位置：0%92%
}
50% {
背景职位：100%9%
}
100% {
背景位置：0%92%
}
}
@-moz关键帧和渐变{
0% {
背景位置：0%92%
}
50% {
背景职位：100%9%
}
100% {
背景位置：0%92%
}
}
@关键帧渐变{
0% {
背景位置：0%92%
}
50% {
背景职位：100%9%
}
100% {
背景位置：0%92%
}
}

< /代码> 不要使用SVG版本，使用CSS一个，然后考虑<代码>后台位置来转换每个图标的背景以创建连续的一个：


正文{
字体大小：100px；
}
我{
浮动：左；
背景：
线性梯度（225度，rgb（251，175，21），rgb（251，21，242），rgb（21198251））
0/3em 100%；
-webkit背景剪辑：文本；
背景剪辑：文本；
宽度：1米；
文本对齐：居中；
-webkit文本填充颜色：透明；
动画：无限轻松；
}
.fa instagram{
背景位置：-1米0；
}
.fa-facebook-f{
背景位置：-2米0；
}

这个答案与OP在问题中链接的答案有什么不同吗？@AnuragSrivastava，他们已经将字体从SVG版本改为字体版本。但是仍然不是我想要的。一个背景覆盖了所有的图标。对吗？这是正确的@ZohirSalakThanks对这个Temani！是否有可能达到与5.12版Anurag类似的效果？当我试图将其包装在div中时，我没有成功。我倾向于他们的答案，纯粹是因为这将允许无限的图标-当你的解决方案依赖于他们唯一的3，这可以用5.13完成吗？当我尝试切换样式表时，图标消失了（即使它们仍然显示为一个，而不是@Larm）。尝试将那些
的显示更改为InlineHanks Zohir！效果很好-我最初尝试过，但没有意识到css正在将其更改回InlineBlock