#

- 
  弯曲的
  &#xe711;
- 
  人员
  &#xe646;
- 
  轮船
  &#xe673;
- 
  职业健康
  &#xe635;
- 
  预警
  &#xe717;
- 
  工单确认
  &#xec36;
- 
  停机管理
  &#xe60d;
- 
  列表形式
  &#xe742;
- 
  双列列表
  &#xe6e5;
- 
  健康险
  &#xe626;
- 
  完成
  &#xe602;
- 
  切换
  &#xe657;
- 
  序号-旗帜
  &#xe779;
- 
  P
  &#xe6c4;
- 
  累计发电量
  &#xe6c9;
- 
  发电量
  &#xe79e;
- 
  日发电量
  &#xe61f;
- 
  电网
  &#xe829;
- 
  直线_图形对象_jurassic
  &#xe68d;
- 
  圆圈
  &#xeb74;
- 
  虚线
  &#xebde;
- 
  风电
  &#xe74c;
- 
  旋转角度
  &#xedd6;
- 
  空列表
  &#xe70e;
- 
  空列表
  &#xe645;
- 
  218下载、导入
  &#xe8c6;
- 
  浓云
  &#xe601;
- 
  电机
  &#xe68b;
- 
  发电机
  &#xe65b;
- 
  风轮机
  &#xe6ae;
- 
  立柱
  &#xe81b;
- 
  传动零件
  &#xe625;
- 
  变流器
  &#xe6c1;
- 
  风电
  &#xe600;
- 
  平台数量
  &#xe606;
- 
  风电场
  &#xe6ad;
- 
  容量
  &#xe630;
- 
  风电
  &#xe623;
- 
  风电
  &#xe64c;
- 
  风力发电机-填充
  &#xe671;
- 
  保存
  &#xec09;
- 
  全屏
  &#xec13;
- 
  通知
  &#xe61d;
- 
  V2无功功率_01
  &#xe636;
- 
  V2有功功率_01
  &#xe637;
- 
  无功功率
  &#xe665;
- 
  自动控制
  &#xe656;
- 
  容量管理
  &#xe627;
- 
  自动控制
  &#xe663;
- 
  风机台数
  &#xe603;
- 
  dashboard-24
  &#xe6ea;
- 
  V1无功功率_01
  &#xe62d;
- 
  日发电量
  &#xe7a0;
- 
  年发电量
  &#xe7a1;
- 
  月发电量
  &#xe7a4;
- 
  有功功率
  &#xe615;
- 
  风速
  &#xe605;
- 
  风向
  &#xe670;
- 
  风向
  &#xe62a;
- 
  风向
  &#xe691;
- 
  2-06计划发电量
  &#xe7e6;
- 
  发电量
  &#xe607;
- 
  有功功率
  &#xe971;
- 
  垃圾发电
  &#xe641;
- 
  地图
  &#xe8ad;
- 
  电池房
  &#xe618;
- 
  风速
  &#xe782;
- 
  累计发电量
  &#xe667;
- 
  日发电量
  &#xe631;
- 
  年发电量
  &#xe632;
- 
  月发电量
  &#xe633;
- 
  发电量统计
  &#xe66c;
- 
  有功功率
  &#xe662;
- 
  电池-充电
  &#xe7a3;
- 
  风电塔
  &#xe74a;
- 
  发电量后评估
  &#xe634;
- 
  电池
  &#xe604;

## Unicode 引用

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

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

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

