安利Iconfont-阿里巴巴矢量图标库

官方下载地址:www.iconfont.cn

登录github

添加想要的图标至库

 

 

添加至项目 

 

 

 

找到下载到的代码压缩包，解压

 

demo的教程指导已经很详细了。

本着一切皆可盘的心态，我的设计小朋友邀请我探讨是否能实现那种渐变的少女心图标，那么，以下图效果为例 ，盘它，哈哈哈，不知不觉雪娃娃的大绿帽子就戴起来了

.icon_lists .icon {
  display: block;
  height: 100px;
  line-height: 100px;
  font-size: 42px;
  margin: 10px auto;
  color:#43C5EC;
  -webkit-transition: font-size 0.25s linear, width 0.25s linear;
  -moz-transition: font-size 0.25s linear, width 0.25s linear;
  transition: font-size 0.25s linear, width 0.25s linear;
 /*以下代码实现渐变*/
  background-image:-webkit-linear-gradient(10deg,#43C5EC,#2378FA,greenyellow); 
  -webkit-background-clip:text; 
  -webkit-text-fill-color:transparent; 
}

注意： 

1、附上渐变文字代码的n种实现方式：http://www.php.cn/css-tutorial-408797.html  基于css3

2、一旦在项目中添加了新的图标，就要重新生成代码，所以最好定稿之后再生成代码下载到本地哦

3、腊月二十八 整个办公楼剩我们自己上班。还不放假等过年呢吗？！ 工作使我快乐...