So I am currently using this solution which is allowing me to use gradients on my Font Awesome 5 icons: Solution 11925: for Font Awesome 5 Icon Gradients. But, when I use the method in this solution, it applies a gradient to all the Font Awesome 5 elements, cause it applies the SVG * fill CSS rule to all of them. I don't want to apply the rule to all of them. Is there a way to get it to only apply to some? Cause I'd like to use a separate gradient for a separate section?
Here is my CSS code:
svg * {
fill: url(#rg);
}
It is currently applying that rule to these font-awesome 5 icons, which is fine: .fa-html5,
.fa-css3-alt,
.fa-js,
.fa-camera-retro,
.fa-pencil-alt,
.fa-sass {
font-size: 4rem;
}
I'd like to apply a different gradient to these icons though:
.fa-calendar-alt,
.fa-newspaper,
.fa-paper-plane,
.fa-searchengin,
.fa-users,
.fa-newspaper,
.fa-paint-brush,
.fa-code,
.fa-object-ungroup {
font-size: 2rem;
}
