#

- 
  full
  &#xe651;
- 
  exit
  &#xe652;
- 
  qiyong
  &#xe64e;
- 
  jinyong
  &#xe64f;
- 
  退回申请
  &#xe64d;
- 
  mti-漏电监测
  &#xe64c;
- 
  关闭
  &#xe64b;
- 
  启用
  &#xe649;
- 
  禁用
  &#xe64a;
- 
  线路
  &#xe647;
- 
  集中器
  &#xe648;
- 
  路径 4 (1)
  &#xe646;
- 
  路径 4
  &#xe645;
- 
  Electrocardiogram
  &#xe644;
- 
  分组 10
  &#xe642;
- 
  路径 1 (1)
  &#xe643;
- 
  离线
  &#xe63b;
- 
  49
  &#xe63c;
- 
  路径 6
  &#xe63e;
- 
  mti-漏电监测
  &#xe63f;
- 
  路径 1
  &#xe641;
- 
  分组 92
  &#xe63a;
- 
  用户
  &#xe68d;
- 
  故障
  &#xe632;
- 
  累计收益
  &#xe631;
- 
  发电量
  &#xe63d;
- 
  风机
  &#xe661;
- 
  光伏-copy
  &#xe633;
- 
  减碳排放
  &#xe67d;
- 
  合并
  &#xe630;
- 
  分组 2
  &#xe62e;
- 
  箭头
  &#xe62d;
- 
  分组 549
  &#xe62c;
- 
  关闭
  &#xe62a;
- 
  保护装置
  &#xe704;
- 
  配电房
  &#xe6ae;
- 
  同心圆
  &#xe6ba;
- 
  操控管理
  &#xe62b;
- 
  Cyber Monitoring
  &#xe640;
- 
  Growth Chart
  &#xe650;
- 
  Sales Growth
  &#xe668;
- 
  Trend Chat
  &#xe673;
- 
  Cloud Computer
  &#xe683;
- 
  Cloud Infrastructure
  &#xe687;
- 
  Cloud Management
  &#xe689;
- 
  Cloud Security
  &#xe68e;
- 
  Dataserver
  &#xe693;
- 
  Volume Equalizer
  &#xe6c0;
- 
  Resource Management
  &#xe808;
- 
  Graph Up
  &#xe859;
- 
  File Cabinet
  &#xe97d;
- 
  System Setting
  &#xee41;
- 
  同心圆-copy
  &#xee42;
- 
  同心圆-copy-copy
  &#xee43;
- 
  首页
  &#xe625;
- 
  定位
  &#xe8c4;
- 
  关闭
  &#xe62f;
- 
  处理状态
  &#xe684;
- 
  分组 302
  &#xe629;
- 
  分组 1163
  &#xe605;
- 
  分组 449
  &#xe627;
- 
  分组 1565
  &#xe628;
- 
  密码
  &#xe8b2;
- 
  退出
  &#xe624;
- 
  icon_夜间-月亮
  &#xe656;
- 
  通知
  &#xe674;
- 
  通知
  &#xe9cd;
- 𐇔
  通知
  &#x101d4;
- 
  形状结合
  &#xe623;
- 
  系统管理
  &#xe672;
- 
  平台管理
  &#xe619;
- 
  湿度
  &#xe635;
- 
  订单-全部订单
  &#xe626;
- 
  温度
  &#xe80f;
- 
  光照
  &#xe636;
- 
  风速
  &#xea32;
- 
  物联中心_normal
  &#xe620;
- 
  icon-home
  &#xe621;
- 
  分割线
  &#xe634;
- 
  取消-抽屉
  &#xe637;
- 
  user_login
  &#xe638;
- 
  passwd_login
  &#xe639;
- 
  形状
  &#xe622;
- 
  形状
  &#xe604;
- 
  分组 1865
  &#xe61f;
- 
  分组 929
  &#xe61a;
- 
  分组 412
  &#xe61b;
- 
  分组 1753
  &#xe61c;
- 
  分组 2121
  &#xe61d;
