安利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、一旦在项目中添加了新的图标，就要重新生成代码，所以最好定稿之后再生成代码下载到本地哦

制作自己的小图标：

https://segmentfault.com/a/1190000014800339