Beantown Design Beantown Design
  • WordPress Tips
  • Coding
  • Design
  • WordPress Tips
  • Coding
  • Design

Add a CSS Gradient to Font Awesome Icons

November 30, 2016

css gradient font awesome icon

gradient icons css

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!

gradient icons css

Posted in: Coding Tagged: CSS, font, Font Awesome Author: Beantown Design

Tagged: CSS • font • Font Awesome

1 Comment

  1. UpDoz
    December 11, 2016 at 5:13 am / Reply

    This is absolutely perfect for my website. Thanks.

Leave a Reply / Cancel Reply

Related Posts

  • Back to Blog
  • Prev
  • Next

Beantown Design | Custom Websites
292 Newbury Street #204 Boston, MA

© 2018 Beantown Design