#

- 
  礼物
  &#xe771;
- 
  放大
  &#xe60d;
- 
  放大-四角
  &#xe602;
- 
  放大-边线
  &#xe6f2;
- 𐆃
  地图导航
  &#x10183;
- 
  选中下标
  &#xe729;
- 
  感叹号
  &#xe71f;
- 
  复制
  &#xe71e;
- 
  转账
  &#xe71b;
- 
  收款
  &#xe71c;
- 
  转换2
  &#xe71d;
- 
  提现
  &#xe717;
- 
  充值
  &#xe718;
- 
  转换
  &#xe719;
- 
  明细
  &#xe71a;
- 
  门店
  &#xe6f3;
- 
  星星
  &#xe6ef;
- 
  位置定位
  &#xe6f0;
- 
  消息
  &#xe6f1;
- 
  login-language
  &#xe6ed;
- 
  login-down-arrow
  &#xe6ee;
- 
  删除
  &#xe6ec;
- 
  成功对号
  &#xe6eb;
- 
  Shopping cart1107
  &#xe6e7;
- 
  me1107
  &#xe6e8;
- 
  classify1107
  &#xe6e9;
- 
  index1107
  &#xe6ea;
- 
  支付_支付失败
  &#xe6e6;
- 
  jianpan-guanbi
  &#xe6e5;
- 
  转账/转换
  &#xe6e4;
- 
  wytw-sctp
  &#xe6e3;
- 
  xzzx-shij
  &#xe6e2;
- 
  xzzx-rhaz
  &#xe6e0;
- 
  xzzx-kfwd
  &#xe6e1;
- 
  wenda-wytw
  &#xe6de;
- 
  wenda-wdtw
  &#xe6df;
- 
  bowenxiangqing-dianzan-xuaz
  &#xe6dd;
- 
  bowenxiangqing-fenxiang
  &#xe6dc;
- 
  bowenxiangqing-huifu
  &#xe6ce;
- 
  bowenxiangqing-dianzan
  &#xe6da;
- 
  wodeqianbao-eyeclo2
  &#xe6db;
- 
  zuhedap-shoping
  &#xe6d9;
- 
  wdhy-gaoji
  &#xe6d8;
- 
  二维码
  &#xe6d7;
- 
  wdfx-ptfx
  &#xe6c6;
- 
  wdfx-gjfx
  &#xe6d5;
- 
  xzdz-tianjiabiaoq
  &#xe6d6;
- 
  xzdz-dingwei
  &#xe6d2;
- 
  wddz-bianji
  &#xe6d3;
- 
  bjdz-guanbi
  &#xe6d4;
- 
  箭头-向左
  &#xe6d1;
- 
  扫一扫
  &#xe6cf;
- 
  wodeqianbao-eye
  &#xe6d0;
- 
  mendian-dingwei
  &#xe6cd;
- 
  zhifu-yixuan
  &#xe6ca;
- 
  zhifu-weixuan
  &#xe6cb;
- 
  箭头-向下
  &#xe6cc;
- 
  关闭-空心
  &#xe6c9;
- 
  kaitonghuiy-dingdan
  &#xe6c8;
- 
  miaosha-hdgz
  &#xe6c7;
- 
  mendian-sc
  &#xe6c4;
- 
  mendian-kefu
  &#xe6c5;
- 
  qiandao-tancguanbi
  &#xe6c3;
- 
  qiandao-dqxz
  &#xe6bc;
- 
  分享-正方形
  &#xe6bd;
- 
  qiandao-wdqd
  &#xe6be;
- 
  qiandao-zudui
  &#xe6bf;
- 
  圆角箭头-向右
  &#xe6c0;
- 
  qiandao-yixuan
  &#xe6c1;
- 
  箭头-向右
  &#xe6c2;
- 
  zhibo-shixiao
  &#xe6bb;
- 
  icon-cart-dec
  &#xe6ba;
- 
  icon-cart-inc
  &#xe6b9;
- 
  箭头-向上
  &#xe6b8;
- 
  icon-fenlei-more
  &#xe6b7;
