How do I color an icon with degrade, I want to color only the image and not its background, thanks

Asked

Viewed 47 times

-1


<!-- language: lang-html -->

    <div class="social-icons">

                <a href="#" class="btn-face">
          <i class="fa fa-facebook fa-lg"></i>
          </a>

                <a href="#" class="btn-insta">
          <i class="fa fa-instagram fa-lg"></i>
          </a>

                <a href="#" class="btn-whats">
          <i class="fa fa-whatsapp fa-lg"></i>
          </a>

    </div>

<!-- language: lang-css -->

    .social-icons{
        float: right;
    }

    .social-icons a{
        color: #fff;
        margin-left: 12px;
    }

    .btn-face:hover{
        color: blue;
    }

    .btn-insta:hover{
        color: red;
    }

    .btn-whats:hover{
        color: green;
    }

<!-- end snippet -->
html css3 icons

1 answer

0


I managed to make the gradient with this code:

.fa {
  color: #9c47fc;
  margin-left: 12px;
  background: -webkit-linear-gradient(#9c47fc, #356ad2);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

Now just put the colors you want.

  • It worked, I just had to change a few things: 1°put the settings directly in the icon pq o: -Webkit-text-Fill-color: Transparent; was making the top of the icon disappear. 2°I took the margin was pushing the icons, so it stayed the way q

  • .btn-insta:hover{&#xA; color: red;&#xA; background: -webkit-linear-gradient(45deg, #f7ce02, #f96302, #f71102, #d32155, #b43890, #904eca, #8944bb, #7832ae);&#xA; -webkit-background-clip: text;&#xA; -webkit-text-fill-color: transparent;&#xA;}

Browser other questions tagged html css3 icons

You are not signed in. Login or sign up in order to post.