# 

- 
  编辑
  &#xe682;
- 
  更多展开
  &#xe67e;
- 
  图片
  &#xe67f;
- 
  表情
  &#xe680;
- 
  话术
  &#xe681;
- 
  商品退款金额
  &#xe679;
- 
  交易金额
  &#xe67a;
- 
  余额支付金额
  &#xe67b;
- 
  支付佣金金额
  &#xe67c;
- 
  线下收银金额
  &#xe67d;
- 
  聊天
  &#xe769;
- 
  编辑 (1)
  &#xe678;
- 
  进入
  &#xe676;
- 
  返回
  &#xe677;
- 
  更多
  &#xe66d;
- 
  发送
  &#xe66e;
- 
  叉
  &#xe66f;
- 
  密码
  &#xe670;
- 
  搜索
  &#xe671;
- 
  手机
  &#xe672;
- 
  退出
  &#xe673;
- 
  商品信息
  &#xe674;
- 
  账号
  &#xe675;
- 
  表情
  &#xe668;
- 
  更多展开
  &#xe669;
- 
  话术
  &#xe66b;
- 
  图片
  &#xe66c;
- 
  添加 (1) (1)
  &#xe662;
- 
  编辑 (1)
  &#xe663;
- 
  设置 (1)
  &#xe664;
- 
  删除
  &#xe665;
- 
  加号
  &#xe666;
- 
  叉
  &#xe667;
- 
  删除
  &#xe767;
- 
  编辑
  &#xe768;
- 
  对号
  &#xe6ba;
- 
  待评价
  &#xe65d;
- 
  待收货
  &#xe65e;
- 
  售后-退款
  &#xe65f;
- 
  待发货
  &#xe660;
- 
  待付款
  &#xe661;
- 
  转接
  &#xe766;
- 
  浏览器
  &#xe65c;
- 
  访客数
  &#xe63f;
- 
  访问量
  &#xe642;
- 
  成交用户数
  &#xe63d;
- 
  充值件数
  &#xe63e;
- 
  成本金额
  &#xe640;
- 
  付费会员数
  &#xe641;
- 
  充值用户数
  &#xe643;
- 
  购买会员金额
  &#xe644;
- 
  访客-支付转化率
  &#xe645;
- 
  净增用户
  &#xe646;
- 
  客单价
  &#xe647;
- 
  加购件数
  &#xe648;
- 
  累计充值用户
  &#xe649;
- 
  累计成交用户
  &#xe64a;
- 
  累计会员数
  &#xe64b;
- 
  商品浏览量
  &#xe64c;
- 
  商品支付金额
  &#xe64d;
- 
  退款件数
  &#xe64e;
- 
  累计关注用户
  &#xe64f;
- 
  退款
  &#xe650;
- 
  下单件数
  &#xe651;
- 
  累计取关用户
  &#xe652;
- 
  累计用户
  &#xe653;
- 
  新增取关用户
  &#xe654;
- 
  商品访客数
  &#xe655;
- 
  新增用户数
  &#xe656;
- 
  新增关注用户
  &#xe657;
- 
  支付金额
  &#xe658;
- 
  营业额
  &#xe659;
- 
  支付件数
  &#xe65a;
- 
  支出金额
  &#xe65b;
- 
  关机
  &#xe6ed;
- 
  声音 静音 线性
  &#xe94f;
- 
  声音
  &#xe66a;
- 
  关闭
  &#xe761;
- 
  图片
  &#xe762;
- 
  表情
  &#xe764;
- 
  账号密码
  &#xe763;
- 
  二维码
  &#xe765;
- 
  矩形
  &#xe628;
- 
  自动选择
  &#xe625;
- 
  手动选择
  &#xe626;
- 
  单列
  &#xe622;
- 
  两列
  &#xe623;
- 
  三列
  &#xe624;
- 
  直播中
  &#xe621;
- 
  已结束
  &#xe61f;
- 
  未开始
  &#xe620;
- 
  drag2
  &#xe61e;
