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

Question

我现在已经在网上抓取了大约 2 个小时，试图找到解决方案。所以我很抱歉，我的起始代码并没有太大帮助。

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

事实上，我目前甚至无法复制：使用 Font Awesome 5 和讨厌的 SVG。

这是我目前所在的位置：

body{
  font-size:150px;
}
svg {
background: -webkit-linear-gradient(225deg, rgb(251, 175, 21), rgb(251, 21, 242),             
rgb(21, 198, 251)) 0% 0% / 300% 300%;
-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%}
}

<script src="https://use.fontawesome.com/releases/v5.0.1/js/all.js"></script>
<i class="fab fa-stack-overflow"></i>
<i class="fab fa-instagram"></i>
<i class="fab fa-facebook-f"></i>

即使上面的剪辑有效，它仍然不是正确的效果。我想要一个单一的背景（我的意思是它的定位）出现在所有 3 个图标上，而不是每次都重置位置的 3 个渐变。这是我正在努力实现的 all（动画只是一个奖励）：

Answer 1

给你一个解决方案

body{
  font-size:150px;
}

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>
<i class="fab fa-instagram"></i>
<i class="fab fa-facebook-f"></i>

你在找这个吗？

Answer 2

那么在您使用的版本中，您会发现图标显示为svg并且background-clip效果将不起作用。

您可以使用旧版本，其中元素在伪元素 (:before) 中呈现为 content，并为 i 标签设置一个父级以获得单个渐变图标：

body {
  font-size: 150px;
}

#parent {
  display: inline;
  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;
}

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

@-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" />
<div id="parent">
  <i class="fab fa-stack-overflow"></i>
  <i class="fab fa-instagram"></i>
  <i class="fab fa-facebook-f"></i>
</div>

Answer 3

不要使用 SVG 版本并使用 CSS 版本然后考虑 background-position 移动每个图标的背景以创建一个连续的图标：

body {
  font-size: 100px;
}

i {
  float:left;
  background: 
     linear-gradient(225deg, rgb(251, 175, 21), rgb(251, 21, 242), rgb(21, 198, 251)) 
     0 0 / 3em 100%;
  -webkit-background-clip:text;
  background-clip:text;
  width:1em;
  text-align:center;
  -webkit-text-fill-color: transparent;
  animation: fontgradient 2s ease infinite;
}
.fa-instagram {
  background-position:-1em 0;
}
.fa-facebook-f {
  background-position:-2em 0;
}

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.12.0/css/all.css">
<i class="fab fa-stack-overflow"></i>
<i class="fab fa-instagram"></i>
<i class="fab fa-facebook-f"></i>

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

Multiple font-awesome icons sharing a background gradient

html

css

linear-gradients

font-awesome

font-awesome-5