- 
  分组 204
  &#xe61e;
- 
  分组 463
  &#xe616;
- 
  分组 423
  &#xe617;
- 
  分组 1977
  &#xe618;
- 
  分组 610
  &#xe613;
- 
  分组 614
  &#xe614;
- 
  分组 249
  &#xe615;
- 
  分组 1237
  &#xe60e;
- 
  分组 2237
  &#xe60f;
- 
  分组 2085
  &#xe610;
- 
  分组 1739
  &#xe611;
- 
  分组 1375
  &#xe612;
- 
  分组 403
  &#xe60c;
- 
  分组 2241
  &#xe60d;
- 
  分组 1067
  &#xe60b;
- 
  分组 1928
  &#xe60a;
- 
  分组 342
  &#xe609;
- 
  分组 5
  &#xe608;
- 
  设置
  &#xe607;
- 
  分组 1565
  &#xe606;
- 
  交易账户
  &#xe602;
- 
  营销选中
  &#xe603;
- 
  可视化
  &#xe600;
- 
  用户
  &#xe601;

## Unicode 引用

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

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

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

Unicode 使用步骤如下：

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

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

- full
  .icon-full
- exit
  .icon-exit
- qiyong
  .icon-a-qiyong
- jinyong
  .icon-a-jinyong
- 退回申请
  .icon-tuihuishenqing
- mti-漏电监测
  .icon-mti-loudianjiance
- 关闭
  .icon-guanbi
- 启用
  .icon-a-fenzu1411
- 禁用
  .icon-a-fenzu1409
- 线路
  .icon-xianlu
- 集中器
  .icon-jizhongqi
- 路径 4 (1)
  .icon-a-lujing41
- 路径 4
  .icon-a-lujing4
- Electrocardiogram
  .icon-Electrocardiogram
- 分组 10
  .icon-hezha
- 路径 1 (1)
  .icon-bisuo
- 离线
  .icon-lixian
- 49
  .icon-dengpao
- 路径 6
  .icon-daunlu
- mti-漏电监测
  .icon-loudianjiance
- 路径 1
  .icon-guozai
- 分组 92
  .icon-a-fenzu92
- 用户
  .icon-yonghu2
- 故障
  .icon-guzhang
- 累计收益
  .icon-leijishouyi
- 发电量
  .icon-fadianliang
- 风机
  .icon-fengji
- 光伏-copy
  .icon-guangfu
- 减碳排放
  .icon-jiantanpaifang
- 合并
  .icon-hebing
- 分组 2
  .icon-a-fenzu2
- 箭头
  .icon-jiantou
- 分组 549
  .icon-a-fenzu549
- 关闭
  .icon-guanbi1
- 保护装置
  .icon-baohuzhuangzhi
- 配电房
  .icon-peidianfang
- 同心圆
  .icon-map-mark0
- 操控管理
  .icon-caokongguanli
- Cyber Monitoring
  .icon-a-CyberMonitoring
- Growth Chart
  .icon-a-GrowthChart
- Sales Growth
  .icon-a-SalesGrowth
- Trend Chat
  .icon-a-TrendChat
- Cloud Computer
  .icon-a-CloudComputer
- Cloud Infrastructure
  .icon-a-CloudInfrastructure
- Cloud Management
  .icon-a-CloudManagement
- Cloud Security
  .icon-a-CloudSecurity
- Dataserver
  .icon-Dataserver
- Volume Equalizer
  .icon-a-VolumeEqualizer
- Resource Management
  .icon-a-ResourceManagement1
- Graph Up
  .icon-a-GraphUp
- File Cabinet
  .icon-a-FileCabinet
- System Setting
  .icon-a-SystemSetting
- 同心圆-copy
  .icon-map-mark1
- 同心圆-copy-copy
  .icon-map-mark2-copy
- 首页
  .icon-shouye
- 定位
  .icon-dingwei
- 关闭
  .icon-guanbi2
- 处理状态
  .icon-chulizhuangtai
