# IconFont 图标

- 直播间
  #icon-zhibojian
- 订单
  #icon-dingdan
- 消息
  #icon-alarm
- 会员
  #icon-huiyuan
- 偶尔－商品分类
  #icon-shangpinfenlei
- 促销
  #icon-cuxiao
- 促销
  #icon-cuxiao1
- 订单
  #icon-dingdan1
- 首页
  #icon-shouye
- 手机
  #icon-shouji
- 促销
  #icon-tubiao104
- 系统消息
  #icon-xitongxiaoxi
- 店铺
  #icon-dianpu
- 促销
  #icon-cuxiao2
- 火箭
  #icon-huojian
- 商品
  #icon-46776
- 首页
  #icon-shouye1
- 箭头
  #icon-chevron-copy-copy-copy-copy-copy-copy
- 礼物
  #icon-liwu
- 首页
  #icon-shouye2
- 首页
  #icon-shouye3
- 订单
  #icon-dingdan2
- 促销
  #icon-cuxiao3
- 商品
  #icon-shangpin
- 用户群体列表
  #icon-yonghuquntiliebiao
- 首页
  #icon-shouye4
- 双箭头下
  #icon-more-right-small
- 9微信管理
  #icon-9weixinguanli
- 火箭
  #icon-huojian1
- 店铺管理
  #icon-dianpuguanli
- 积分
  #icon-jifen
- 营销
  #icon-yingxiao
- 导航-品牌管理
  #icon-daohangpinpaiguanli
- 基础配置
  #icon-jichupeizhi
- 会员
  #icon-huiyuan1
- 订单
  #icon-dingdan3
- 手机
  #icon-shouji1
- 客户支持服务
  #icon-icon
- 客户服务质量评估
  #icon-icon1
- 订单
  #icon-order
- 客户服务 客服
  #icon-kehufuwukefu
- 礼物
  #icon-liwu1
- 礼物
  #icon-liwu2
- 红包曾，
  #icon-hongbao
- 广告管理
  #icon-guanggaoguanli
- 咖啡
  #icon-kafei
- 文章管理
  #icon-wenzhangguanli
- 礼物
  #icon-liwu3
- 积分
  #icon-jifen1
- 用户列表
  #icon-yonghuliebiao
- 客户服务
  #icon-kehufuwu
- 系统
  #icon-xitong
- 用户账户列表
  #icon-yonghuquntiliebiao1
- 分销
  #icon-fenxiao
- 通用类_默认视图
  #icon-tongyongleimorenshitu
- 友情链接
  #icon-youqinglianjie
- 红包
  #icon-hongbao1
- 手机
  #icon-shouji2
- 字体图标2_咖啡
  #icon-zititubiao2kafei
- 直播
  #icon-tiezi-zhibo-copy-copy
- 班级设置,管理
  #icon-banjishezhiguanli
- 积分
  #icon-icon2
- 通用
  #icon-tongyong
- 首页
  #icon-shouye5
- 管理课程-权限设置
  #icon-guanlikechengquanxianshezhi
- 会员管理
  #icon-icon-user-set
- 双箭头
  #icon-shuangjiantou
- 系统_1
  #icon-xitong_
- 手机
  #icon-shouji3
- 二级导航-系统管理-参数设置
  #icon-erjidaohang-xitongguanli-canshushezhi
- 店铺管理
  #icon-dianpuguanli1
- 直播
  #icon-zhibo
- 直播
  #icon-zhibo1
- 手机
  #icon-shouji4
- 商品
  #icon-icon--
- 店铺
  #icon-dianpu1
- 口令积分
  #icon-jifen2
- 微信管理
  #icon-weixinguanli
- 红包
  #icon-hongbao2
- oto标品商品库
  #icon-shangpinku
- 箭头
  #icon-jiantou-down
- 消息
  #icon-info
- 会员
  #icon-huiyuan2
- 通用申请
  #icon-tongyong1
- 用户列表
  #icon-Userlist
- 模板
  #icon-moban
- 品牌管理
  #icon-pinpaiguanli
- 前端管理
  #icon-qianduanguanli
- 订单管理
  #icon-dingdanguanli
- 广告管理
  #icon-guanggaoguanli1
- 会员管理
  #icon-huiyuanguanli
- 手机
  #icon-shouji5
- 管理文章
  #icon-guanliwenzhang
- 统计报表
  #icon-tongjibaobiao
- 商品
  #icon-shangpin1
- 礼物
  #icon-liwu4
- 会员
  #icon-huiyuan3
- 应用中心-店铺
  #icon-dianpu2
- 统计
  #icon-tongji
- 双箭头
  #icon-arrow-right-double
- 微信管理
  #icon--
- 会员管理
  #icon-huiyuanguanli1
- 统计报表
  #icon-tongjibaobiao1
- 店铺
  #icon-jinrudianpu
- 广告管理
  #icon-guanggaoguanli2
- 订单管理
  #icon-dingdanguanli1
- 用户列表
  #icon-yonghuliebiao1
- 友情链接
  #icon-youqinglianjie1
- 系统消息
  #icon-xitongxiaoxi1
- 管理员设置
  #icon-guanliyuanshezhi
- 消息
  #icon-xiaoxi
- 店铺
  #icon-dianpu3
- 红包
  #icon-hongbao3
- 财务管理
  #icon-caiwuguanli
- 供货商
  #icon-cloud-supplier
- 客户服务
  #icon-kehufuwu1
- 分销管理
  #icon-fenxiaoguanli
- 消息
  #icon-icon3
- 订单管理
  #icon-dingdanguanli2
- 礼物
  #icon-gift
- 积分
  #icon-jifen3
- 会员
  #icon-huiyuan4
- 统计
  #icon-tongji1
- 供货商
  #icon-gonghuo
- 广告管理
  #icon-guanggaoguanli3
- 消息
  #icon-xiaoxi1
- 分销商品
  #icon-fenxiaoshangpin
- 系统
  #icon-xitong1
- 礼物
  #icon-liwu5
- 管理员设置
  #icon-guanliyuanshezhi1
- 商品
  #icon-shangpin2
- 积分商品管理
  #icon-jifenshangpinguanli
- 系统
  #icon-xitong2
- 直播
  #icon-zhibo2
- 财务管理
  #icon-caiwuguanli1
- 直播设置
  #icon-zhiboshezhi
- 客户服务
  #icon-kehufuwu2
- 财务管理
  #icon-caiwuguanli2
- 客户服务
  #icon-kehufuwu3
- 系统
  #icon-xitong3
- 用户信息列表
  #icon-yonghuxinxiliebiao
- 品牌管理
  #icon-pinpaiguanli1
- 商品管理
  #icon-shangpinguanli
- 商品
  #icon-shangpin3
- 分销
  #icon-fenxiao1
- 商品管理
  #icon-shangpinguanli1
- 直播 选中
  #icon-zhiboxuanzhong
- XB_admin_文章管理
  #icon-XB_admin_wenzhangguanli

## symbol引用

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

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

使用步骤如下：

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

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

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

    <style type="text/css">
    .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>