如何使用iconfont打造自己的图标库

一、什么是iconfont阿里巴巴矢量图标库

http://www.iconfont.cn/

iconfont-国内功能很强大且图标内容很丰富的矢量图标库，提供矢量图标下载、在线存储、格式转换等功能，由阿里巴巴体验团队倾力打造，是设计和前端开发的便捷工具，也是国内首家推广Webfont形式图标的平台，支持全文检索功能，可以根据自己的业务查找到符合国内网站的标准图标。

二、登录到iconfont

iconfont提供两种登录方式，但我们能用的只有一种，就是新浪登录，所有大家在使用前必须要有新浪账号，具体怎么注册新浪账号我这就不详述了。

点击右上角 “登录”按钮，弹出下面登录方式，选择“新浪账号”，会跳转到“新浪微博”登录窗口，

登录成功后，显示下面图片

三、在线选择自己需要的图标

iconfont提供的丰富的线上图标库，点击左边“图标库”或点击“图标库”下拉的“官方公开库”或“所有公开库”。

展现到你眼前的就是丰富的线上图标库，在这里你可以尽情的来查找自己喜欢的图标。

看到自己喜欢的图标组或在右上角搜索框内输入要搜索的关键字，点击进去或点击搜索；然后找到自己想要的图标，点击图标一下，“咻”你就看到一个图标飞到右上角的方块内，不要小看这个方块，它一会就会成为属于你自己的图标库。

图标选择完成后，点击右上角小方块（你选择的图标个数），弹出窗口，选择“存储为项目”，如果你想将这两个图标添加到自己已经有的图标库内，就选择“存储为历史项目”找到自己有的图标库；如果你是想添加新的图标库，就选择“存储为新项目”，这里我想添加新的图标库，于是选择“存储为新项目”。

输入图标库的名字，我这输入“test”，点击“存储”，就会跳转到自己的“图标管理”菜单

在“图标管理”里面，你可以看到自己的图标库，左边项目列表中有我们刚才添加的“test”图标库，右边是我们刚才选择的两个小图标。

到这里属于自己的图标库算是创建完成了

四、制作自己的小图标的SVG格式

通常每个公司都会有属于自己的一套图标库，那我们高大尚的设计师做的小图标要怎么上传到iconfont呢？下面我们就来说一下，本地如何上传自己的小图标。

因为iconfont要求上传的图标为.svg格式，所以我们要把矢量图标转换成svg文件。这里我用AI打开小图标文件，点击“文件”下拉里面的“另存为”，弹出窗口选择格式“SVG(svg)”后点“存储”，弹出确认窗口点击“确认”，就会看到“xxx.svg”的文件。

这样小图标制作完成，下面开始上传小图标到iconfont。

五、本地上传自己的小图标

登录账号后，点击右上角的上传到云的小图标，出现下面界面

把我们刚才制作的小图标拖拉到空白地方或点击“点此上传”选择要上传的小图标，然后出现下面界面

点击“完成上传”按钮，页面会跳转到“我上传的图标”页面

下面的操作相信大家应该轻车熟路了，点击自己上传的小图标，“咻”你又就看到一个图标飞到右上角的方块内，这些我们选择“存储为历史项目”列表里面的“test”项目

点击“存储”按钮跳转到“图标管理”的页面，左边默认选中“test”项目，右边显示出刚才我们添加的新图标

这样自己制作小图标上传到 iconfont 的方法相信大家也已经很熟悉了。

六、添加项目团队成员

点击“图标管理”下拉的“图标应用项目”，左边选择要添加成员的项目，点击“编辑项目”

弹出窗口，在“协作成功”里面“输入用户名”地方输入成员的用户名（用新浪账号登录iconfont后的用户名，并不是新浪的用户名），点击“保存修改”就可以了

七、小图标应用教程

这块内容iconfont有详细教程，这里我就不重复整理了，大家参照下面链接就可以了

http://www.iconfont.cn/help/iconuse.html

八、总结

也不知道自己写的有没有太啰嗦，就是怕大家看不太懂。如果对大家就帮忙，麻烦大家点个赞或收藏一下，谢谢大家支持。