• 编辑
    
  • 删除
    
  • 退出
    
  • separators
    
  • 退出
    
  • 查找
    
  • 退出
    
  • 插入行
    
  • 布局
    
  • 版本升级
    
  • SEN004
    
  • 撤回
    
  • 粘贴
    
  • 重做
    
  • 219上传、导出
    
  • 240显示、可见
    
  • 328退出全屏
    
  • 插入行
    
  • 删除行
    
  • 删除
    
  • 文件删除
    
  • 导出
    
  • 设置
    
  • 粘贴
    
  • 上移一层
    
  • 下移一层
    
  • 筛选
    
  • 复制
    
  • 编辑
    
  • 数据看板
    
  • 导出
    
  • 导入
    
  • 刷新
    
  • 隐藏试卷概览
    
  • icon_设置
    
  • 数据探索(数据中心)—模型管理
    
  • 导出
    
  • 粘贴
    
  • 还原
    
  • 显示
    
  • 全屏
    
  • 筛选
    
  • 删除
    
  • 全屏
    
  • 眼睛_显示
    
  • 显示
    
  • 删除
    
  • 导入
    
  • 复制、备份
    
  • 隐藏、不可见
    
  • 复制
    
  • 隐藏
    
  • 撤回色块
    
  • 数据挖掘
    
  • 云端刷新
    
  • delete-line
    
  • 复制
    
  • 删除
    
  • 恢复备份
    
  • 控制
    
  • 编辑色块
    
  • 计划
    
  • 备份
    
  • 导出
    
  • 还原
    
  • 计划管理
    
  • 16gl-comma
    
  • 布局
    
  • 保存
    
  • 复制
    
  • 编辑
    
  • 计划
    
  • 撤回
    
  • 筛选
    
  • 数据开放、数据共享、云数据
    
  • print
    
  • 重做
    
  • 计划调度
    
  • 向左隐藏
    
  • 编辑表单_编辑录入操作_jurassic
    
  • 编辑数据_编辑录入操作_jurassic
    
  • 插入行
    
  • 隐藏
    
  • 复制
    
  • 保存
    
  • 调整
    
  • 恢复删除
    
  • 布局
    
  • 还原
    
  • 计划
    
  • 刷新
    
  • 筛选
    
  • 28-插入行
    
  • 查找
    
  • 布局
    
  • 要货计划
    
  • 重做
    
  • 还原
    
  • 删除行
    
  • 查找
    
  • 大数据,科技,数据流转
    
  • 数据库,数据
    
  • 数据库,数据
    
  • 
    退出,出
    
  • 调节
    
  • 重做
    
  • 备份列表
    
  • 批量备份
    
  • 数据-财务数据
    
  • 上移一层
    
  • 添加计划表
    
  • 降级
    
  • 删除行
    
  • 升级
    
  • 重做
    
  • 主数据申请-数据分析-05
    
  • 主数据申请-数据分析-02
    
  • 上移一层
    
  • 下移一层
    
  • 恢复
    
  • 撤回
    
  • 调整
    
  • 调整
    
  • 大数据、数据统计-02
    
  • 删除
    
  • 隐藏,不显示
    
  • 逗号@3x
    
  • 开关
    
  • 15J还原
    
  • 复制文件
    
  • 竖状图
    
  • 折线图
    
  • 跟踪目标设置
    
  • 编辑
    
  • 垂直缩放
    
  • 数据统计
    
  • 删除_填充
    
  • 设置_填充
    
  • 编辑
    
  • 编辑
    

Unicode 引用


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

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

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

Unicode 使用步骤如下:

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

@font-face {
  font-family: 'iconfont';
  src: url('iconfont.woff2?t=1655888564132') format('woff2'),
       url('iconfont.woff?t=1655888564132') format('woff'),
       url('iconfont.ttf?t=1655888564132') format('truetype');
}