- 分组 302
  .icon-a-fenzu302
- 分组 1163
  .icon-a-fenzu1163
- 分组 449
  .icon-tuichu
- 分组 1565
  .icon-yonghu-yuan
- 密码
  .icon-mima
- 退出
  .icon-tuichu3
- icon_夜间-月亮
  .icon-yueliang
- 通知
  .icon-tongzhi
- 通知
  .icon-tongzhi1
- 通知
  .icon-tongzhi2
- 形状结合
  .icon-xingzhuangjiehe
- 系统管理
  .icon-xitongguanli
- 平台管理
  .icon-pingtaiguanli
- 湿度
  .icon-shidu
- 订单-全部订单
  .icon-dingdan-quanbudingdan
- 温度
  .icon-wendu
- 光照
  .icon-fengtian-guangzhao
- 风速
  .icon-fengsu
- 物联中心_normal
  .icon-wulianzhongxin_normal
- icon-home
  .icon-icon-1
- 分割线
  .icon-fengexian
- 取消-抽屉
  .icon-quxiao
- user_login
  .icon-a-xingzhuangjiehe1x
- passwd_login
  .icon-a-xingzhuangjiehe1x1
- 形状
  .icon-xingzhuang1
- 形状
  .icon-xingzhuang
- 分组 1865
  .icon-a-fenzu1865
- 分组 929
  .icon-confirm
- 分组 412
  .icon-a-fenzu412
- 分组 1753
  .icon-shuaxin
- 分组 2121
  .icon-download
- 分组 204
  .icon-upload
- 分组 463
  .icon-add
- 分组 423
  .icon-chongzhi
- 分组 1977
  .icon-setProtectControl
- 分组 610
  .icon-export
- 分组 614
  .icon-import
- 分组 249
  .icon-del
- 分组 1237
  .icon-setProtectValue
- 分组 2237
  .icon-setLightMode
- 分组 2085
  .icon-setTimeMode
- 分组 1739
  .icon-switchMode
- 分组 1375
  .icon-setTime
- 分组 403
  .icon-sousu
- 分组 2241
  .icon-a-fenzu2241
- 分组 1067
  .icon-openOrClose
- 分组 1928
  .icon-zhaoce
- 分组 342
  .icon-send
- 分组 5
  .icon-a-fenzu5
- 设置
  .icon-shezhi
- 分组 1565
  .icon-touxiang
- 交易账户
  .icon-jiaoyizhanghuguanli
- 营销选中
  .icon-yingxiaoxuanzhong
- 可视化
  .icon-a-lujing1
- 用户
  .icon-a-lujing11

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

- full
  #icon-full
- exit
  #icon-exit
- qiyong
  #icon-a-qiyong
- jinyong
  #icon-a-jinyong
- 退回申请
  #icon-tuihuishenqing
- mti-漏电监测
  #icon-mti-loudianjiance
- 关闭
  #icon-guanbi
- 启用
  #icon-a-fenzu1411
- 禁用
  #icon-a-fenzu1409
- 线路
  #icon-xianlu
- 集中器
  #icon-jizhongqi
- 路径 4 (1)
  #icon-a-lujing41
- 路径 4
  #icon-a-lujing4
- Electrocardiogram
  #icon-Electrocardiogram
- 分组 10
  #icon-hezha
- 路径 1 (1)
  #icon-bisuo
- 离线
  #icon-lixian
- 49
  #icon-dengpao
- 路径 6
  #icon-daunlu
- mti-漏电监测
  #icon-loudianjiance
- 路径 1
  #icon-guozai
- 分组 92
  #icon-a-fenzu92
- 用户
  #icon-yonghu2
- 故障
  #icon-guzhang
- 累计收益
  #icon-leijishouyi
- 发电量
  #icon-fadianliang
- 风机
  #icon-fengji
- 光伏-copy
  #icon-guangfu
- 减碳排放
  #icon-jiantanpaifang
- 合并
  #icon-hebing
- 分组 2
  #icon-a-fenzu2
- 箭头
  #icon-jiantou
