How do I use gradients with Font Awesome icons?

Question

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>

This question is *not* a duplicate. The linked question does not address font awesome icons. Please *read* the question before marking as duplicate. — dx_over_dt, Jul 06 '19 at 19:39
I added 3 duplicates and I can still add more. I added the canonical one and the ones related to fontawesome (and I always read question before closing) — Temani Afif, Jul 06 '19 at 19:40
The second and third are not the same as this one. I'm reading the first one now. — dx_over_dt, Jul 06 '19 at 19:41
Yeah, the first one is the answer. Weird that it didn't appear in a google search when I looked. — dx_over_dt, Jul 06 '19 at 19:42
also note that font awesome 4 is a *Font* so applying gradient to icon is the same as applying gradient to text, there is no difference that's why the canonical one also apply — Temani Afif, Jul 06 '19 at 19:42

Hossein Shourabi · Answer 1 · 2019-07-06T19:18:32.997

7

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>

edited Jul 06 '19 at 19:18

answered Jul 06 '19 at 19:16

Hossein Shourabi

426
4
15

Oooh that's pretty – dx_over_dt Jul 06 '19 at 19:17
Could this be done so the same animated background occurs across multiple icons? – Larm Mar 26 '20 at 15:33
I've opened a new question as I realise it moves past the scope of this one: https://stackoverflow.com/q/60871748 – Larm Mar 26 '20 at 16:27
Yes, you can make a class like ".f-animate" and put the CSS codes then add to your icons classes or add your class icon after in i.fab with a comma. @Larm – Hossein Shourabi Jun 05 '20 at 11:10
That is gorgeous. – David Bond Jun 23 '23 at 08:44

dx_over_dt · Accepted Answer · 2019-07-06T18:56:39.507

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>

You have a reference to `:before:after` being a valid selector ? — Rainbow, Jul 06 '19 at 18:21
Not an official one. I just tried it in Firefox, Chrome, and Edge, and the code worked. /shrug — dx_over_dt, Jul 06 '19 at 18:22
Did you remove it and see if it worked ? because i did and nothing changed — Rainbow, Jul 06 '19 at 18:23
Ah, when I was writing this, I tried editing `:before`'s style and it shifted it a bit, so I added the `:before:after` and messed with the positioning. It didn't occur to me that the `:before` was doing what I needed it to. Thanks! I'll edit the answer. — dx_over_dt, Jul 06 '19 at 18:25

How do I use gradients with Font Awesome icons?

2 Answers2

With animate

Linked