• 弯曲的
    
  • 人员
    
  • 轮船
    
  • 职业健康
    
  • 预警
    
  • 工单确认
    
  • 停机管理
    
  • 列表形式
    
  • 双列列表
    
  • 健康险
    
  • 完成
    
  • 切换
    
  • 序号-旗帜
    
  • P
    
  • 累计发电量
    
  • 发电量
    
  • 日发电量
    
  • 电网
    
  • 直线_图形对象_jurassic
    
  • 圆圈
    
  • 虚线
    
  • 风电
    
  • 旋转角度
    
  • 空列表
    
  • 空列表
    
  • 218下载、导入
    
  • 浓云
    
  • 电机
    
  • 发电机
    
  • 风轮机
    
  • 立柱
    
  • 传动零件
    
  • 变流器
    
  • 风电
    
  • 平台数量
    
  • 风电场
    
  • 容量
    
  • 风电
    
  • 风电
    
  • 风力发电机-填充
    
  • 保存
    
  • 全屏
    
  • 通知
    
  • V2无功功率_01
    
  • V2有功功率_01
    
  • 无功功率
    
  • 自动控制
    
  • 容量管理
    
  • 自动控制
    
  • 风机台数
    
  • dashboard-24
    
  • V1无功功率_01
    
  • 日发电量
    
  • 年发电量
    
  • 月发电量
    
  • 有功功率
    
  • 风速
    
  • 风向
    
  • 风向
    
  • 风向
    
  • 2-06计划发电量
    
  • 发电量
    
  • 有功功率
    
  • 垃圾发电
    
  • 地图
    
  • 电池房
    
  • 风速
    
  • 累计发电量
    
  • 日发电量
    
  • 年发电量
    
  • 月发电量
    
  • 发电量统计
    
  • 有功功率
    
  • 电池-充电
    
  • 风电塔
    
  • 发电量后评估
    
  • 电池
    

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>