Unicode 使用步骤如下：

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

    @font-face {
      font-family: 'iconfont';
      src: url('iconfont.eot?t=1656642732130'); /* IE9 */
      src: url('iconfont.eot?t=1656642732130#iefix') format('embedded-opentype'), /* IE6-IE8 */
           url('iconfont.woff2?t=1656642732130') format('woff2'),
           url('iconfont.woff?t=1656642732130') format('woff'),
           url('iconfont.ttf?t=1656642732130') format('truetype'),
           url('iconfont.svg?t=1656642732130#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-wanqudecurved14
- 人员
  .icon-renyuan
- 轮船
  .icon-lunchuan
- 职业健康
  .icon-zhiyejiankang
- 预警
  .icon-yujing
- 工单确认
  .icon-gongdanqueren
- 停机管理
  .icon-tingjiguanli
- 列表形式
  .icon-liebiaoxingshi
- 双列列表
  .icon-shuanglieliebiao
- 健康险
  .icon-jiankangxian
- 完成
  .icon-wancheng
- 切换
  .icon-qiehuan
- 序号-旗帜
  .icon-qizhi
- P
  .icon-power
- 累计发电量
  .icon-leijifadianliang1
- 发电量
  .icon-fadianliang2
- 日发电量
  .icon-rifadianliang1
- 电网
  .icon-dianwang
- 直线_图形对象_jurassic
  .icon-jurassic_line
- 圆圈
  .icon-round
- 虚线
  .icon-dash
- 风电
  .icon-fengdian3
- 旋转角度
  .icon-xuanzhuanjiaodu
- 空列表
  .icon-empty2
- 空列表
  .icon-empty
- 218下载、导入
  .icon-xiazaidaoru
- 浓云
  .icon-nongyun
- 电机
  .icon-dianji
- 发电机
  .icon-fadianji
- 风轮机
  .icon-fenglunji
- 立柱
  .icon-lizhu
- 传动零件
  .icon-chuandonglingjian
- 变流器
  .icon-bianliuqi
- 风电
  .icon-fengdian2
- 平台数量
  .icon-pingtaishuliang
- 风电场
  .icon-fengdianchang
- 容量
  .icon-yanjizhushou-shangchuan_rongliang
- 风电
  .icon-fengdian
- 风电
  .icon-fengdian1
- 风力发电机-填充
  .icon-fenglifadianji-tianchong
- 保存
  .icon-save
- 全屏
  .icon-fullscreen
- 通知
  .icon-message
- V2无功功率_01
  .icon-Qpower
- V2有功功率_01
  .icon-Ppower
- 无功功率
  .icon-wugonggongshuai
- 自动控制
  .icon-zidongkongzhi
- 容量管理
  .icon-rongliangguanli
- 自动控制
  .icon-zidongxunjian
- 风机台数
  .icon-fengjitaishu
- dashboard-24
  .icon-dashboard
- V1无功功率_01
  .icon-wugonggonglv
- 日发电量
  .icon-rifadianliang
- 年发电量
  .icon-nianfadianliang
- 月发电量
  .icon-yuefadianliang
- 有功功率
  .icon-yougonggongshuai
- 风速
  .icon-fengsu
- 风向
  .icon-fengxiang
- 风向
  .icon-fengxiang1
- 风向
  .icon-fengxiang2
- 2-06计划发电量
  .icon-electricquantity_plan
- 发电量
  .icon-fadianliang
- 有功功率
  .icon-yougonggonglv
- 垃圾发电
  .icon-lajifadian
- 地图
  .icon-ditu
- 电池房
  .icon-dianchifang
- 风速
  .icon-fengsu1
- 累计发电量
  .icon-leijifadianliang
- 日发电量
  .icon-rifadianliang2
- 年发电量
  .icon-nianfadianliang2
- 月发电量
  .icon-yuefadianliang2
- 发电量统计
  .icon-fadianliangtongji
- 有功功率
  .icon-yougonggongshuai1
- 电池-充电
  .icon-dianchi-chongdian
- 风电塔
  .icon-fengdianta
- 发电量后评估
  .icon-fadianlianghoupinggu
- 电池
  .icon-dianchi

## 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-wanqudecurved14
- 人员
  #icon-renyuan
- 轮船
  #icon-lunchuan
- 职业健康
  #icon-zhiyejiankang
- 预警
  #icon-yujing
- 工单确认
  #icon-gongdanqueren
- 停机管理
  #icon-tingjiguanli
- 列表形式
  #icon-liebiaoxingshi
- 双列列表
  #icon-shuanglieliebiao
- 健康险
  #icon-jiankangxian
- 完成
  #icon-wancheng
- 切换
  #icon-qiehuan
- 序号-旗帜
  #icon-qizhi
- P
  #icon-power
- 累计发电量
  #icon-leijifadianliang1
- 发电量
  #icon-fadianliang2
- 日发电量
  #icon-rifadianliang1
- 电网
  #icon-dianwang
- 直线_图形对象_jurassic
  #icon-jurassic_line
- 圆圈
  #icon-round
- 虚线
  #icon-dash
- 风电
  #icon-fengdian3
- 旋转角度
  #icon-xuanzhuanjiaodu
- 空列表
  #icon-empty2
- 空列表
  #icon-empty
- 218下载、导入
  #icon-xiazaidaoru
- 浓云
  #icon-nongyun
- 电机
  #icon-dianji
- 发电机
  #icon-fadianji
- 风轮机
  #icon-fenglunji
- 立柱
  #icon-lizhu
- 传动零件
  #icon-chuandonglingjian
- 变流器
  #icon-bianliuqi
- 风电
  #icon-fengdian2
- 平台数量
  #icon-pingtaishuliang
- 风电场
  #icon-fengdianchang
- 容量
  #icon-yanjizhushou-shangchuan_rongliang
- 风电
  #icon-fengdian
- 风电
  #icon-fengdian1
- 风力发电机-填充
  #icon-fenglifadianji-tianchong
- 保存
  #icon-save
- 全屏
  #icon-fullscreen
- 通知
  #icon-message
- V2无功功率_01
  #icon-Qpower
- V2有功功率_01
  #icon-Ppower
- 无功功率
  #icon-wugonggongshuai
- 自动控制
  #icon-zidongkongzhi
- 容量管理
  #icon-rongliangguanli
- 自动控制
  #icon-zidongxunjian
- 风机台数
  #icon-fengjitaishu
- dashboard-24
  #icon-dashboard
- V1无功功率_01
  #icon-wugonggonglv
- 日发电量
  #icon-rifadianliang
- 年发电量
  #icon-nianfadianliang
- 月发电量
  #icon-yuefadianliang
- 有功功率
  #icon-yougonggongshuai
- 风速
  #icon-fengsu
- 风向
  #icon-fengxiang
- 风向
  #icon-fengxiang1
- 风向
  #icon-fengxiang2
- 2-06计划发电量
  #icon-electricquantity_plan
- 发电量
  #icon-fadianliang
- 有功功率
  #icon-yougonggonglv
- 垃圾发电
  #icon-lajifadian
- 地图
  #icon-ditu
- 电池房
  #icon-dianchifang
- 风速
  #icon-fengsu1
- 累计发电量
  #icon-leijifadianliang
- 日发电量
  #icon-rifadianliang2
- 年发电量
  #icon-nianfadianliang2
- 月发电量
  #icon-yuefadianliang2
- 发电量统计
  #icon-fadianliangtongji
- 有功功率
  #icon-yougonggongshuai1
- 电池-充电
  #icon-dianchi-chongdian
- 风电塔
  #icon-fengdianta
- 发电量后评估
  #icon-fadianlianghoupinggu
- 电池
  #icon-dianchi

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