自制iconfont阿里巴巴矢量图标

疫情期间，在家自我隔离，闲来无事就跟博客耗上了。

在调整博客主题细节css时候，总发现像padding等在移动端会有偏移，比如回复评论的博主标志，改来改去索性想着弄成iconfont矢量图标直接引用得了，还不会偏移，说做就做喽，官方文档意思要用adobe illustrator编辑，用的不熟，还是PS搞起吧。

首先PS新建300*300透明背景，整个黑底长框，敲上“博主”二字，合并如下图，另存为png格式图片。

打开在线png转svg网站：点击直达       PS:找了好几个，就这站转换后正常，其他都是空白。

上传后转换得到svg文件。

打开iconfont，上传至我的项目，保存颜色并提交，就可以愉快的调用了！

另外，一些简单图标可以用在线工具直接制作svg文件，比如：SVG在线编辑器 有兴趣的可以去试试。

调用效果还不错,颜色随意调整，移动端也不偏移了。