#

- 
  文本短信
  &#xe790;
- 
  安全保障
  &#xe694;
- 
  任务完成
  &#xec13;
- 
  短信验证码
  &#xe777;
- 
  双向呼叫
  &#xec14;
- 
  warning-circle-fill
  &#xe848;
- 
  check
  &#xe7fc;
- 
  user-default
  &#xebcc;
- 
  AI电话
  &#xec78;
- 
  系统通知
  &#xe6a7;
- 
  生日尊享
  &#xec7b;
- 
  Plus
  &#xec7e;
- 
  edit
  &#xec7f;
- 
  Delete
  &#xec80;
- 
  暂无话术
  &#xec6e;
- 
  链接
  &#xe620;
- 
  开启
  &#xeca6;
- 
  暂停
  &#xeca7;
- 
  音符
  &#xe626;
- 
  音符静音
  &#xe6cf;
- 
  邀请
  &#xeca4;
- 
  开卡
  &#xecab;
- 
  查看详情
  &#xeba8;
- 
  客户复购管理
  &#xe731;
- 
  活动邀约
  &#xec6f;
- 
  企微好友
  &#xec70;
- 
  其他场景
  &#xec7a;
- 
  标签
  &#xe70a;
- 
  等级-3
  &#xe6a3;
- 
  等级-6
  &#xe6a4;
- 
  等级-1
  &#xe6a2;
- 
  等级-5
  &#xe6a5;
- 
  等级-8
  &#xe6a6;
- 
  arrow-right
  &#xe808;
- 
  等级-10
  &#xe67a;
- 
  等级-7
  &#xe67b;
- 
  等级-9
  &#xe67c;
- 
  等级-4
  &#xe67d;
- 
  等级-2
  &#xe67e;
- 
  PlusOutlined
  &#xe6a9;
- 
  reload-outlined
  &#xe6aa;
- 
  配置为空
  &#xec56;
- 
  基本信息
  &#xec5a;
- 
  消费活动
  &#xec5b;
- 
  营销活动
  &#xec5c;
- 
  用户轨迹
  &#xec5d;
- 
  导购标签
  &#xec5e;
- 
  其他标签
  &#xec5f;
- 
  微盟标签
  &#xec60;
- 
  常用标签
  &#xec61;
- 
  渠道标签
  &#xec62;
- 
  客户分组
  &#xec67;
- 
  金字塔客户
  &#xec68;
- 
  营销活动标签
  &#xec75;
- 
  编辑
  &#xec81;
- 
  删除
  &#xec82;
- 
  more
  &#xec97;
- 
  更多
  &#xec98;
- 
  拖拽排序
  &#xec9a;
- 
  复制
  &#xec9b;
- 
  我的积分
  &#xeca8;
- 
  上升
  &#xec9d;
- 
  下降
  &#xec9e;
- 
  门店
  &#xeca0;
- 
  老店
  &#xeca1;
- 
  新店
  &#xeca2;
- 
  异常
  &#xeca3;
- 
  指标说明
  &#xeb57;
- 
  上传
  &#xe6ac;
- 
  下载
  &#xeb83;
- 
  QuestionCircleOutlined
  &#xe693;

## Unicode 引用

Unicode 是字体在网页端最原始的应用方式，特点是：

- 支持按字体的方式去动态调整图标大小，颜色等等。
- 默认情况下不支持多色，直接添加多色图标会自动去色。

> 注意：新版 iconfont 支持两种方式引用多色图标：SVG symbol 引用方式和彩色字体图标模式。（使用彩色字体图标需要在「编辑项目」中开启「彩色」选项后并重新生成。）

Unicode 使用步骤如下：

### 第一步：拷贝项目下面生成的 `@font-face`

    @font-face {
      font-family: 'iconfont';
      src: url('iconfont.woff2?t=1659408931949') format('woff2'),
           url('iconfont.woff?t=1659408931949') format('woff'),
           url('iconfont.ttf?t=1659408931949') format('truetype');
    }

### 第二步：定义使用 iconfont 的样式

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

