FontAwesome instagram icon - colorized

2020-07-06 05:10发布

站内问答 / HTML/CSS
880 3 4

Any one know how to show the FontAwesome icon for Instagram and style it to be shown with the new Instagram icon multi colors? New instagram icon

3条回答
Fickle 薄情
2楼-- · 2020-07-06 06:05

i dont think you will get the exact color sheme but this fiddle 

    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;

found here might help

查看更多
0人赞 添加讨论(0) 举报
乱世女痞
3楼-- · 2020-07-06 06:10 
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%);    
}

Adding a CSS class like this works for me.

查看更多
0人赞 添加讨论(0) 举报
▲ chillily
4楼-- · 2020-07-06 06:14

I was trying to do the same. I found this is solution after several attempt.

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

查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(4)