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!
This is absolutely perfect for my website. Thanks.