### 第三步：挑选相应图标并获取字体编码，应用于页面

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

> "iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。

- 文本短信
  .icon-wenbenmsg
- 安全保障
  .icon-anquanbaozhang
- 任务完成
  .icon-renwuwancheng
- 短信验证码
  .icon-duanxinyzm
- 双向呼叫
  .icon-shuangxianghujiao1
- warning-circle-fill
  .icon-warning-circle-fill
- check
  .icon-check
- user-default
  .icon-user-default
- AI电话
  .icon-AIdianhua
- 系统通知
  .icon-xitongtongzhi
- 生日尊享
  .icon-shengrizunxiang
- Plus
  .icon-Plus
- edit
  .icon-edit
- Delete
  .icon-Delete
- 暂无话术
  .icon-zanwuhuashu
- 链接
  .icon-lianjie
- 开启
  .icon-kaiqi
- 暂停
  .icon-zanting
- 音符
  .icon-yinfu
- 音符静音
  .icon-xingzhuangjiehe2x
- 邀请
  .icon-yaoqing
- 开卡
  .icon-kaika
- 查看详情
  .icon-chakanxiangqing-copy
- 客户复购管理
  .icon-kehufugouguanli
- 活动邀约
  .icon-huodongyaoyue
- 企微好友
  .icon-qiweihaoyou
- 其他场景
  .icon-qitachangjing
- 标签
  .icon-biaoqian
- 等级-3
  .icon-dengji-
- 等级-6
  .icon-dengji-1
- 等级-1
  .icon-dengji-2
- 等级-5
  .icon-dengji-3
- 等级-8
  .icon-dengji-4
- arrow-right
  .icon-arrow-right1
- 等级-10
  .icon-dengji-5
- 等级-7
  .icon-dengji-6
- 等级-9
  .icon-dengji-7
- 等级-4
  .icon-dengji-8
- 等级-2
  .icon-dengji-9
- PlusOutlined
  .icon-PlusOutlined
- reload-outlined
  .icon-reload-outlined
- 配置为空
  .icon-peizhiweikong
- 基本信息
  .icon-jibenxinxi
- 消费活动
  .icon-xiaofeihuodong
- 营销活动
  .icon-yingxiaohuodong
- 用户轨迹
  .icon-yonghuguiji
- 导购标签
  .icon-daogoubiaoqian
- 其他标签
  .icon-qitabiaoqian
- 微盟标签
  .icon-weimengbiaoqian
- 常用标签
  .icon-changyongbiaoqian
- 渠道标签
  .icon-qudaobiaoqian
- 客户分组
  .icon-kehufenzu
- 金字塔客户
  .icon-jinzitakehu
- 营销活动标签
  .icon-yingxiaohuodongbiaoqian
- 编辑
  .icon-bianji6
- 删除
  .icon-delete
- more
  .icon-more
- 更多
  .icon-gengduo
- 拖拽排序
  .icon-tuozhuaipaixu
- 复制
  .icon-fuzhi
- 我的积分
  .icon-wodejifen
- 上升
  .icon-shangsheng
- 下降
  .icon-xiajiang
- 门店
  .icon-mendian-data
- 老店
  .icon-laodian
- 新店
  .icon-xindian
- 异常
  .icon-yichang
- 指标说明
  .icon-zhibiaoshuoming
- 上传
  .icon-shangc
- 下载
  .icon-xiazai
- QuestionCircleOutlined
  .icon-QuestionCircleOutlined

## font-class 引用

font-class 是 Unicode 使用方式的一种变种，主要是解决 Unicode 书写不直观，语意不明确的问题。

与 Unicode 使用方式相比，具有如下特点：

- 相比于 Unicode 语意明确，书写更直观。可以很容易分辨这个 icon 是什么。
- 因为使用 class 来定义图标，所以当要替换图标时，只需要修改 class 里面的 Unicode 引用。

使用步骤如下：

### 第一步：引入项目下面生成的 fontclass 代码：

    <link rel="stylesheet" href="./iconfont.css">

### 第二步：挑选相应图标并获取类名，应用于页面：

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

> " iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。

- 文本短信
  #icon-wenbenmsg
- 安全保障
  #icon-anquanbaozhang
- 任务完成
  #icon-renwuwancheng
- 短信验证码
  #icon-duanxinyzm
- 双向呼叫
  #icon-shuangxianghujiao1
- warning-circle-fill
  #icon-warning-circle-fill
- check
  #icon-check
- user-default
  #icon-user-default
- AI电话
  #icon-AIdianhua
- 系统通知
  #icon-xitongtongzhi
- 生日尊享
  #icon-shengrizunxiang
- Plus
  #icon-Plus
- edit
  #icon-edit
- Delete
  #icon-Delete
- 暂无话术
  #icon-zanwuhuashu
- 链接
  #icon-lianjie
- 开启
  #icon-kaiqi
- 暂停
  #icon-zanting
- 音符
  #icon-yinfu
- 音符静音
  #icon-xingzhuangjiehe2x
- 邀请
  #icon-yaoqing
- 开卡
  #icon-kaika
- 查看详情
  #icon-chakanxiangqing-copy
- 客户复购管理
  #icon-kehufugouguanli
- 活动邀约
  #icon-huodongyaoyue
- 企微好友
  #icon-qiweihaoyou
- 其他场景
  #icon-qitachangjing
- 标签
  #icon-biaoqian
- 等级-3
  #icon-dengji-
- 等级-6
  #icon-dengji-1
- 等级-1
  #icon-dengji-2
- 等级-5
  #icon-dengji-3
- 等级-8
  #icon-dengji-4
- arrow-right
  #icon-arrow-right1
- 等级-10
  #icon-dengji-5
- 等级-7
  #icon-dengji-6
- 等级-9
  #icon-dengji-7
- 等级-4
  #icon-dengji-8
- 等级-2
  #icon-dengji-9
- PlusOutlined
  #icon-PlusOutlined
- reload-outlined
  #icon-reload-outlined
- 配置为空
  #icon-peizhiweikong
- 基本信息
  #icon-jibenxinxi
- 消费活动
  #icon-xiaofeihuodong
- 营销活动
  #icon-yingxiaohuodong
- 用户轨迹
  #icon-yonghuguiji
- 导购标签
  #icon-daogoubiaoqian
- 其他标签
  #icon-qitabiaoqian
- 微盟标签
  #icon-weimengbiaoqian
- 常用标签
  #icon-changyongbiaoqian
- 渠道标签
  #icon-qudaobiaoqian
- 客户分组
  #icon-kehufenzu
- 金字塔客户
  #icon-jinzitakehu
- 营销活动标签
  #icon-yingxiaohuodongbiaoqian
- 编辑
  #icon-bianji6
- 删除
  #icon-delete
- more
  #icon-more
- 更多
  #icon-gengduo
- 拖拽排序
  #icon-tuozhuaipaixu
- 复制
  #icon-fuzhi
- 我的积分
  #icon-wodejifen
- 上升
  #icon-shangsheng
- 下降
  #icon-xiajiang
- 门店
  #icon-mendian-data
- 老店
  #icon-laodian
- 新店
  #icon-xindian
- 异常
  #icon-yichang
- 指标说明
  #icon-zhibiaoshuoming
- 上传
  #icon-shangc
- 下载
  #icon-xiazai
- QuestionCircleOutlined
  #icon-QuestionCircleOutlined

## Symbol 引用

这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇文章 这种用法其实是做了一个 SVG 的集合，与另外两种相比具有如下特点：

- 支持多色图标了，不再受单色限制。
- 通过一些技巧，支持像字体那样，通过 `font-size`, `color` 来调整样式。
- 兼容性较差，支持 IE9+，及现代浏览器。
- 浏览器渲染 SVG 的性能一般，还不如 png。

使用步骤如下：

### 第一步：引入项目下面生成的 symbol 代码：

    <script src="./iconfont.js"></script>

### 第二步：加入通用 CSS 代码（引入一次就行）：

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

### 第三步：挑选相应图标并获取类名，应用于页面：

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