项目上线前一天，购物车图标还空着，设计师已经下班。前端在浏览器里搜「阿里图标库」，进了阿里巴巴矢量图标库，搜「购物车」，筛线性风格，挑一个顺眼的，十分钟就把页面补上了。

这个站是阿里巴巴做的图标平台，图标由设计师和普通用户上传，数量很大，风格也杂。搜英文关键词命中率一般更高，比如 search、cart、user，中文词也能搜，只是结果少一些。

先建项目再往购物车里加

看中图标点「加入购物车」，挑完点右上角购物车，把图标移入项目。没有项目就新建一个，名字随便写，前缀别用中文，后面生成 CSS 类名会用到。同一个项目的图标会统一打包，方便一次引入。项目设置里可以改 Font Class 前缀，默认是 icon-，和现有样式冲突就换成别的。

三种引入方式别选错

  • Unicode：适合图标少、不想引 CSS 的项目，复制字符编码贴进页面，改颜色靠 font-size 和 color。
  • Font class：最常用，引入一份 CSS，写 class 名就能显示，支持调大小和颜色。
  • Symbol：引用一个 JS 文件，用 svg 标签插入，支持多色图标，体积也小。

项目里勾选「彩色」的图标只能用 Symbol 方式，Font class 引出来是单色的，这点最容易踩坑。

图标尺寸也有讲究。项目里一般按 16、24、32 像素几档一起下载，页面小图标用 16 或 24，导航栏用 24 到 32，别把一个 128 像素的大图硬缩到 16，边缘会糊。Symbol 方式拿到的是 SVG，颜色可以用 CSS 的 fill 控制，跟文字颜色保持一致最省心。

商用前看清作者授权

图标是用户上传的，授权情况每个作者写得不一样，有的允许免费商用，有的要求署名，有的只许个人使用。项目页和图标详情里一般有说明，拿不准就换一个标了可商用的，或者老老实实自己画。整站图标打包下载再转卖，肯定不行。

图标更新后，项目里点「下载至本地」重新拉一份，别用半年前的旧包。图标数量多的时候，只引当前项目用到的，别把整个库的 CSS 都塞进页面。