做后台、官网或小程序时，页面上总少不了大量小图标。早期很多团队直接切 PNG 图，图片越来越多，尺寸对不齐，换个颜色又得找设计师重出一套。字体图标和矢量图标库就是为解决这类问题出现的。阿里云字体图标，即阿里巴巴矢量图标库（iconfont.cn），是国内用得最多的图标资源之一。这篇文章从实际使用的角度，讲清楚怎么选图、怎么引入、怎么落地。
什么是阿里云字体图标
这个平台由阿里巴巴设计团队维护，上面有大量设计师上传的图标，通用界面、电商、办公、数据可视化等场景都能找到。下载时可以选择字体文件、SVG 雪碧图或 JavaScript 文件，前端项目直接调用即可。注意一点：它和阿里云的云计算产品是两个独立的服务。但很多人搜资料时习惯输入“阿里云字体图标”，查找时把两者分开看，能少走弯路。
字体图标的好处和限制
字体图标轻，也好控制。和逐张引入 PNG 相比，主要有这几点：
- 一个字体文件能装几百个图标，请求数少，首屏加载会更快。
- 图标本质是文字，用 CSS 就能改颜色、大小和阴影，不必回头找设计出图。
- 高分辨率屏幕上依然清晰，不会出现锯齿或发虚。
- 统一管理，版本更新时替换一个文件即可。
它也有短板。传统字体只能单色显示，要做多色图标，就得走 SVG 方式。所以选型时先看页面需要什么样的图标，再决定用哪种方式。
在平台上找图标
搜索与筛选
进入平台后直接搜功能关键词，比如“订单”“设置”“下载”。结果可以按热门程度或上传时间排序。尽量挑风格一致的一套，线性和面性不要混着用。同一个页面里粗细不一致，看起来会很乱。选中的图标可以先加入购物车或收藏夹，集中整理后统一下载，比一个个点省事。
确认授权，统一风格
下载前先看图标的版权说明。平台上的图标大多可以用在项目里，但个别图标可能有额外限制。商用之前最好逐个确认，别等上线后才发现问题。如果需要微调，可以在平台上调整大小和对齐方式，再统一导出，省去后面逐个对位的麻烦。
两种常见引入方式
平台主要提供两种调用方式，各自适合的场景不同。
Font class 方式
这是最常用的一种。下载后把 iconfont.css 引入项目，再在元素上加上 iconfont 和对应图标的类名，图标就显示出来了。写法简单，颜色和大小可以像普通文字一样直接设置。导航栏、按钮、表单提示这类单色场景用它最合适。
Symbol 方式
这种方式通过 SVG 的 symbol 元素引用图标，支持多色和渐变，细节保留得也更完整。在 Vue 或 React 项目里，可以封装一个通用的 Icon 组件，尺寸和颜色都在这里统一处理。对色彩还原要求高的页面，优先考虑这种方式。
案例：后台管理系统的图标替换
某电商团队维护一套后台管理系统，早期页面图标全是 PNG 切图，一百多张。业务扩张后设计稿改版频繁，每次换色都得找设计师重新出图，开发和运营两头都很被动。
后来团队引入阿里云字体图标，分三步完成。第一步，梳理现有页面用到的图标，按功能归类，在平台上找风格接近的替代图标，放进同一个项目。第二步，下载后用 Font class 方式引入。需要多色的状态图标改用 Symbol 方式，封装成组件。第三步，逐个页面替换，构建之后检查图标显示是否正常。
改造完成后，页面的图片请求明显减少，换肤只需修改 CSS 变量。设计师更新图标时，前端替换文件即可，不用再逐张处理。这次改造让设计和开发之间的交接变顺了，减少流量则是顺带的结果。
使用时的几个提醒
- 引入前先定好图标风格。中途大面积替换，要改的页面多，出错的地方也多。
- 用 Font class 时检查字体文件的加载路径。路径写错，图标会显示成方框。
- 图标名称尽量语义化，比如用 icon-order，别用 icon-123，后面查找和维护会方便很多。
- 只打包页面实际用到的图标，文件体积能小不少。项目变大后，可以借助构建工具做按需加载。
- 纯图标按钮要补充 aria-label 之类的说明，否则屏幕阅读器读不出按钮的用途。
阿里云字体图标适合图标数量多、又想统一管理、灵活换色的项目。选图时注意风格统一和授权范围。引入时，需要多色就用 Symbol 方式，只做单色的话 Font class 更省事。把它放进设计和开发的日常流程后，维护成本会降下来。可以先在一个模块里试用，确认没问题再逐步推广。
