最近接个小活，需要用到一些特殊图标，网上找的都不太满意，干脆自己动手做！今天就来分享一下我制作 iconfont 图标的整个过程。

准备工作

我得搞清楚自己到底需要啥样的图标。我，就先在纸上简单画几个草图，大概确定图标的样式和内容。因为这回需要的图标比较简单，我就直接用Illustrator（AI）来画，如果是比较复杂的图形，也建议先在AI里搞定。

绘制图标

打开AI，新建一个画布，尺寸啥的不用太在意，反正后面可以调整。然后，我就照着草图，用钢笔工具把图标一个个勾勒出来。这里有个小技巧，尽量使用简单的形状，线条粗细要统一，这样出来的图标才更协调。

画完之后，记得把所有图形都转成轮廓（对象-路径-轮廓化描边），然后把它们保存成一个个单独的SVG文件。这一步很重要，因为后面我们要用到这些SVG文件。

上传图标

我就打开浏览器，输入 这个网址，也就是阿里巴巴矢量图标库。这网站挺好用的，图标资源很丰富，而且还能自己上传图标。

登录之后（可以用微博账号直接登录，挺方便），我在网站上找一圈，发现没有完全符合我要求的图标，于是我就决定自己上传。

在网站首页或者“我的项目”里，一般都有上传图标的入口，点进去，把我刚才保存的那些SVG文件一个个传上去就行。上传的时候，网站会自动识别图标的名称，不过你也可以自己修改。

编辑图标

图标上传成功后，可以在“我的图标”里找到它们。然后，我点开每一个图标，进入编辑页面。这里可以给图标添加标签（Tags），方便以后搜索；还可以修改图标的名称，这个名称就是以后在代码里引用图标时要用到的，所以我通常会起一个简单易懂的名字，比如 “home”、“user” 之类的。

编辑好之后，记得保存。

下载使用

图标都编辑好，就可以把它们下载下来使用。在“我的项目”里，选择“下载至本地”，然后选择你需要的格式，一般选“Font Class”或者“Symbol”就行。下载下来的是一个压缩包，解压后里面会有几个文件，包括字体文件、CSS文件、示例HTML文件等。

具体怎么使用，就要看你项目的具体情况。一般来说，引入CSS文件，然后在HTML里用相应的class或者symbol引用图标就行。示例HTML文件里有详细的使用说明，照着做就行。

以上就是我制作iconfont图标的全部过程，是不是很简单？只要掌握方法，制作图标并不是什么难事。大家如果也有类似的需求，不妨自己动手试试！