Add a CSS Gradient to Font Awesome Icons

If you use the popular Font Awesome icons you already know how to add a solid color to it with CSS. But what if you want to style it with a gradient instead? Luckily this is easy enough. Here is our HTML:

<i class="fa fa-facebook-square gradient-icon">
<i class="fa fa-linkedin-square gradient-icon">
<i i class="fa fa-twitter-square gradient-icon">

We add the extra CSS class “gradient-icon” to the default Font Awesome code. Then we style it like below:

.gradient-icon {
    background: -webkit-gradient(linear, left top, left bottom, from(#ff5db1), to(#ef017c));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    display: initial;
}

You will want to edit the 2 colors in the CSS code. All set!