提醒：本文最后更新于 2026-05-24 05:33，文中所关联的信息可能已发生改变，请知悉！
iconfont 使用教程是介绍一些 iconfont 的功能和使用方法，教导使用者，帮助使用者对 iconfont 更加熟悉和操作。
编辑
一、简介
iconfont 是阿里妈妈 MUX 倾力打造的矢量图标管理、交流平台。设计师将图标上传到 Iconfont 平台，用户可以自定义下载多种格式的 icon，平台也可将图标转换为字体，便于前端工程师自由调整与调用。
iconfont 网站：http://www.iconfont.cn/
二、功能介绍
1、支持关键词模糊搜索，可以搜图标搜用户，中文 / English / Ping yin 无缝互译
2、下载详情页：可查阅 icon 归属图标库与作者，多色图标支持分路径改色，下载图标自动保存最近使用的颜色
3、购物车：将图标加入购物车后，可以批量下载素材和代码、批量添加至项目
4、支持单个或批量上传多个 icon、支持单色 / 多色 icon 同时上传、支持图标自定义配置标签
5、图标库是一系列相关图标的集合，由图标上传者创建，需通过审核才可公开 / 加密访问 图标库分为官方图标库 / 自定义图标库 / 多色图标库
6、“项目”是帮助团队协同合作的共享模块，创建项目后，视觉同学上传 icon，交互 / 产品同学可以⾃自由下载图标，前端同学可以将图标以字体格式添加至代码，支持三种格式代码使用。
7、支持原创图标，尊重设计成果，在“用户”与“图标库”维度支持打赏。
三、iconfont 使用教程
1、进入阿里巴巴矢量图标库官网：http://www.iconfont.cn/，然后注册登录，或者用 github 登录；
2、找到图标管理 -> 我的项目 -> 然后新建项目：右边点击新建项目，用于保存自己常用的图标；
3、项目新建完成后，往项目里添加我们要想使用的图标，找到图标库，搜索一个想要的图标，然后添加到购物车；
4、添加到购物车完成后，购物车徽章数字应该显示 1 了，点击右上角的购物车图标，选择添加至项目，选择我们刚刚创建的项目，确定；
5、将打包好的字体文件下载到本地添加到你的项目中，在项目中引用文件中的 iconfont.css 文件；
6、创建一个 i 标签或者 span 标签, 添加两个类名，一个固定的是 iconfont，另一个是你想要的那个图标对应的类名。
建议： 可进入 iconfont 官网，阅读相关文章以及查看“帮助”了解更多相关的知识，方便操作使用。
