自制iconfont阿里巴巴矢量图标

2020年2月6日 12 936 372字阅读1分14秒

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

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

自制iconfont阿里巴巴矢量图标

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

自制iconfont阿里巴巴矢量图标

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

自制iconfont阿里巴巴矢量图标

上传后转换得到svg文件。

自制iconfont阿里巴巴矢量图标

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

自制iconfont阿里巴巴矢量图标

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

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

自制iconfont阿里巴巴矢量图标

网络最后更新:2020年2月8日
avatar
匿名

发表评论

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

评论列表 评论:12   「访客  7   男主  5   女主  0」  
    • avatar 叶先生博客 谷歌浏览器 Windows 7 回复

      看来这PS技术可以啊 :mrgreen:

      • avatar 锋言锋语 谷歌浏览器 Windows 10 回复

        这个好,马上试试!

        • avatar 流金岁月 谷歌浏览器 Windows 10 回复

          这个教程很实用