提醒：本文最后更新于 2026-05-24 06:16，文中所关联的信息可能已发生改变，请知悉！

Iconfont 是阿里巴巴推出的矢量图标库，其中涵盖了 1000 多个常用图标，而 iconfont 原理则是说怎样应用代码，以及它有何功能。

编辑

一、iconfont 介绍

IconFont 平台是由阿里巴巴 UX 部门推出的矢量图标管理网站，也是国内首家推广 Webfont 形式图标的平台。网站涵盖了 1000 多个常用图标并还在持续更新中，Iconfont 平台为用户提供在线图标搜索、图标分捡下载、在线储存、矢量格式转换、个人图标库管理及项目图标管理等基础功能。同时 iconfont 平台作为矢量图标倡导者，积极在线分享矢量图标制作经验、前端应用说明，及应用中常见的一些问题。

二、功能

1、在线图标搜索

2、图标分捡下载

3、在线储存

4、矢量格式转换

5、图标库管理

三、代码应用

1、icon 单个使用

单个图标用户可以自行选择下载不同的格式使用，包括 png,ai,svg。此种方式适合用在图标引用特别少，以后也不需要特别维护的场景。比如设计师用来做 demo 原型；前端临时做个活动页；当然如果只是为了下载图标做 PPT, 也是好的。

2、unicode 引用

unicode 是字体在网页端最原始的应用方式，特点是：兼容性最好，支持 ie6+，及所有现代浏览器；支持按字体的方式去动态调整图标大小，颜色等等；但是因为是字体，所以不支持多色。只能使用平台里单色的图标，就算项目里有多色图标也会自动去色。

3、font-class 引用

font-class 是 unicode 使用方式的一种变种，主要是解决 unicode 书写不直观，语意不明确的问题。与 unicode 使用方式相比，具有如下特点：兼容性良好，支持 ie8+，及所有现代浏览器。相比于 unicode 语意明确，书写更直观。可以很容易分辨这个 icon 是什么。因为使用 class 来定义图标，所以当要替换图标时，只需要修改 class 里面的 unicode 引用。不过因为本质上还是使用的字体，所以多色图标还是不支持的