• full
    
  • exit
    
  • qiyong
    
  • jinyong
    
  • 退回申请
    
  • mti-漏电监测
    
  • 关闭
    
  • 启用
    
  • 禁用
    
  • 线路
    
  • 集中器
    
  • 路径 4 (1)
    
  • 路径 4
    
  • Electrocardiogram
    
  • 分组 10
    
  • 路径 1 (1)
    
  • 离线
    
  • 49
    
  • 路径 6
    
  • mti-漏电监测
    
  • 路径 1
    
  • 分组 92
    
  • 用户
    
  • 故障
    
  • 累计收益
    
  • 发电量
    
  • 风机
    
  • 光伏-copy
    
  • 减碳排放
    
  • 合并
    
  • 分组 2
    
  • 箭头
    
  • 分组 549
    
  • 关闭
    
  • 保护装置
    
  • 配电房
    
  • 同心圆
    
  • 操控管理
    
  • Cyber Monitoring
    
  • Growth Chart
    
  • Sales Growth
    
  • Trend Chat
    
  • Cloud Computer
    
  • Cloud Infrastructure
    
  • Cloud Management
    
  • Cloud Security
    
  • Dataserver
    
  • Volume Equalizer
    
  • Resource Management
    
  • Graph Up
    
  • File Cabinet
    
  • System Setting
    
  • 同心圆-copy
    
  • 同心圆-copy-copy
    
  • 首页
    
  • 定位
    
  • 关闭
    
  • 处理状态
    
  • 分组 302
    
  • 分组 1163
    
  • 分组 449
    
  • 分组 1565
    
  • 密码
    
  • 退出
    
  • icon_夜间-月亮
    
  • 通知
    
  • 通知
    
  • 𐇔
    通知
    𐇔
  • 形状结合
    
  • 系统管理
    
  • 平台管理
    
  • 湿度
    
  • 订单-全部订单
    
  • 温度
    
  • 光照
    
  • 风速
    
  • 物联中心_normal
    
  • icon-home
    
  • 分割线
    
  • 取消-抽屉
    
  • user_login
    
  • passwd_login
    
  • 形状
    
  • 形状
    
  • 分组 1865
    
  • 分组 929
    
  • 分组 412
    
  • 分组 1753
    
  • 分组 2121
    
  • 分组 204
    
  • 分组 463
    
  • 分组 423
    
  • 分组 1977
    
  • 分组 610
    
  • 分组 614
    
  • 分组 249
    
  • 分组 1237
    
  • 分组 2237
    
  • 分组 2085
    
  • 分组 1739
    
  • 分组 1375
    
  • 分组 403
    
  • 分组 2241
    
  • 分组 1067
    
  • 分组 1928
    
  • 分组 342
    
  • 分组 5
    
  • 设置
    
  • 分组 1565
    
  • 交易账户
    
  • 营销选中
    
  • 可视化
    
  • 用户
    

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>