- 
  banner_3~
  &#xe613;
- 
  小程序直播
  &#xe63c;
- 
  Solid line
  &#xe61b;
- 
  Dotted line
  &#xe61c;
- 
  Dot line
  &#xe61d;
- 
  drop-down
  &#xe619;
- 
  Dot
  &#xe605;
- 
  Square point
  &#xe60d;
- 
  del_2
  &#xe608;
- 
  add to
  &#xe60c;
- 
  del_1
  &#xe610;
- 
  drag
  &#xe617;
- 
  Comm_number
  &#xe600;
- 
  Comm_whole
  &#xe603;
- 
  Comm_Price
  &#xe616;
- 
  Pic_square
  &#xe60e;
- 
  Pic_fillet
  &#xe60f;
- 
  search_2
  &#xe615;
- 
  search_1
  &#xe618;
- 
  banner_2
  &#xe602;
- 
  Pic_small
  &#xe609;
- 
  Pic_big
  &#xe60a;
- 
  banner_1
  &#xe60b;
- 
  doc_skew
  &#xe601;
- 
  doc_bold
  &#xe604;
- 
  doc_general
  &#xe61a;
- 
  five
  &#xe606;
- 
  Four
  &#xe614;
- 
  doc_center
  &#xe607;
- 
  doc_right
  &#xe611;
- 
  doc_left
  &#xe612;
- 
  图片
  &#xe63b;
- 
  客服
  &#xe633;
- 
  辅助线
  &#xe63a;
- 
  标题
  &#xe627;
- 
  导航组
  &#xe629;
- 
  辅助空白
  &#xe62a;
- 
  分类导航
  &#xe62b;
- 
  推荐组
  &#xe62c;
- 
  助力
  &#xe62d;
- 
  关注公众号
  &#xe62e;
- 
  活动魔方
  &#xe62f;
- 
  富文本
  &#xe630;
- 
  秒杀
  &#xe631;
- 
  商品列表
  &#xe632;
- 
  拼团
  &#xe634;
- 
  搜素框
  &#xe635;
- 
  图片广告
  &#xe636;
- 
  新闻播报
  &#xe637;
- 
  文章列表
  &#xe638;
- 
  优惠券
  &#xe639;

## Unicode 引用

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

- 兼容性最好，支持 IE6+，及所有现代浏览器。
- 支持按字体的方式去动态调整图标大小，颜色等等。
- 但是因为是字体，所以不支持多色。只能使用平台里单色的图标，就算项目里有多色图标也会自动去色。

> 注意：新版 iconfont 支持多色图标，这些多色图标在 Unicode 模式下将不能使用，如果有需求建议使用symbol 的引用方式

Unicode 使用步骤如下：

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

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

### 第二步：定义使用 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"。

- 编辑
  .iconbianji2
- 更多展开
  .icongengduozhankai1
- 图片
  .icontupian3
- 表情
  .iconbiaoqing2
- 话术
  .iconhuashu1
- 商品退款金额
  .iconshangpintuikuanjine
- 交易金额
  .iconjiaoyijine
- 余额支付金额
  .iconyuezhifujine
- 支付佣金金额
  .iconzhifuyongjinjine
- 线下收银金额
  .iconxianxiashouyinjine
- 聊天
  .iconliaotian
- 编辑 (1)
  .iconbianji11
- 进入
  .iconjinru
- 返回
  .iconfanhui
- 更多
  .icongengduo
- 发送
  .iconfasong
- 叉
  .iconcha1
- 密码
  .iconmima
- 搜索
  .iconsousuo
- 手机
  .iconshouji
- 退出
  .icontuichu
- 商品信息
  .iconshangpinxinxi
- 账号
  .iconzhanghao
- 表情
  .iconbiaoqing
- 更多展开
  .icongengduozhankai
- 话术
  .iconhuashu
- 图片
  .icontupian2
- 添加 (1) (1)
  .icontianjia11
- 编辑 (1)
  .iconbianji1
