How do I use gradients with Font Awesome icons? [duplicate]

问题

This question already has answers here:

Text gradient with font awesome (2 answers)

Gradient text color (8 answers)

Gradient over Instagram SVG of FontAwesome 5 (2 answers)

Closed 11 months ago.

Similar to gradient text in css with text shadow, I want to use Font Awesome icons with gradients.

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>

回答1:

With animate

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:

I stole my answer from the same question in the OP, and then tweaked it.

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>

Fortunately since fa-*:before already has content set, we don't need to duplicate it from the font-awesome.css file. In fact, if you want to use gradients on multiple icons, you can make a couple helper classes.

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>

来源：https://stackoverflow.com/questions/56916493/how-do-i-use-gradients-with-font-awesome-icons

标签

html

css

font-awesome