iconfont的使用

基础环境

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文件中的对应图标画出来

需要先切换格式：Symbol icons-shengri1是需要利用的ID 代码利用

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文件不生效或是错误时，页面不会出现图标的错误占位，没有提示