- 分组 549
  #icon-a-fenzu549
- 关闭
  #icon-guanbi1
- 保护装置
  #icon-baohuzhuangzhi
- 配电房
  #icon-peidianfang
- 同心圆
  #icon-map-mark0
- 操控管理
  #icon-caokongguanli
- Cyber Monitoring
  #icon-a-CyberMonitoring
- Growth Chart
  #icon-a-GrowthChart
- Sales Growth
  #icon-a-SalesGrowth
- Trend Chat
  #icon-a-TrendChat
- Cloud Computer
  #icon-a-CloudComputer
- Cloud Infrastructure
  #icon-a-CloudInfrastructure
- Cloud Management
  #icon-a-CloudManagement
- Cloud Security
  #icon-a-CloudSecurity
- Dataserver
  #icon-Dataserver
- Volume Equalizer
  #icon-a-VolumeEqualizer
- Resource Management
  #icon-a-ResourceManagement1
- Graph Up
  #icon-a-GraphUp
- File Cabinet
  #icon-a-FileCabinet
- System Setting
  #icon-a-SystemSetting
- 同心圆-copy
  #icon-map-mark1
- 同心圆-copy-copy
  #icon-map-mark2-copy
- 首页
  #icon-shouye
- 定位
  #icon-dingwei
- 关闭
  #icon-guanbi2
- 处理状态
  #icon-chulizhuangtai
- 分组 302
  #icon-a-fenzu302
- 分组 1163
  #icon-a-fenzu1163
- 分组 449
  #icon-tuichu
- 分组 1565
  #icon-yonghu-yuan
- 密码
  #icon-mima
- 退出
  #icon-tuichu3
- icon_夜间-月亮
  #icon-yueliang
- 通知
  #icon-tongzhi
- 通知
  #icon-tongzhi1
- 通知
  #icon-tongzhi2
- 形状结合
  #icon-xingzhuangjiehe
- 系统管理
  #icon-xitongguanli
- 平台管理
  #icon-pingtaiguanli
- 湿度
  #icon-shidu
- 订单-全部订单
  #icon-dingdan-quanbudingdan
- 温度
  #icon-wendu
- 光照
  #icon-fengtian-guangzhao
- 风速
  #icon-fengsu
- 物联中心_normal
  #icon-wulianzhongxin_normal
- icon-home
  #icon-icon-1
- 分割线
  #icon-fengexian
- 取消-抽屉
  #icon-quxiao
- user_login
  #icon-a-xingzhuangjiehe1x
- passwd_login
  #icon-a-xingzhuangjiehe1x1
- 形状
  #icon-xingzhuang1
- 形状
  #icon-xingzhuang
- 分组 1865
  #icon-a-fenzu1865
- 分组 929
  #icon-confirm
- 分组 412
  #icon-a-fenzu412
- 分组 1753
  #icon-shuaxin
- 分组 2121
  #icon-download
- 分组 204
  #icon-upload
- 分组 463
  #icon-add
- 分组 423
  #icon-chongzhi
- 分组 1977
  #icon-setProtectControl
- 分组 610
  #icon-export
- 分组 614
  #icon-import
- 分组 249
  #icon-del
- 分组 1237
  #icon-setProtectValue
- 分组 2237
  #icon-setLightMode
- 分组 2085
  #icon-setTimeMode
- 分组 1739
  #icon-switchMode
- 分组 1375
  #icon-setTime
- 分组 403
  #icon-sousu
- 分组 2241
  #icon-a-fenzu2241
- 分组 1067
  #icon-openOrClose
- 分组 1928
  #icon-zhaoce
- 分组 342
  #icon-send
- 分组 5
  #icon-a-fenzu5
- 设置
  #icon-shezhi
- 分组 1565
  #icon-touxiang
- 交易账户
  #icon-jiaoyizhanghuguanli
- 营销选中
  #icon-yingxiaoxuanzhong
- 可视化
  #icon-a-lujing1
- 用户
  #icon-a-lujing11

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