自制iconfont阿里巴巴矢量图标

avatar
avatar
大熊
72
文章
515
评论
2020年2月6日 14 1,557 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:

评论列表 评论:14   「访客  8   男主  6   女主  0」  
    • avatar 文武 谷歌浏览器 Windows 10 回复

      本来也想制止的,搜索了一下,把你的搜出来了,就直接用你的了 懒。。。 :grin:

      • avatar 叶先生博客 谷歌浏览器 Windows 7 回复

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

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

          这个好,马上试试!

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

            这个教程很实用