- 设置 (1)
  .iconshezhi1
- 删除
  .iconshanchu1
- 加号
  .iconjiahao
- 叉
  .iconcha
- 删除
  .iconshanchu
- 编辑
  .iconbianji
- 对号
  .iconduihao
- 待评价
  .icondaipingjia
- 待收货
  .icondaishouhuo
- 售后-退款
  .iconshouhou-tuikuan
- 待发货
  .icondaifahuo
- 待付款
  .icondaifukuan
- 转接
  .iconzhuanjie
- 浏览器
  .iconliulanqi
- 访客数
  .iconfangkeshu
- 访问量
  .iconfangwenliang
- 成交用户数
  .iconchengjiaoyonghushu
- 充值件数
  .iconchongzhijianshu
- 成本金额
  .iconchengbenjine
- 付费会员数
  .iconfufeihuiyuanshu
- 充值用户数
  .iconchongzhiyonghushu
- 购买会员金额
  .icongoumaihuiyuanjine
- 访客-支付转化率
  .iconfangke-zhifuzhuanhuashuai
- 净增用户
  .iconjingzengyonghu
- 客单价
  .iconkedanjia
- 加购件数
  .iconjiagoujianshu
- 累计充值用户
  .iconleijichongzhiyonghu
- 累计成交用户
  .iconleijichengjiaoyonghu
- 累计会员数
  .iconleijihuiyuanshu
- 商品浏览量
  .iconshangpinliulanliang
- 商品支付金额
  .iconshangpinzhifujine
- 退款件数
  .icontuikuanjianshu
- 累计关注用户
  .iconleijiguanzhuyonghu
- 退款
  .icontuikuan
- 下单件数
  .iconxiadanjianshu
- 累计取关用户
  .iconleijiquguanyonghu
- 累计用户
  .iconleijiyonghu
- 新增取关用户
  .iconxinzengquguanyonghu
- 商品访客数
  .iconshangpinfangkeshu
- 新增用户数
  .iconxinzengyonghushu
- 新增关注用户
  .iconxinzengguanzhuyonghu
- 支付金额
  .iconzhifujine
- 营业额
  .iconyingyee
- 支付件数
  .iconzhifujianshu
- 支出金额
  .iconzhichujine
- 关机
  .iconguanji
- 声音 静音 线性
  .iconshengyinjingyinxianxing
- 声音
  .iconshengyinyinliang
- 关闭
  .iconguanbi5
- 图片
  .icontupian1
- 表情
  .iconbiaoqing1
- 账号密码
  .iconzhanghaomima
- 二维码
  .iconerweima2
- 矩形
  .iconjuxing
- 自动选择
  .iconzidongxuanze
- 手动选择
  .iconshoudongxuanze
- 单列
  .icondanlie
- 两列
  .iconlianglie
- 三列
  .iconsanlie
- 直播中
  .iconzhibozhong
- 已结束
  .iconyijieshu
- 未开始
  .iconweikaishi
- drag2
  .icondrag2
- banner_3~
  .iconbanner_3
- 小程序直播
  .iconxiaochengxuzhibo
- Solid line
  .iconSolidline
- Dotted line
  .iconDottedline
- Dot line
  .iconDotline
- drop-down
  .icondrop-down
- Dot
  .iconDot
- Square point
  .iconSquarepoint
- del_2
  .icondel_2
- add to
  .iconaddto
- del_1
  .icondel_1
- drag
  .icondrag
- Comm_number
  .iconComm_number
- Comm_whole
  .iconComm_whole
- Comm_Price
  .iconComm_Price
- Pic_square
  .iconPic_square
- Pic_fillet
  .iconPic_fillet
- search_2
  .iconsearch_2
- search_1
  .iconsearch_1
- banner_2
  .iconbanner_2
- Pic_small
  .iconPic_small
- Pic_big
  .iconPic_big
- banner_1
  .iconbanner_1
- doc_skew
  .icondoc_skew
