FontAwesome Instagram 图标 - 着色版

Question

FontAwesome Instagram 图标 - 着色版

cssfont-awesome

18

有人知道如何显示Instagram的FontAwesome图标，并将其样式设置为与新的Instagram多色图标一起显示吗？新的Instagram图标

- ds00424

请不要使用您链接的图像，而是使用其它方式。 - Carol McKay

真的吗？给那个问题一个负一分？显然从其他答案来看，这似乎是可能的（尽管可能有些困难）。 - ds00424

使用 CSS 重新创建图片当你可以使用图片本身 = 耗费时间且毫无意义，但无论如何都行。 - Carol McKay

3个回答

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%);    
}

像这样添加CSS类对我非常有效。

- Dhiraj S.

-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;

发现这里可能会有所帮助

- ahe

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Nuwan Alawatta · Accepted Answer

我也试图做同样的事情，尝试了几次后找到了这个解决方案。

.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;
}

<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>