你的图标还在用 PNG？看完这篇你就会换成 iconfont

为什么使用 iconfont 图标？

前端工程师遇到图标的时候通常会有两个反应：一是"干脆像素党一样把 PNG 全都搞定吧"，二是"又要改图啦，心累"。iconfont 的出现，就是为了让我们少点心累、多点生产力（和悠闲）。

统一管理 ------ 不要再到处找图了

设计稿里点缀的小图标很多时候看起来微不足道，但它们分散在项目各处时，管理起来比追剧还复杂。传统做法大概是：

下载图标文件放目录，然后用 <img> 或 background 引入；
为了减少 HTTP 请求，把很多小图拼成一张雪碧图，用 background-position 精确定位显示。

这两种方法都能解决问题，但每次换一个 icon 就像玩拼图：用 <img> 时不敢随便替换（怕别处也在用）；用雪碧图则得重新切图、改定位，麻烦得要命。

用 iconfont 的好处是把图标交给"图标管理平台"去维护：你只需把需要的 icon 加到项目里，更新图标只要改 class 或 symbol，不用把整个雪碧图砸了重做。

矢量图 ------ 放大也不拖泥带水

iconfont 本质上是矢量（font 或 svg），可以无限放大而不失真。相比之下，PNG/JPG 为了保证清晰度常常要切出更高分辨率的图，文件体积就会膨胀得像发霉的面包。

与传统图片的优点（简明版）

易于内联：可以像文字一样放在行内，与按钮、文字自然对齐；
强缓存策略：字体文件带 fingerprint（哈希），更新后能强制刷新，避免缓存坑；
易于样式化：用 CSS 控制 color、font-size、text-shadow 等，hover、active 轻松搞定；
减少请求次数：比起成百上千的图像请求，字体/符号只需几次请求。

使用方式（摘自官网并做了点小魔改）

下面三种常见引用方式各有侧重------选哪个，看你的兼容需求和图标需求（单色/多色）。

Unicode 引用（兼容性最强）

特点：兼容 IE6+ 和现代浏览器，像字体一样使用，大小颜色好调整，但类名语义不明显（直接写编码不太直观）。

步骤：

拷贝项目生成的 @font-face：

css 复制代码

 @font-face {
   font-family: 'iconfont';
   src: url('iconfont.eot');
   src: url('iconfont.eot?#iefix') format('embedded-opentype'),
        url('iconfont.woff') format('woff'),
        url('iconfont.ttf') format('truetype'),
        url('iconfont.svg#iconfont') format('svg');
 }

定义基础样式：

css 复制代码

 .iconfont {
   font-family: "iconfont" !important;
   font-size: 16px;
   font-style: normal;
   -webkit-font-smoothing: antialiased;
   -webkit-text-stroke-width: 0.2px;
   -moz-osx-font-smoothing: grayscale;
 }

在页面使用（示例）：

ini 复制代码

 <i class="iconfont">&#x33;</i>

说明：新版 iconfont 支持彩色字体图标，但只在现代浏览器里生效。

Font-class 引用（语义清晰）

特点：用类名表示某个图标，语义更直观，兼容 IE8+，本质仍是字体（单色为主）。

步骤：

引入平台给你的 CSS 链接，例如：

ini 复制代码

 <link rel="stylesheet" href="//at.alicdn.com/t/font_8d5l8fzk5b87iudi.css">

使用类名：

css 复制代码

 <i class="iconfont icon-xxx"></i>

好处：当需要替换图标时，只要改类名对应的 unicode 即可，无需在 HTML 里改编码。

Symbol（SVG Symbol）引用（推荐，功能最强）

特点：支持多色、兼容性 IE9+，更灵活，是未来主流。平台推荐此方式。但注意：SVG 渲染在某些老设备上性能可能略逊于纯字体。

步骤：

在入口引入 iconfont.js（一次引入即可）：

xml 复制代码

 <script src="//at.alicdn.com/t/font_8d5l8fzk5b87iudi.js"></script>

全局加一段基础样式：

xml 复制代码

 <style>
 .icon {
   width: 1em;
   height: 1em;
   vertical-align: -0.15em;
   fill: currentColor;
   overflow: hidden;
 }
 </style>

使用方式：

ini 复制代码

 <svg class="icon" aria-hidden="true">
   <use xlink:href="#icon-xxx"></use>
 </svg>

实践建议（我的两分钱）

如果项目没有很苛刻的老浏览器兼容要求，优先使用 Symbol（SVG）方式。简单、支持多色，样式灵活。
入口只需引入一次 iconfont.js；在需要"平铺图标供选择"的场景下，可以用 DOM API 把所有 symbol 收集成列表供展示或入库。
上传图标前请遵守 iconfont 上传规范（平台有文档）。上传后建议手动微调图标在画布的位置和大小，保证通过 font-size 缩放后显示正常。
绝大多数图标是单色的。如果上传时不去色，使用 color 修改颜色可能会失效 ------ 所以管理页面上做去色操作很重要。

示例：从 iconfont.js 里取出所有 symbol 并生成可选列表

javascript 复制代码

 const symbols = Array.from(document.querySelectorAll("svg symbol"));
 const svgList = symbols.map(s => ({
   id: s.id,
   viewBox: s.getAttribute("viewBox"),
   paths: Array.from(s.querySelectorAll("path")).map(p => p.getAttribute("d")),
 }));
 const icons = svgList.map(item => item.id.replace(/^icon-/, ""));
 export default icons;

小结（结尾彩蛋）

用 iconfont 就像把全站小图标放进一个"图标超市"------找货更快、换货更方便、打折时也不会把整个货架砸烂。除非你执着于每个图都用 PNG 手工打磨（并且乐于每次改图都掉头发），否则给 iconfont 一个机会，它会让你在图标问题上少挠头、多喝咖啡。