第二步:定义使用 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-bianji3
  • 删除
    .icon-shanchu
  • 退出
    .icon-084tuichu
  • separators
    .icon-separators
  • 退出
    .icon-tuichu
  • 查找
    .icon-chazhao
  • 退出
    .icon-tuichu1
  • 插入行
    .icon-charuxing
  • 布局
    .icon-ai211
  • 版本升级
    .icon-banbenshengji
  • SEN004
    .icon-sen004
  • 撤回
    .icon-withdraw
  • 粘贴
    .icon-niantie
  • 重做
    .icon-zhongzuo
  • 219上传、导出
    .icon-shangchuandaochu
  • 240显示、可见
    .icon-xianshikejian
  • 328退出全屏
    .icon-tuichuquanping
  • 插入行
    .icon-charuhang
  • 删除行
    .icon-shanchuhang
  • 删除
    .icon-shanchu1
  • 文件删除
    .icon-wenjianshanchu
  • 导出
    .icon-daochu
  • 设置
    .icon-shezhi
  • 粘贴
    .icon-niantie1
  • 上移一层
    .icon-shangyiyiceng
  • 下移一层
    .icon-xiayiyiceng
  • 筛选
    .icon-shaixuan
  • 复制
    .icon-fuzhi
  • 编辑
    .icon-bianji4
  • 数据看板
    .icon-shujukanban
  • 导出
    .icon-daochu1
  • 导入
    .icon-daoru
  • 刷新
    .icon-shuaxin
  • 隐藏试卷概览
    .icon-yincangshijuangailan
  • icon_设置
    .icon-icon_shezhi
  • 数据探索(数据中心)—模型管理
    .icon-shujutansuoshujuzhongxinmoxingguanli
  • 导出
    .icon-daochu2
  • 粘贴
    .icon-niantie2
  • 还原
    .icon-restore
  • 显示
    .icon-xianshi
  • 全屏
    .icon-quanping
  • 筛选
    .icon-shaixuan1
  • 删除
    .icon-shanchu2
  • 全屏
    .icon-quanping1
  • 眼睛_显示
    .icon-yanjing_xianshi
  • 显示
    .icon-xianshi1
  • 删除
    .icon-shanchu3
  • 导入
    .icon-daoru1
  • 复制、备份
    .icon-fuzhibeifen
  • 隐藏、不可见
    .icon-yincangbukejian
  • 复制
    .icon-copy
  • 隐藏
    .icon-yincang
  • 撤回色块
    .icon-chehuisekuai
  • 数据挖掘
    .icon-shujuwajue
  • 云端刷新
    .icon-yunduanshuaxin
  • delete-line
    .icon-shanchuhang1
  • 复制
    .icon-fuzhi1
  • 删除
    .icon-shanchu4
  • 恢复备份
    .icon-huifubeifen
  • 控制
    .icon-kongzhi
  • 编辑色块
    .icon-bianjisekuai
  • 计划
    .icon-jihua
  • 备份
    .icon-beifen
  • 导出
    .icon-daochu3
  • 还原
    .icon-huanyuan
  • 计划管理
    .icon-jihuaguanli
  • 16gl-comma
    .icon-16gl-comma
  • 布局
    .icon-buju
  • 保存
    .icon-baocun
  • 复制
    .icon-fuzhi2
  • 编辑
    .icon-bianji5
  • 计划
    .icon-jihua1
  • 撤回
    .icon-chehui
  • 筛选
    .icon-shaixuan2
  • 数据开放、数据共享、云数据
    .icon-icon_xinyong_xianxing_jijin-
  • print
    .icon-print
  • 重做
    .icon-zhongzuo1
  • 计划调度
    .icon-jihuatiaodu
  • 向左隐藏
    .icon-xiangzuoyincang
  • 编辑表单_编辑录入操作_jurassic
    .icon-jurassic_edit-form
  • 编辑数据_编辑录入操作_jurassic
    .icon-jurassic_edit-data
  • 插入行
    .icon-charuhang1
  • 隐藏
    .icon-yincang1
  • 复制
    .icon-fuzhi3
  • 保存
    .icon-baocun1
  • 调整
    .icon-tiaozheng
  • 恢复删除
    .icon-huifushanchu
  • 布局
    .icon-buju1
  • 还原
    .icon-huanyuan1
  • 计划
    .icon-jihua2
  • 刷新
    .icon-shuaxin1
  • 筛选
    .icon-shaixuan3
  • 28-插入行
    .icon--charuhang
  • 查找
    .icon-chazhao1
  • 布局
    .icon-buju2
  • 要货计划
    .icon-yaohuojihua
  • 重做
    .icon-zhongzuo2
  • 还原
    .icon-huanyuan2
  • 删除行
    .icon-shanchuhang2
  • 查找
    .icon-chazhao2
  • 大数据,科技,数据流转
    .icon-bigdata
  • 数据库,数据
    .icon-odbc-full
  • 数据库,数据
    .icon-odbc
  • 退出,出
    .icon-exit-full
  • 调节
    .icon-adjust-01
  • 重做
    .icon-redo
  • 备份列表
    .icon-beifenliebiao
  • 批量备份
    .icon-piliangbeifen
  • 数据-财务数据
    .icon-shuju-caiwushuju
  • 上移一层
    .icon-shangyiyiceng1
  • 添加计划表
    .icon-tianjiajihuabiao
  • 降级
    .icon-jiangji
  • 删除行
    .icon-shanchuhang3
  • 升级
    .icon-shengji
  • 重做
    .icon-zhongzuo3
  • 主数据申请-数据分析-05
    .icon-zhushujushenqing-shujufenxi-05
  • 主数据申请-数据分析-02
    .icon-zhushujushenqing-shujufenxi-02
  • 上移一层
    .icon-shangyiyiceng2
  • 下移一层
    .icon-xiayiyiceng1
  • 恢复
    .icon-huifu
  • 撤回
    .icon-chehui1
  • 调整
    .icon-tiaozheng1
  • 调整
    .icon-tiaozheng2
  • 大数据、数据统计-02
    .icon-a-dashujushujutongji-02
  • 删除
    .icon-shanchu5
  • 隐藏,不显示
    .icon-YinCang
  • 逗号@3x
    .icon-a-douhao3x
  • 开关
    .icon-kaiguan
  • 15J还原
    .icon-a-15Jhuanyuan
  • 复制文件
    .icon-fuzhiwenjian
  • 竖状图
    .icon-shuzhuangtu
  • 折线图
    .icon-zhexiantu
  • 跟踪目标设置
    .icon-genzongmubiaoshezhi
  • 编辑
    .icon-bianji
  • 垂直缩放
    .icon-chuizhisuofang
  • 数据统计
    .icon-shujutongji
  • 删除_填充
    .icon-shanchutianchong
  • 设置_填充
    .icon-shezhitianchong
  • 编辑
    .icon-bianji1
  • 编辑
    .icon-bianji2

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-bianji3
  • 删除
    #icon-shanchu
  • 退出
    #icon-084tuichu
  • separators
    #icon-separators
  • 退出
    #icon-tuichu
  • 查找
    #icon-chazhao
  • 退出
    #icon-tuichu1
  • 插入行
    #icon-charuxing
  • 布局
    #icon-ai211
  • 版本升级
    #icon-banbenshengji
  • SEN004
    #icon-sen004
  • 撤回
    #icon-withdraw
  • 粘贴
    #icon-niantie
  • 重做
    #icon-zhongzuo
  • 219上传、导出
    #icon-shangchuandaochu
  • 240显示、可见
    #icon-xianshikejian
  • 328退出全屏
    #icon-tuichuquanping
  • 插入行
    #icon-charuhang
  • 删除行
    #icon-shanchuhang
  • 删除
    #icon-shanchu1
  • 文件删除
    #icon-wenjianshanchu
  • 导出
    #icon-daochu
  • 设置
    #icon-shezhi
  • 粘贴
    #icon-niantie1
  • 上移一层
    #icon-shangyiyiceng
  • 下移一层
    #icon-xiayiyiceng
  • 筛选
    #icon-shaixuan
  • 复制
    #icon-fuzhi
  • 编辑
    #icon-bianji4
  • 数据看板
    #icon-shujukanban
  • 导出
    #icon-daochu1
  • 导入
    #icon-daoru
  • 刷新
    #icon-shuaxin
  • 隐藏试卷概览
    #icon-yincangshijuangailan
  • icon_设置
    #icon-icon_shezhi
  • 数据探索(数据中心)—模型管理
    #icon-shujutansuoshujuzhongxinmoxingguanli
  • 导出
    #icon-daochu2
  • 粘贴
    #icon-niantie2
  • 还原
    #icon-restore
  • 显示
    #icon-xianshi
  • 全屏
    #icon-quanping
  • 筛选
    #icon-shaixuan1
  • 删除
    #icon-shanchu2
  • 全屏
    #icon-quanping1
  • 眼睛_显示
    #icon-yanjing_xianshi
  • 显示
    #icon-xianshi1
  • 删除
    #icon-shanchu3
  • 导入
    #icon-daoru1
  • 复制、备份
    #icon-fuzhibeifen
  • 隐藏、不可见
    #icon-yincangbukejian
  • 复制
    #icon-copy
  • 隐藏
    #icon-yincang
  • 撤回色块
    #icon-chehuisekuai
  • 数据挖掘
    #icon-shujuwajue
  • 云端刷新
    #icon-yunduanshuaxin
  • delete-line
    #icon-shanchuhang1
  • 复制
    #icon-fuzhi1
  • 删除
    #icon-shanchu4
  • 恢复备份
    #icon-huifubeifen
  • 控制
    #icon-kongzhi
  • 编辑色块
    #icon-bianjisekuai
  • 计划
    #icon-jihua
  • 备份
    #icon-beifen
  • 导出
    #icon-daochu3
  • 还原
    #icon-huanyuan
  • 计划管理
    #icon-jihuaguanli
  • 16gl-comma
    #icon-16gl-comma
  • 布局
    #icon-buju
  • 保存
    #icon-baocun
  • 复制
    #icon-fuzhi2
  • 编辑
    #icon-bianji5
  • 计划
    #icon-jihua1
  • 撤回
    #icon-chehui
  • 筛选
    #icon-shaixuan2
  • 数据开放、数据共享、云数据
    #icon-icon_xinyong_xianxing_jijin-
  • print
    #icon-print
  • 重做
    #icon-zhongzuo1
  • 计划调度
    #icon-jihuatiaodu
  • 向左隐藏
    #icon-xiangzuoyincang
  • 编辑表单_编辑录入操作_jurassic
    #icon-jurassic_edit-form
  • 编辑数据_编辑录入操作_jurassic
    #icon-jurassic_edit-data
  • 插入行
    #icon-charuhang1
  • 隐藏
    #icon-yincang1
  • 复制
    #icon-fuzhi3
  • 保存
    #icon-baocun1
  • 调整
    #icon-tiaozheng
  • 恢复删除
    #icon-huifushanchu
  • 布局
    #icon-buju1
  • 还原
    #icon-huanyuan1
  • 计划
    #icon-jihua2
  • 刷新
    #icon-shuaxin1
  • 筛选
    #icon-shaixuan3
  • 28-插入行
    #icon--charuhang
  • 查找
    #icon-chazhao1
  • 布局
    #icon-buju2
  • 要货计划
    #icon-yaohuojihua
  • 重做
    #icon-zhongzuo2
  • 还原
    #icon-huanyuan2
  • 删除行
    #icon-shanchuhang2
  • 查找
    #icon-chazhao2
  • 大数据,科技,数据流转
    #icon-bigdata
  • 数据库,数据
    #icon-odbc-full
  • 数据库,数据
    #icon-odbc
  • 退出,出
    #icon-exit-full
  • 调节
    #icon-adjust-01
  • 重做
    #icon-redo
  • 备份列表
    #icon-beifenliebiao
  • 批量备份
    #icon-piliangbeifen
  • 数据-财务数据
    #icon-shuju-caiwushuju
  • 上移一层
    #icon-shangyiyiceng1
  • 添加计划表
    #icon-tianjiajihuabiao
  • 降级
    #icon-jiangji
  • 删除行
    #icon-shanchuhang3
  • 升级
    #icon-shengji
  • 重做
    #icon-zhongzuo3
  • 主数据申请-数据分析-05
    #icon-zhushujushenqing-shujufenxi-05
  • 主数据申请-数据分析-02
    #icon-zhushujushenqing-shujufenxi-02
  • 上移一层
    #icon-shangyiyiceng2
  • 下移一层
    #icon-xiayiyiceng1
  • 恢复
    #icon-huifu
  • 撤回
    #icon-chehui1
  • 调整
    #icon-tiaozheng1
  • 调整
    #icon-tiaozheng2
  • 大数据、数据统计-02
    #icon-a-dashujushujutongji-02
  • 删除
    #icon-shanchu5
  • 隐藏,不显示
    #icon-YinCang
  • 逗号@3x
    #icon-a-douhao3x
  • 开关
    #icon-kaiguan
  • 15J还原
    #icon-a-15Jhuanyuan
  • 复制文件
    #icon-fuzhiwenjian
  • 竖状图
    #icon-shuzhuangtu
  • 折线图
    #icon-zhexiantu
  • 跟踪目标设置
    #icon-genzongmubiaoshezhi
  • 编辑
    #icon-bianji
  • 垂直缩放
    #icon-chuizhisuofang
  • 数据统计
    #icon-shujutongji
  • 删除_填充
    #icon-shanchutianchong
  • 设置_填充
    #icon-shezhitianchong
  • 编辑
    #icon-bianji1
  • 编辑
    #icon-bianji2

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>