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