基础环境
1.使用的矢量图标库：http://www.iconfont.cn/
2.需要账号登陆 ，名下会有对应的工程项目组
3.对接设计师和所在工程的矢量图标交接
如何使用
1.设计师会把做好的矢量图标上传到名下的工程里，前端开发需要选中需要的图标
2. 选中的矢量图标，需要手动添加到对应的工程项目中
3.完成添加
使用格式
1.svg
选择SVG的时候，需要先切换格式：Symbol
使用文件是JS文件，在head的文件中：script(src="//at.alicdn.com/t/font_188309_1w33yowbqzhhncdi.js")
矢量图标下方会出现对应的ID，利用的时候需要利用ID
代码中使用，需要利用：use(xlink:href="#icons-shengri1")，将JS文件中的对应图标画出来
2.unicode
选择unicode的时候，需要先切换格式：unicode
使用的是CSS：
@font-face {
font-family: 'iconfont'; /* project id 188309 */
src: url('//at.alicdn.com/t/font_188309_1w33yowbqzhhncdi.eot');
src: url('//at.alicdn.com/t/font_188309_1w33yowbqzhhncdi.eot?#iefix') format('embedded-opentype'),
url('//at.alicdn.com/t/font_188309_1w33yowbqzhhncdi.woff') format('woff'),
url('//at.alicdn.com/t/font_188309_1w33yowbqzhhncdi.ttf') format('truetype'),
url('//at.alicdn.com/t/font_188309_1w33yowbqzhhncdi.svg#iconfont') format('svg');
}
对iconfont需要定义基础的样式：
.iconfont{
font-family:"iconfont"!important;
font-size:16px;
font-style:normal;
-webkit-font-smoothing:antialiased;
-webkit-text-stroke-width:0.2px;//线条加粗
-moz-osx-font-smoothing:grayscale;
}
矢量图标下方会出现对应的unicode，引入CSS和HTML中是不同长度的值：
html：
CSS：.icon-paixu:before{content:"\e603"; }
对于unicode用法中：
使用css伪元素和插入Html两种方式中，优选插入Html
原因：
伪元素在使用中的步骤，是先找到伪类的父元素，然后再里面生成伪元素，引入iconfont的相关信息。
而当css文件不生效或是错误时，页面不会出现图标的错误占位，没有提示