- doc_bold
  .icondoc_bold
- doc_general
  .icondoc_general
- five
  .iconfive
- Four
  .iconFour
- doc_center
  .icondoc_center
- doc_right
  .icondoc_right
- doc_left
  .icondoc_left
- 图片
  .icontupian
- 客服
  .iconkefu
- 辅助线
  .iconfuzhuxian
- 标题
  .iconbiaoti
- 导航组
  .icondaohangzu
- 辅助空白
  .iconfuzhukongbai
- 分类导航
  .iconfenleidaohang
- 推荐组
  .iconcuxiaoliebiao
- 助力
  .iconkanjia
- 关注公众号
  .iconguanzhugongzhonghao
- 活动魔方
  .iconhuodongmofang
- 富文本
  .iconfuwenben
- 秒杀
  .iconmiaosha
- 商品列表
  .iconshangpinliebiao
- 拼团
  .iconpintuan
- 搜素框
  .iconsousukuang
- 图片广告
  .icontupianguanggao
- 新闻播报
  .iconxinwenbobao
- 文章列表
  .iconwenzhangliebiao
- 优惠券
  .iconyouhuiquan

## font-class 引用

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

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

- 兼容性良好，支持 IE8+，及所有现代浏览器。
- 相比于 Unicode 语意明确，书写更直观。可以很容易分辨这个 icon 是什么。
- 因为使用 class 来定义图标，所以当要替换图标时，只需要修改 class 里面的 Unicode 引用。
- 不过因为本质上还是使用的字体，所以多色图标还是不支持的。

使用步骤如下：

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

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

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

    <span class="iconfont iconxxx"></span>

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

- 编辑
  #iconbianji2
- 更多展开
  #icongengduozhankai1
- 图片
  #icontupian3
- 表情
  #iconbiaoqing2
- 话术
  #iconhuashu1
- 商品退款金额
  #iconshangpintuikuanjine
- 交易金额
  #iconjiaoyijine
- 余额支付金额
  #iconyuezhifujine
- 支付佣金金额
  #iconzhifuyongjinjine
- 线下收银金额
  #iconxianxiashouyinjine
- 聊天
  #iconliaotian
- 编辑 (1)
  #iconbianji11
- 进入
  #iconjinru
- 返回
  #iconfanhui
- 更多
  #icongengduo
- 发送
  #iconfasong
- 叉
  #iconcha1
- 密码
  #iconmima
- 搜索
  #iconsousuo
- 手机
  #iconshouji
- 退出
  #icontuichu
- 商品信息
  #iconshangpinxinxi
- 账号
  #iconzhanghao
- 表情
  #iconbiaoqing
- 更多展开
  #icongengduozhankai
- 话术
  #iconhuashu
- 图片
  #icontupian2
- 添加 (1) (1)
  #icontianjia11
- 编辑 (1)
  #iconbianji1
- 设置 (1)
  #iconshezhi1
- 删除
  #iconshanchu1
- 加号
  #iconjiahao
- 叉
  #iconcha
- 删除
  #iconshanchu
- 编辑
  #iconbianji
- 对号
  #iconduihao
- 待评价
  #icondaipingjia
- 待收货
  #icondaishouhuo
- 售后-退款
  #iconshouhou-tuikuan
- 待发货
  #icondaifahuo
- 待付款
  #icondaifukuan
- 转接
  #iconzhuanjie
- 浏览器
  #iconliulanqi
- 访客数
  #iconfangkeshu
- 访问量
  #iconfangwenliang
- 成交用户数
  #iconchengjiaoyonghushu
- 充值件数
  #iconchongzhijianshu
- 成本金额
  #iconchengbenjine
- 付费会员数
  #iconfufeihuiyuanshu
- 充值用户数
  #iconchongzhiyonghushu
- 购买会员金额
  #icongoumaihuiyuanjine
- 访客-支付转化率
  #iconfangke-zhifuzhuanhuashuai
- 净增用户
  #iconjingzengyonghu
