Add gradient background to a duotone fontawesome icon

Question

I'm using the spinner-third duotone icon with vue.

<font-awesome-icon :icon="['fad', 'spinner-third']"  />

And I have to add a linear gradient to one of the paths, to the fa-primary.

I tried several things with fill, background and --fa-primary-color but everytime I add the linear-gradient its doesn't apply the gradient, it just stays black. Can someone help me please ?

Answer 1

Actually, Font Awesome behaves like ... a font ! It doesn't behave like an element on which you could apply a background. So to apply a linear-gradient on a font, you should use something like

.class {
    background: -webkit-linear-gradient(#eee, #333);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

This snippet applies a background color with your gradient color and makes your text transparent so that the color shows.

eg : https://cssgradient.io/blog/css-gradient-text/