拿到设计师给的.svg格式图标兴冲冲地上传到iconfont,发现上传的图标是空白的。用编辑器打开发现里面没有<path>
,因而本身动手将psd里的图标作成svg上传到iconfont作成图标。按照iconfont的教程没作好,多是我不会用AI的缘故。在网上找啊找,这里作下笔记。
参考的网址:
http://tgideas.qq.com/webplat...
http://www.cnblogs.com/binmen...html
正方形
,裁剪的时候图标周围记得留必定空白
,能够本身衡量以后鼠标移到图标右下角,按住shift将其等比拉伸铺满画布web
然而这时候上传到iconfont图标仍是空白的,可能格式不符合的缘故吧浏览器
<path></path>
代码,这就是要用来替换的路径用编辑器打开刚刚用AI保存的svg格式图标,将其中的<path></path>
复制,替换掉上面从iconfont下载的svg的path
;或者用工具过滤,只留路径,而后复制替换编辑器
注意代码里的viewBox
要和用AI保存的一致,打开保存的svg看看就知道了ide
保存的图标的viewBox是0 0 64 64
,那么就把viewBox改为和它同样的,不然更改好的svg放到浏览器一看,图标没了。。。svg
更改好之后保存放到浏览器看看,图标能显示工具