- 客单价
  #iconkedanjia
- 加购件数
  #iconjiagoujianshu
- 累计充值用户
  #iconleijichongzhiyonghu
- 累计成交用户
  #iconleijichengjiaoyonghu
- 累计会员数
  #iconleijihuiyuanshu
- 商品浏览量
  #iconshangpinliulanliang
- 商品支付金额
  #iconshangpinzhifujine
- 退款件数
  #icontuikuanjianshu
- 累计关注用户
  #iconleijiguanzhuyonghu
- 退款
  #icontuikuan
- 下单件数
  #iconxiadanjianshu
- 累计取关用户
  #iconleijiquguanyonghu
- 累计用户
  #iconleijiyonghu
- 新增取关用户
  #iconxinzengquguanyonghu
- 商品访客数
  #iconshangpinfangkeshu
- 新增用户数
  #iconxinzengyonghushu
- 新增关注用户
  #iconxinzengguanzhuyonghu
- 支付金额
  #iconzhifujine
- 营业额
  #iconyingyee
- 支付件数
  #iconzhifujianshu
- 支出金额
  #iconzhichujine
- 关机
  #iconguanji
- 声音 静音 线性
  #iconshengyinjingyinxianxing
- 声音
  #iconshengyinyinliang
- 关闭
  #iconguanbi5
- 图片
  #icontupian1
- 表情
  #iconbiaoqing1
- 账号密码
  #iconzhanghaomima
- 二维码
  #iconerweima2
- 矩形
  #iconjuxing
- 自动选择
  #iconzidongxuanze
- 手动选择
  #iconshoudongxuanze
- 单列
  #icondanlie
- 两列
  #iconlianglie
- 三列
  #iconsanlie
- 直播中
  #iconzhibozhong
- 已结束
  #iconyijieshu
- 未开始
  #iconweikaishi
- drag2
  #icondrag2
- banner_3~
  #iconbanner_3
- 小程序直播
  #iconxiaochengxuzhibo
- Solid line
  #iconSolidline
- Dotted line
  #iconDottedline
- Dot line
  #iconDotline
- drop-down
  #icondrop-down
- Dot
  #iconDot
- Square point
  #iconSquarepoint
- del_2
  #icondel_2
- add to
  #iconaddto
- del_1
  #icondel_1
- drag
  #icondrag
- Comm_number
  #iconComm_number
- Comm_whole
  #iconComm_whole
- Comm_Price
  #iconComm_Price
- Pic_square
  #iconPic_square
- Pic_fillet
  #iconPic_fillet
- search_2
  #iconsearch_2
- search_1
  #iconsearch_1
- banner_2
  #iconbanner_2
- Pic_small
  #iconPic_small
- Pic_big
  #iconPic_big
- banner_1
  #iconbanner_1
- doc_skew
  #icondoc_skew
- doc_bold
  #icondoc_bold
- doc_general
  #icondoc_general
- five
  #iconfive
- Four
  #iconFour
- doc_center
  #icondoc_center
- doc_right
  #icondoc_right
- doc_left
  #icondoc_left
- 图片
  #icontupian
- 客服
  #iconkefu
- 辅助线
  #iconfuzhuxian
- 标题
  #iconbiaoti
- 导航组
  #icondaohangzu
- 辅助空白
  #iconfuzhukongbai
- 分类导航
  #iconfenleidaohang
- 推荐组
  #iconcuxiaoliebiao
- 助力
  #iconkanjia
- 关注公众号
  #iconguanzhugongzhonghao
- 活动魔方
  #iconhuodongmofang
- 富文本
  #iconfuwenben
- 秒杀
  #iconmiaosha
- 商品列表
  #iconshangpinliebiao
- 拼团
  #iconpintuan
- 搜素框
  #iconsousukuang
- 图片广告
  #icontupianguanggao
- 新闻播报
  #iconxinwenbobao
- 文章列表
  #iconwenzhangliebiao
- 优惠券
  #iconyouhuiquan

## 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>