FontAwesome instagram图标 - 彩色

Question

FontAwesome instagram图标 - 彩色

任何人都知道如何显示Instagram的FontAwesome图标并将其样式设置为使用新的Instagram图标多色显示？新的instagram图标

Answer 1

我试图做同样的事情.经过多次尝试,我发现这是解决方案.

.fa.fa-instagram {
  color: transparent;
  background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
  background: -webkit-radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
  background-clip: text;
  -webkit-background-clip: text;
}

Run Code Online (Sandbox Code Playgroud)

<html>

<head>
  <link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet" />
</head>

<body>
  <i class="fa fa-instagram fa-5x"></i>
</body>

</html>

Run Code Online (Sandbox Code Playgroud)

Answer 2

小智 8

instagram {
    background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%); 
    background: -webkit-radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);    
}

Run Code Online (Sandbox Code Playgroud)

添加这样的 CSS 类对我有用。

Answer 3

ahe*_*ahe -1

我不认为你会得到确切的颜色方案但是这个小提琴

    background-image: -webkit-gradient( linear, left top, right top, color-stop(0, #f22), color-stop(0.15, #f2f), color-stop(0.3, #22f), color-stop(0.45, #2ff), color-stop(0.6, #2f2),color-stop(0.75, #2f2), color-stop(0.9, #ff2), color-stop(1, #f22) );  
    background-image: gradient( linear, left top, right top, color-stop(0, #f22), color-stop(0.15, #f2f), color-stop(0.3, #22f), color-stop(0.45, #2ff), color-stop(0.6, #2f2),color-stop(0.75, #2f2), color-stop(0.9, #ff2), color-stop(1, #f22) );
    color:transparent; 
   -webkit-background-clip: text;
   background-clip: text;

Run Code Online (Sandbox Code Playgroud)

在这里找到可能有帮助

归档时间：	9 年，4 月前
查看次数：	7975 次
最近记录：	6 年，9 月前