Iconfont 矢量图标：创建项目并用 Symbol 接入网页

Iconfont 是阿里巴巴提供的矢量图标管理平台。把需要的图标放进项目后，可以通过 Symbol 方式在网页中引用，统一管理图标和对应的名称。

1. 登录并选择图标

打开 Iconfont 官网，注册或登录账号。

搜索需要的图标，将鼠标悬停在图标上，点击购物车按钮加入购物车。需要多个图标时逐个添加。如果要保留多色效果，可以选择多色图标，并使用后面的 Symbol 接入方式。选用图标前应确认它们的授权范围符合自己的用途。

2. 创建项目并生成 Symbol 链接

1. 点击页面右上角的购物车，打开已选择的图标列表。
2. 点击「添加至项目」，用右侧加号新建项目，输入项目名称后确认；项目名可以使用中文。
3. 进入项目，选择「Symbol」。如果显示「暂无代码，点此生成」，点击生成项目脚本链接。
4. 复制自己项目生成的链接，供页面引用。

3. 在页面中加载项目脚本

普通 HTML 页面可通过下面的格式引用项目脚本，将占位内容替换成刚生成的完整链接：

<script src="自己项目生成的完整链接"></script>

下面保留一个链接格式示例。实际接入时使用自己有权使用的项目链接，不要把示例地址直接当作自己的长期依赖：

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

如果是 WordPress，脚本应通过主题提供的接入位置，或在子主题中使用 wp_enqueue_script() 加载。早期教程常以 header.php 为例，但不能简单理解为随便贴在文件最后一行；应保持模板结构完整，也避免直接修改会被更新覆盖的父主题文件。具体接入方式可参照 WordPress 资源加载文档。

4. 添加图标样式

将下面的样式放入项目样式表。WordPress 中可以放在子主题的 style.css 或主题提供的自定义 CSS 位置：

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

5. 在需要的位置调用图标

使用下面的 SVG 结构，把 icon-xxx 替换为项目内对应图标下方显示的 Symbol 名称：

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

例如，下图第一个「店铺」图标的名称是 icon-dianpu，对应格式为：

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

项目脚本、样式和 Symbol 名称配对后，就能在页面中引用对应图标。示例中的 aria-hidden="true" 适合装饰性图标；如果图标单独代表一个按钮或操作，还需要为该操作提供可读的文字名称。

接入方式说明：Iconfont 官方代码使用帮助。