Javascript 如何在不影响可见性的情况下为instagram徽标添加颜色渐变？

我希望在不影响Instagram徽标可见性的情况下为Instagram徽标添加颜色渐变

HTML

我正在创建一个网站，其中社交媒体图标在悬停状态下响应，徽标上有一个图标。

使用径向渐变和背景剪辑

学分

.包装纸{ 证明内容：中心； 对齐项目：居中； } .包装纸i{ 填充：10px； 文本阴影：0px 6px 8px rgba0,0,0,0.6； 过渡：全部缓进缓出150ms； } .a:n-child1{ 颜色：3b5998 } .a:n-child2{ 颜色：1DA1F2； } .a:n-child3{ 颜色：黑色； } .i:悬停{ 利润上限：-3px； 文本阴影：0px 14px 10px rgba0,0,0,0.4； } .fa instagram{ 颜色：透明； 背景：-webkit-radial-gradient30%107%，圆形，fdf497 0%，fdf497 5%，fd5949 45%，d6249f 60%，285AEB 90%； 背景：-o形径向梯度30%107%，圆形，fdf497 0%，fdf497 5%，fd5949 45%，d6249f 60%，285AEB 90%； 背景：30%107%、fdf497 0%、fdf497 5%、fd5949 45%、d6249f 60%、285AEB 90%的径向梯度圆； 背景：-webkit径向梯度圆为30%107%，fdf497 0%，fdf497 5%，fd5949 45%，d6249f 60%，285AEB 90%； 背景剪辑：文本； -webkit背景剪辑：文本； } 你能试试这个吗？

<div class="wrapper">
      <a href="http://www.facebook.com"><i class="fa fa-3x fa-facebook-square"></i></a>
      <a href="http://www.twitter.com"><i class="fa fa-3x fa-twitter-square"></i></a>
      <a href="http://www.instagram.com"><i class="fa fa-3x fa-instagram instagram"></i></a>
</div>

.wrapper {
  justify-content: center;
  align-items: center;
}
.wrapper i {
  padding: 10px;
  text-shadow: 0px 6px 8px rgba(0, 0, 0, 0.6);
  transition: all ease-in-out 150ms;
}
.wrapper a:nth-child(1) {
  color: #3b5998
}
.wrapper a:nth-child(2) {
  color: #1DA1F2;
}
.wrapper a:nth-child(3) {
  color: black;
}
.wrapper i:hover {
  margin-top: -3px;
  text-shadow: 0px 14px 10px rgba(0, 0, 0, 0.4);
}