- 
  icon-zhibo-time
  &#xe6b3;
- 
  icon-pp-all
  &#xe6b4;
- 
  icon-zhibo-zt
  &#xe6b5;
- 
  icon-zhibo-jies
  &#xe6b6;
- 
  icon-md-phone
  &#xe6b1;
- 
  icon-md-dh
  &#xe6b2;
- 
  icon-index-zxmd-phone
  &#xe6ac;
- 
  icon-index-zxmd-dh
  &#xe6ad;
- 
  icon-index-zxmd-time
  &#xe6ae;
- 
  icon-index-zxmd-dress
  &#xe6af;
- 
  icon-index-notice
  &#xe6a8;
- 
  icon-index-search
  &#xe6a9;
- 
  icon-applet-me-settings-acquiesce
  &#xe6a6;
- 
  icon-applet-me-message-acquiesce
  &#xe6a7;
- 
  icon-applet-me-acquiesce
  &#xe6a2;
- 
  icon-applet-sort-acquiesce
  &#xe6a5;
- 
  icon-applet-index-acquiesce
  &#xe6a4;
- 
  icon-applet-shop-acquiesce
  &#xe6a3;

## Unicode 引用

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

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

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

Unicode 使用步骤如下：

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

    @font-face {
      font-family: 'iconfont';
      src: url('iconfont.woff2?t=1724376718457') format('woff2'),
           url('iconfont.woff?t=1724376718457') format('woff'),
           url('iconfont.ttf?t=1724376718457') format('truetype'),
           url('iconfont.svg?t=1724376718457#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"。

- 礼物
  .icon-gift-fine
- 放大
  .icon-enlarge
- 放大-四角
  .icon-enlarge-four
- 放大-边线
  .icon-enlarge-border
- 地图导航
  .icon-map-navigator
- 选中下标
  .icon-down-mark
- 感叹号
  .icon-sigh-o
- 复制
  .icon-copy
- 转账
  .icon-transfer-count
- 收款
  .icon-collection
- 转换2
  .icon-convert2
- 提现
  .icon-cash
- 充值
  .icon-recharge
- 转换
  .icon-convert
- 明细
  .icon-detail
- 门店
  .icon-store
- 星星
  .icon-star
- 位置定位
  .icon-location
- 消息
  .icon-message
- login-language
  .icon-login-language
- login-down-arrow
  .icon-login-down-arrow
- 删除
  .icon-delete
- 成功对号
  .icon-checked
- Shopping cart1107
  .icon-a-Shoppingcart1107
- me1107
  .icon-me1107
- classify1107
  .icon-classify1107
- index1107
  .icon-index1107
- 支付_支付失败
  .icon-payment-fail
- jianpan-guanbi
  .icon-keyboard-backspace
- 转账/转换
  .icon-transfer
- wytw-sctp
  .icon-wytw-sctp
- xzzx-shij
  .icon-xzzx-shij
- xzzx-rhaz
  .icon-xzzx-rhaz
- xzzx-kfwd
  .icon-xzzx-kfwd
- wenda-wytw
  .icon-wenda-wytw
- wenda-wdtw
  .icon-wenda-wdtw
- bowenxiangqing-dianzan-xuaz
  .icon-bowenxiangqing-dianzan-xuaz
- bowenxiangqing-fenxiang
  .icon-bowenxiangqing-fenxiang
- bowenxiangqing-huifu
  .icon-bowenxiangqing-huifu
- bowenxiangqing-dianzan
  .icon-bowenxiangqing-dianzan
- wodeqianbao-eyeclo2
  .icon-wodeqianbao-eyeclo2
- zuhedap-shoping
  .icon-zuhedap-shoping
- wdhy-gaoji
  .icon-wdhy-gaoji
- 二维码
  .icon-qrcode
- wdfx-ptfx
  .icon-wdfx-ptfx
- wdfx-gjfx
  .icon-wdfx-gjfx
- xzdz-tianjiabiaoq
  .icon-xzdz-tianjiabiaoq
- xzdz-dingwei
  .icon-xzdz-dingwei
- wddz-bianji
  .icon-wddz-bianji
- bjdz-guanbi
  .icon-bjdz-guanbi
- 箭头-向左
  .icon-arrow-left
- 扫一扫
  .icon-scan
- wodeqianbao-eye
  .icon-wodeqianbao-eye
- mendian-dingwei
  .icon-mendian-dingwei
- zhifu-yixuan
  .icon-zhifu-yixuan
- zhifu-weixuan
  .icon-zhifu-weixuan
- 箭头-向下
  .icon-arrow-bottom
- 关闭-空心
  .icon-close-o
- kaitonghuiy-dingdan
  .icon-kaitonghuiy-dingdan
- miaosha-hdgz
  .icon-miaosha-hdgz
- mendian-sc
  .icon-mendian-sc
- mendian-kefu
  .icon-mendian-kefu
- qiandao-tancguanbi
  .icon-qiandao-tancguanbi
- qiandao-dqxz
  .icon-qiandao-dqxz
- 分享-正方形
  .icon-share-square
- qiandao-wdqd
  .icon-qiandao-wdqd
- qiandao-zudui
  .icon-qiandao-zudui
- 圆角箭头-向右
  .icon-arrow-right-round
- qiandao-yixuan
  .icon-qiandao-yixuan
- 箭头-向右
  .icon-arrow-right
- zhibo-shixiao
  .icon-zhibo-shixiao
- icon-cart-dec
  .icon-cart-dec
- icon-cart-inc
  .icon-cart-inc
- 箭头-向上
  .icon-arrow-top
- icon-fenlei-more
  .icon-fenlei-more
- icon-zhibo-time
  .icon-zhibo-time
- icon-pp-all
  .icon-pp-all
- icon-zhibo-zt
  .icon-zhibo-zt
- icon-zhibo-jies
  .icon-zhibo-jies
- icon-md-phone
  .icon-md-phone
- icon-md-dh
  .icon-md-dh
- icon-index-zxmd-phone
  .icon-index-zxmd-phone
- icon-index-zxmd-dh
  .icon-index-zxmd-dh
- icon-index-zxmd-time
  .icon-index-zxmd-time
- icon-index-zxmd-dress
  .icon-index-zxmd-dress
- icon-index-notice
  .icon-index-notice
- icon-index-search
  .icon-index-search
- icon-applet-me-settings-acquiesce
  .icon-applet-me-settings-acquiesce
- icon-applet-me-message-acquiesce
  .icon-applet-me-message-acquiesce
- icon-applet-me-acquiesce
  .icon-applet-me-acquiesce
- icon-applet-sort-acquiesce
  .icon-applet-sort-acquiesce
- icon-applet-index-acquiesce
  .icon-applet-index-acquiesce
- icon-applet-shop-acquiesce
  .icon-applet-shop-acquiesce

## 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-gift-fine
- 放大
  #icon-enlarge
- 放大-四角
  #icon-enlarge-four
- 放大-边线
  #icon-enlarge-border
- 地图导航
  #icon-map-navigator
- 选中下标
  #icon-down-mark
- 感叹号
  #icon-sigh-o
- 复制
  #icon-copy
- 转账
  #icon-transfer-count
- 收款
  #icon-collection
- 转换2
  #icon-convert2
- 提现
  #icon-cash
- 充值
  #icon-recharge
- 转换
  #icon-convert
- 明细
  #icon-detail
- 门店
  #icon-store
- 星星
  #icon-star
- 位置定位
  #icon-location
- 消息
  #icon-message
- login-language
  #icon-login-language
- login-down-arrow
  #icon-login-down-arrow
- 删除
  #icon-delete
- 成功对号
  #icon-checked
- Shopping cart1107
  #icon-a-Shoppingcart1107
- me1107
  #icon-me1107
- classify1107
  #icon-classify1107
- index1107
  #icon-index1107
- 支付_支付失败
  #icon-payment-fail
- jianpan-guanbi
  #icon-keyboard-backspace
- 转账/转换
  #icon-transfer
- wytw-sctp
  #icon-wytw-sctp
- xzzx-shij
  #icon-xzzx-shij
- xzzx-rhaz
  #icon-xzzx-rhaz
- xzzx-kfwd
  #icon-xzzx-kfwd
- wenda-wytw
  #icon-wenda-wytw
- wenda-wdtw
  #icon-wenda-wdtw
- bowenxiangqing-dianzan-xuaz
  #icon-bowenxiangqing-dianzan-xuaz
- bowenxiangqing-fenxiang
  #icon-bowenxiangqing-fenxiang
- bowenxiangqing-huifu
  #icon-bowenxiangqing-huifu
- bowenxiangqing-dianzan
  #icon-bowenxiangqing-dianzan
- wodeqianbao-eyeclo2
  #icon-wodeqianbao-eyeclo2
- zuhedap-shoping
  #icon-zuhedap-shoping
- wdhy-gaoji
  #icon-wdhy-gaoji
- 二维码
  #icon-qrcode
- wdfx-ptfx
  #icon-wdfx-ptfx
- wdfx-gjfx
  #icon-wdfx-gjfx
- xzdz-tianjiabiaoq
  #icon-xzdz-tianjiabiaoq
- xzdz-dingwei
  #icon-xzdz-dingwei
- wddz-bianji
  #icon-wddz-bianji
- bjdz-guanbi
  #icon-bjdz-guanbi
- 箭头-向左
  #icon-arrow-left
- 扫一扫
  #icon-scan
- wodeqianbao-eye
  #icon-wodeqianbao-eye
- mendian-dingwei
  #icon-mendian-dingwei
- zhifu-yixuan
  #icon-zhifu-yixuan
- zhifu-weixuan
  #icon-zhifu-weixuan
- 箭头-向下
  #icon-arrow-bottom
- 关闭-空心
  #icon-close-o
- kaitonghuiy-dingdan
  #icon-kaitonghuiy-dingdan
- miaosha-hdgz
  #icon-miaosha-hdgz
- mendian-sc
  #icon-mendian-sc
- mendian-kefu
  #icon-mendian-kefu
- qiandao-tancguanbi
  #icon-qiandao-tancguanbi
- qiandao-dqxz
  #icon-qiandao-dqxz
- 分享-正方形
  #icon-share-square
- qiandao-wdqd
  #icon-qiandao-wdqd
- qiandao-zudui
  #icon-qiandao-zudui
- 圆角箭头-向右
  #icon-arrow-right-round
- qiandao-yixuan
  #icon-qiandao-yixuan
- 箭头-向右
  #icon-arrow-right
- zhibo-shixiao
  #icon-zhibo-shixiao
- icon-cart-dec
  #icon-cart-dec
- icon-cart-inc
  #icon-cart-inc
- 箭头-向上
  #icon-arrow-top
- icon-fenlei-more
  #icon-fenlei-more
- icon-zhibo-time
  #icon-zhibo-time
- icon-pp-all
  #icon-pp-all
- icon-zhibo-zt
  #icon-zhibo-zt
- icon-zhibo-jies
  #icon-zhibo-jies
- icon-md-phone
  #icon-md-phone
- icon-md-dh
  #icon-md-dh
- icon-index-zxmd-phone
  #icon-index-zxmd-phone
- icon-index-zxmd-dh
  #icon-index-zxmd-dh
- icon-index-zxmd-time
  #icon-index-zxmd-time
- icon-index-zxmd-dress
  #icon-index-zxmd-dress
- icon-index-notice
  #icon-index-notice
- icon-index-search
  #icon-index-search
- icon-applet-me-settings-acquiesce
  #icon-applet-me-settings-acquiesce
- icon-applet-me-message-acquiesce
  #icon-applet-me-message-acquiesce
- icon-applet-me-acquiesce
  #icon-applet-me-acquiesce
- icon-applet-sort-acquiesce
  #icon-applet-sort-acquiesce
- icon-applet-index-acquiesce
  #icon-applet-index-acquiesce
- icon-applet-shop-acquiesce
  #icon-applet-shop-acquiesce

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