画矢量图上传iconfont并使用

一、photoshop画矢量图

1.获取目标图形↑
2.分析该图形为一个圆并截掉一部分
3.先画一个圆，选择椭圆工具

4.复制另一个圆后，先control+T选中图形,再按住shit调整大小，作为内环。最后选中这两个图层，control+E把这两个圆进行合并

5.点击路径选择工具，选择内圈，减去顶层图形。

6.路径选择工具后，点击矩形工具，按alt可以减掉指定部分，按shift可以增加指定部分。
斜角部分处理：选择直接选择工具，点击移动的点，开始移动

再合并图层，合并形状组件

7.用椭圆工具画出内部的三个点，按住alt拖动第一个点到第二个点的位置，直接完成复制行为。合并图层。完成作品。

8.生成svg图片

二、图片上传至iconfont，并使用

1.打开https://www.iconfont.cn/，github登录，选在上传，去除颜色并提交
2.创建项目，上传图标至项目
3.下载至本地

4.文件放到需要用的项目内，把该文件里的css文件放到项目文件内的css文件里

把剩下的除了css,js，json，html文件放到新建的font文件里


5.打开项目，在css里找到iconfont.css文件，把里面的相关路径进行修改

6.使用，创建i标签,选择对应属性名

7.成功！