Question

类似于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>

Answer 1

我从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>

Answer 2

带有动画

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>

如何在“真棒字体”图标上使用渐变？

2 个答案:

带有动画