• 下划线
    
  • 下划线
    
  • 条形图
    
  • 表格
    
  • 分组柱状图
    
  • 矩形
    
  • 仪表盘
    
  • 文本
    
  • 圆形
    
  • 曲线图
    
  • 时间
    
  • 变量值
    
  • 柱状图
    
  • 数据卡片
    
  • 计量器
    
  • 网页
    
  • 饼状图
    
  • 数据列表
    
  • 视频监控
    
  • 指示灯
    
  • 查看操作记录
    
  • 查看反应结果
    
  • 选择显示数据
    
  • 工艺质量追溯查询
    
  • 当前暂无进行中任务
    
  • 直线
    
  • 工艺质量监控
    
  • 优化调整
    
  • 低于
    
  • 高于
    
  • 启动时间
    
  • 开始时间
    
  • 结束时间
    
  • 保存
    
  • 设置
    
  • 箭头向右
    
  • 警示
    
  • 该工序下未关联机组
    
  • 删除
    
  • 当前查询条件下无任务
    
  • 查看异常记录
    
  • 重命名
    
  • 请先选择数据点查看曲线
    
  • 新增查询条件
    
  • 信息
    
  • 工序
    
  • 刷新
    
  • 编号
    
  • 新增工序
    
  • 进行中工序
    
  • 进入编辑界面
    
  • 产品
    
  • 创建分支任务
    
  • 时间
    
  • 添加自动触发条件
    
  • 移除工序
    
  • 完成工序
    
  • 添加工序
    
  • 请选择工艺路径
    
  • 清空触发条件
    
  • 选择数据点
    
  • 三角形
    
  • 新增故障分析报告
    
  • 提阿甲时域频域分析条件
    
  • 收起
    
  • 展开
    
  • 切换关联
    
  • 暂无历史趋势分析图
    
  • 解除关联
    
  • 最大
    
  • 添加关联
    
  • 设备诊断
    
  • 删除
    
  • 暂未导入文件
    
  • CSV文件icon
    
  • CSV导入
    
  • 最小备份
    
  • 最小
    
  • 斜体
    
  • 加粗
    
  • 左对齐
    
  • 右对齐
    
  • justify
    
  • 居中对齐
    
  • 
  • 
  • 全屏
    
  • 上对齐
    
  • 纵向居中
    
  • 下对齐
    
  • 右对齐
    
  • 左对齐
    
  • 横向居中
    
  • 纵向阵列
    
  • 横向阵列
    
  • 配置看板
    
  • 解除编组
    
  • 编组
    
  • 解除编组
    
  • 编组
    
  • 置于顶层
    
  • 前置一层
    
  • 后置一层
    
  • 置于底层
    
  • 粘贴
    
  • 复制
    
  • 剪切
    
  • 撤销
    
  • 连线
    
  • 恢复
    
  • 退出
    
  • 自定义
    
  • 视频监控
    
  • 网页
    
  • 计量器
    
  • 饼状图
    
  • 数据列表
    
  • 柱状图
    
  • 曲线图
    
  • 指示灯
    
  • 数据卡片
    
  • 仪表盘
    
  • 圆形
    
  • 时间
    
  • 变量值
    
  • 矩形
    
  • 文本
    
  • 配置看板无阴影
    
  • 复制无阴影
    
  • 信息无阴影
    
  • 第三方数据融合
    
  • 详情
    
  • 已选择
    
  • 没添加
    
  • 添加
    
  • 已配置
    
  • 未选择表格
    
  • 新建任务
    
  • 回到顶部
    
  • 设备管理
    
  • 删除
    
  • 已读
    
  • 按组织选择
    
  • 编辑
    
  • 设置
    
  • 系统预设字段
    
  • 自定义字段
    
  • 删除选择
    
  • 恢复默认设置
    
  • 取消全选
    
  • 选择全部
    
  • 设备管理
    
  • 获取当前数据点数据
    
  • 获取当前数据点数据
    
  • 切换关联
    
  • 解除关联
    
  • 导航条报警查看
    
  • 查看下次任务时间
    
  • 点击关联数据点_禁用
    
  • 报警等级_点亮
    
  • 点击关联数据点
    
  • 报警等级_未点亮
    
  • 文件
    
  • 开始反馈
    
  • 取消反馈
    
  • 编辑反馈
    
  • 点击关注
    
  • 取消关注
    
  • 查看详情
    
  • 健康风险项
    
  • 报警次数
    
  • 暂无数据
    
  • 设备作业率
    
  • 平均健康值
    
  • 数据点
    
  • 报警处理率
    
  • 健康值_小
    
  • 无数据
    
  • 平均健康值占位
    
  • 无法设置
    
  • 未启用设备
    
  • 无维修任务
    
  • 未添加备品
    
  • 未添加设备
    
  • 无数据_小
    
  • 无任务
    
  • 无数据
    
  • 设备
    
  • 未添加设备
    
  • icon同步
    
  • icon同步_不可用
    
  • icon提示
    
  • bg
    
  • icon布尔
    
  • icon时间
    
  • icon字符
    
  • icon123
    
  • 多曲线图20191113
    
  • 数据列表20191113
    
  • 删除
    
  • 饼图
    
  • 柱状图
    
  • 折线图
    
  • 正在编辑当前面板_未选择
    
  • 正在编辑当前面板_已选择
    
  • 停止手动抓取
    
  • 添加新的图形
    
  • 全屏20190625
    
  • 下移一个禁
    
  • 上移一个禁
    
  • 上移一个
    
  • 下移一个
    
  • 导出excel
    
  • 条件抓取
    
  • 手动抓取
    
  • 未选择表格
    
  • 添加一行
    
  • 确定查询
    
  • ic_nodata_light
    
  • 添加
    
  • 展开
    
  • ic_nodata
    
  • 存储卡
    
  • ic_add
    

Unicode 引用


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

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

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

Unicode 使用步骤如下:

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

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

  • 下划线
    .iconxiahuaxian1
  • 下划线
    .iconxiahuaxian
  • 条形图
    .icontiaoxingtu
  • 表格
    .iconbiaoge
  • 分组柱状图
    .iconfenzuzhuzhuangtu
  • 矩形
    .iconjuxing1
  • 仪表盘
    .iconyibiaopan1
  • 文本
    .iconwenben1
  • 圆形
    .iconyuanxing1
  • 曲线图
    .iconquxiantu1
  • 时间
    .iconshijian2
  • 变量值
    .iconbianliangzhi1
  • 柱状图
    .iconzhuzhuangtu2
  • 数据卡片
    .iconshujukapian1
  • 计量器
    .iconjiliangqi1
  • 网页
    .iconwangye1
  • 饼状图
    .iconbingzhuangtu1
  • 数据列表
    .iconshujuliebiao2
  • 视频监控
    .iconshipinjiankong1
  • 指示灯
    .iconzhishideng1
  • 查看操作记录
    .iconchakancaozuojilu
  • 查看反应结果
    .iconchakanfanyingjieguo
  • 选择显示数据
    .iconxuanzexianshishuju
  • 工艺质量追溯查询
    .icongongyizhiliangzhuisuchaxun
  • 当前暂无进行中任务
    .icondangqianzanwujinhangzhongrenwu
  • 直线
    .iconzhixian
  • 工艺质量监控
    .icongongyizhiliangjiankong
  • 优化调整
    .iconyouhuatiaozheng
  • 低于
    .icondiyu
  • 高于
    .icongaoyu
  • 启动时间
    .iconqidongshijian
  • 开始时间
    .iconkaishishijian
  • 结束时间
    .iconjieshushijian
  • 保存
    .iconbaocun
  • 设置
    .iconshezhi1
  • 箭头向右
    .iconjiantouxiangyou
  • 警示
    .iconjingshi
  • 该工序下未关联机组
    .icongaigongxuxiaweiguanlianjizu
  • 删除
    .iconshanchu3
  • 当前查询条件下无任务
    .icondangqianchaxuntiaojianxiawurenwu
  • 查看异常记录
    .iconchakanyichangjilu
  • 重命名
    .iconzhongmingming
  • 请先选择数据点查看曲线
    .iconqingxianxuanzeshujudianchakanquxian
  • 新增查询条件
    .iconxinzengchaxuntiaojian
  • 信息
    .iconxinxi
  • 工序
    .icongongxu
  • 刷新
    .iconshuaxin
  • 编号
    .iconbianhao
  • 新增工序
    .iconxinzenggongxu
  • 进行中工序
    .iconjinhangzhonggongxu
  • 进入编辑界面
    .iconjinrubianjijiemian
  • 产品
    .iconchanpin
  • 创建分支任务
    .iconchuangjianfenzhirenwu
  • 时间
    .iconshijian1
  • 添加自动触发条件
    .icontianjiazidongchufatiaojian
  • 移除工序
    .iconyichugongxu
  • 完成工序
    .iconwanchenggongxu
  • 添加工序
    .icontianjiagongxu
  • 请选择工艺路径
    .iconqingxuanzegongyilujing
  • 清空触发条件
    .iconqingkongchufatiaojian
  • 选择数据点
    .iconxuanzeshujudian
  • 三角形
    .iconsanjiaoxing
  • 新增故障分析报告
    .iconxinzengguzhangfenxibaogao
  • 提阿甲时域频域分析条件
    .icontiajiashiyupinyufenxitiaojian
  • 收起
    .iconshouqi
  • 展开
    .iconzhankai1
  • 切换关联
    .iconqiehuanguanlian1
  • 暂无历史趋势分析图
    .iconzanwulishiqushifenxitu
  • 解除关联
    .iconjiechuguanlian1
  • 最大
    .iconzuida
  • 添加关联
    .icontianjiaguanlian
  • 设备诊断
    .iconshebeizhenduan
  • 删除
    .iconshanchu2
  • 暂未导入文件
    .iconzanweidaoruwenjian
  • CSV文件icon
    .iconCSVwenjianicon
  • CSV导入
    .iconCSVdaoru
  • 最小备份
    .iconzuixiaobeifen
  • 最小
    .iconzuixiao
  • 斜体
    .iconzu
  • 加粗
    .iconjiacu
  • 左对齐
    .iconleft
  • 右对齐
    .iconyouduiqi2
  • justify
    .iconjustify
  • 居中对齐
    .iconjuzhongduiqi
  • .iconshu
  • .iconheng
  • 全屏
    .iconquanping1
  • 上对齐
    .iconshangduiqi
  • 纵向居中
    .iconzongxiangjuzhong
  • 下对齐
    .iconxiaduiqi
  • 右对齐
    .iconyouduiqi
  • 左对齐
    .iconzuoduiqi
  • 横向居中
    .iconhengxiangjuzhong
  • 纵向阵列
    .iconzongxiangzhenlie
  • 横向阵列
    .iconhengxiangzhenlie
  • 配置看板
    .iconpeizhikanban
  • 解除编组
    .iconjiechubianzu1
  • 编组
    .iconbianzu1
  • 解除编组
    .iconjiechubianzu
  • 编组
    .iconbianzu
  • 置于顶层
    .iconzhiyudingceng
  • 前置一层
    .iconqianzhiyiceng
  • 后置一层
    .iconhouzhiyiceng
  • 置于底层
    .iconzhiyudiceng
  • 粘贴
    .iconniantie
  • 复制
    .iconfuzhi
  • 剪切
    .iconjianqie
  • 撤销
    .iconchexiao
  • 连线
    .iconlianxian
  • 恢复
    .iconhuifu
  • 退出
    .icontuichu
  • 自定义
    .iconzidingyi
  • 视频监控
    .iconshipinjiankong
  • 网页
    .iconwangye
  • 计量器
    .iconjiliangqi
  • 饼状图
    .iconbingzhuangtu
  • 数据列表
    .iconshujuliebiao1
  • 柱状图
    .iconzhuzhuangtu1
  • 曲线图
    .iconquxiantu
  • 指示灯
    .iconzhishideng
  • 数据卡片
    .iconshujukapian
  • 仪表盘
    .iconyibiaopan
  • 圆形
    .iconyuanxing
  • 时间
    .iconshijian
  • 变量值
    .iconbianliangzhi
  • 矩形
    .iconjuxing
  • 文本
    .iconwenben
  • 配置看板无阴影
    .iconpeizhikanbanwuyinying
  • 复制无阴影
    .iconfuzhiwuyinying
  • 信息无阴影
    .iconxinxiwuyinying
  • 第三方数据融合
    .icondisanfangshujuronghe
  • 详情
    .iconxiangqing
  • 已选择
    .iconyixuanze
  • 没添加
    .iconmeitianjia
  • 添加
    .icontianjia1
  • 已配置
    .iconyipeizhi
  • 未选择表格
    .iconweixuanzebiaoge1
  • 新建任务
    .iconxinjianrenwu
  • 回到顶部
    .iconhuidaodingbu
  • 设备管理
    .iconshebeiguanli1
  • 删除
    .iconshanchu1
  • 已读
    .iconyidu
  • 按组织选择
    .iconanzuzhixuanze
  • 编辑
    .iconbianji
  • 设置
    .iconshezhi
  • 系统预设字段
    .iconxitongyusheziduan
  • 自定义字段
    .iconzidingyiziduan
  • 删除选择
    .iconshanchuxuanze
  • 恢复默认设置
    .iconhuifumorenshezhi
  • 取消全选
    .iconquxiaoquanxuan
  • 选择全部
    .iconxuanzequanbu
  • 设备管理
    .iconshebeiguanli
  • 获取当前数据点数据
    .iconhuoqudangqianshujudianshuju-dis
  • 获取当前数据点数据
    .iconhuoqudangqianshujudianshuju
  • 切换关联
    .iconqiehuanguanlian
  • 解除关联
    .iconjiechuguanlian
  • 导航条报警查看
    .icondaohangtiaobaojingchakan
  • 查看下次任务时间
    .iconchakanxiacirenwushijian
  • 点击关联数据点_禁用
    .icondianjiguanlianshujudian_jinyong
  • 报警等级_点亮
    .iconbaojingdengji_dianliang
  • 点击关联数据点
    .icondianjiguanlianshujudian
  • 报警等级_未点亮
    .iconbaojingdengji_weidianliang
  • 文件
    .iconwenjian
  • 开始反馈
    .iconkaishifankui
  • 取消反馈
    .iconquxiaofankui
  • 编辑反馈
    .iconbianjifankui
  • 点击关注
    .icondianjiguanzhu
  • 取消关注
    .iconquxiaoguanzhu
  • 查看详情
    .iconchakanxiangqing
  • 健康风险项
    .iconjiankangfengxianxiang
  • 报警次数
    .iconbaojingcishu
  • 暂无数据
    .iconzanwushuju
  • 设备作业率
    .iconshebeizuoyeshuai
  • 平均健康值
    .iconpingjunjiankangzhi
  • 数据点
    .iconshujudian
  • 报警处理率
    .iconbaojingchulishuai
  • 健康值_小
    .iconjiankangzhi_xiao
  • 无数据
    .iconwushuju_blue
  • 平均健康值占位
    .iconpingjunjiankangzhizhanwei
  • 无法设置
    .iconwufashezhi
  • 未启用设备
    .iconweiqiyongshebei
  • 无维修任务
    .iconwuweixiurenwu
  • 未添加备品
    .iconweitianjiabeipin
  • 未添加设备
    .iconweitianjiashebei1
  • 无数据_小
    .iconwushuju_xiao
  • 无任务
    .iconwurenwu
  • 无数据
    .iconwushuju
  • 设备
    .iconshebei
  • 未添加设备
    .iconweitianjiashebei
  • icon同步
    .iconicontongbu
  • icon同步_不可用
    .iconicontongbu_bukeyong
  • icon提示
    .iconicontishi
  • bg
    .iconbg
  • icon布尔
    .iconiconbuer
  • icon时间
    .iconiconshijian
  • icon字符
    .iconiconzifu
  • icon123
    .iconicon
  • 多曲线图20191113
    .iconduoquxiantu
  • 数据列表20191113
    .iconshujuliebiao
  • 删除
    .iconshanchu
  • 饼图
    .iconbingtu
  • 柱状图
    .iconzhuzhuangtu
  • 折线图
    .iconzhexiantu
  • 正在编辑当前面板_未选择
    .iconinactive
  • 正在编辑当前面板_已选择
    .iconactive
  • 停止手动抓取
    .icontingzhishoudongzhuaqu
  • 添加新的图形
    .icontianjiaxindetuxing
  • 全屏20190625
    .iconquanping
  • 下移一个禁
    .iconxiayiyigejin
  • 上移一个禁
    .iconshangyiyigejin
  • 上移一个
    .iconshangyiyige
  • 下移一个
    .iconxiayiyige
  • 导出excel
    .icondaochuexcel
  • 条件抓取
    .icontiaojianzhuaqu
  • 手动抓取
    .iconshoudongzhuaqu
  • 未选择表格
    .iconweixuanzebiaoge
  • 添加一行
    .icontianjiayihang
  • 确定查询
    .iconquedingchaxun
  • ic_nodata_light
    .iconic_nodata_light
  • 添加
    .icontianjia
  • 展开
    .iconzhankai
  • ic_nodata
    .iconic_nodata
  • 存储卡
    .iconcunchuka
  • ic_add
    .iconic_add

font-class 引用


font-class 是 Unicode 使用方式的一种变种,主要是解决 Unicode 书写不直观,语意不明确的问题。

与 Unicode 使用方式相比,具有如下特点:

  • 相比于 Unicode 语意明确,书写更直观。可以很容易分辨这个 icon 是什么。
  • 因为使用 class 来定义图标,所以当要替换图标时,只需要修改 class 里面的 Unicode 引用。

使用步骤如下:

第一步:引入项目下面生成的 fontclass 代码:

<link rel="stylesheet" href="./iconfont.css">

第二步:挑选相应图标并获取类名,应用于页面:

<span class="iconfont iconxxx"></span>

" iconfont" 是你项目下的 font-family。可以通过编辑项目查看,默认是 "iconfont"。

  • 下划线
    #iconxiahuaxian1
  • 下划线
    #iconxiahuaxian
  • 条形图
    #icontiaoxingtu
  • 表格
    #iconbiaoge
  • 分组柱状图
    #iconfenzuzhuzhuangtu
  • 矩形
    #iconjuxing1
  • 仪表盘
    #iconyibiaopan1
  • 文本
    #iconwenben1
  • 圆形
    #iconyuanxing1
  • 曲线图
    #iconquxiantu1
  • 时间
    #iconshijian2
  • 变量值
    #iconbianliangzhi1
  • 柱状图
    #iconzhuzhuangtu2
  • 数据卡片
    #iconshujukapian1
  • 计量器
    #iconjiliangqi1
  • 网页
    #iconwangye1
  • 饼状图
    #iconbingzhuangtu1
  • 数据列表
    #iconshujuliebiao2
  • 视频监控
    #iconshipinjiankong1
  • 指示灯
    #iconzhishideng1
  • 查看操作记录
    #iconchakancaozuojilu
  • 查看反应结果
    #iconchakanfanyingjieguo
  • 选择显示数据
    #iconxuanzexianshishuju
  • 工艺质量追溯查询
    #icongongyizhiliangzhuisuchaxun
  • 当前暂无进行中任务
    #icondangqianzanwujinhangzhongrenwu
  • 直线
    #iconzhixian
  • 工艺质量监控
    #icongongyizhiliangjiankong
  • 优化调整
    #iconyouhuatiaozheng
  • 低于
    #icondiyu
  • 高于
    #icongaoyu
  • 启动时间
    #iconqidongshijian
  • 开始时间
    #iconkaishishijian
  • 结束时间
    #iconjieshushijian
  • 保存
    #iconbaocun
  • 设置
    #iconshezhi1
  • 箭头向右
    #iconjiantouxiangyou
  • 警示
    #iconjingshi
  • 该工序下未关联机组
    #icongaigongxuxiaweiguanlianjizu
  • 删除
    #iconshanchu3
  • 当前查询条件下无任务
    #icondangqianchaxuntiaojianxiawurenwu
  • 查看异常记录
    #iconchakanyichangjilu
  • 重命名
    #iconzhongmingming
  • 请先选择数据点查看曲线
    #iconqingxianxuanzeshujudianchakanquxian
  • 新增查询条件
    #iconxinzengchaxuntiaojian
  • 信息
    #iconxinxi
  • 工序
    #icongongxu
  • 刷新
    #iconshuaxin
  • 编号
    #iconbianhao
  • 新增工序
    #iconxinzenggongxu
  • 进行中工序
    #iconjinhangzhonggongxu
  • 进入编辑界面
    #iconjinrubianjijiemian
  • 产品
    #iconchanpin
  • 创建分支任务
    #iconchuangjianfenzhirenwu
  • 时间
    #iconshijian1
  • 添加自动触发条件
    #icontianjiazidongchufatiaojian
  • 移除工序
    #iconyichugongxu
  • 完成工序
    #iconwanchenggongxu
  • 添加工序
    #icontianjiagongxu
  • 请选择工艺路径
    #iconqingxuanzegongyilujing
  • 清空触发条件
    #iconqingkongchufatiaojian
  • 选择数据点
    #iconxuanzeshujudian
  • 三角形
    #iconsanjiaoxing
  • 新增故障分析报告
    #iconxinzengguzhangfenxibaogao
  • 提阿甲时域频域分析条件
    #icontiajiashiyupinyufenxitiaojian
  • 收起
    #iconshouqi
  • 展开
    #iconzhankai1
  • 切换关联
    #iconqiehuanguanlian1
  • 暂无历史趋势分析图
    #iconzanwulishiqushifenxitu
  • 解除关联
    #iconjiechuguanlian1
  • 最大
    #iconzuida
  • 添加关联
    #icontianjiaguanlian
  • 设备诊断
    #iconshebeizhenduan
  • 删除
    #iconshanchu2
  • 暂未导入文件
    #iconzanweidaoruwenjian
  • CSV文件icon
    #iconCSVwenjianicon
  • CSV导入
    #iconCSVdaoru
  • 最小备份
    #iconzuixiaobeifen
  • 最小
    #iconzuixiao
  • 斜体
    #iconzu
  • 加粗
    #iconjiacu
  • 左对齐
    #iconleft
  • 右对齐
    #iconyouduiqi2
  • justify
    #iconjustify
  • 居中对齐
    #iconjuzhongduiqi
  • #iconshu
  • #iconheng
  • 全屏
    #iconquanping1
  • 上对齐
    #iconshangduiqi
  • 纵向居中
    #iconzongxiangjuzhong
  • 下对齐
    #iconxiaduiqi
  • 右对齐
    #iconyouduiqi
  • 左对齐
    #iconzuoduiqi
  • 横向居中
    #iconhengxiangjuzhong
  • 纵向阵列
    #iconzongxiangzhenlie
  • 横向阵列
    #iconhengxiangzhenlie
  • 配置看板
    #iconpeizhikanban
  • 解除编组
    #iconjiechubianzu1
  • 编组
    #iconbianzu1
  • 解除编组
    #iconjiechubianzu
  • 编组
    #iconbianzu
  • 置于顶层
    #iconzhiyudingceng
  • 前置一层
    #iconqianzhiyiceng
  • 后置一层
    #iconhouzhiyiceng
  • 置于底层
    #iconzhiyudiceng
  • 粘贴
    #iconniantie
  • 复制
    #iconfuzhi
  • 剪切
    #iconjianqie
  • 撤销
    #iconchexiao
  • 连线
    #iconlianxian
  • 恢复
    #iconhuifu
  • 退出
    #icontuichu
  • 自定义
    #iconzidingyi
  • 视频监控
    #iconshipinjiankong
  • 网页
    #iconwangye
  • 计量器
    #iconjiliangqi
  • 饼状图
    #iconbingzhuangtu
  • 数据列表
    #iconshujuliebiao1
  • 柱状图
    #iconzhuzhuangtu1
  • 曲线图
    #iconquxiantu
  • 指示灯
    #iconzhishideng
  • 数据卡片
    #iconshujukapian
  • 仪表盘
    #iconyibiaopan
  • 圆形
    #iconyuanxing
  • 时间
    #iconshijian
  • 变量值
    #iconbianliangzhi
  • 矩形
    #iconjuxing
  • 文本
    #iconwenben
  • 配置看板无阴影
    #iconpeizhikanbanwuyinying
  • 复制无阴影
    #iconfuzhiwuyinying
  • 信息无阴影
    #iconxinxiwuyinying
  • 第三方数据融合
    #icondisanfangshujuronghe
  • 详情
    #iconxiangqing
  • 已选择
    #iconyixuanze
  • 没添加
    #iconmeitianjia
  • 添加
    #icontianjia1
  • 已配置
    #iconyipeizhi
  • 未选择表格
    #iconweixuanzebiaoge1
  • 新建任务
    #iconxinjianrenwu
  • 回到顶部
    #iconhuidaodingbu
  • 设备管理
    #iconshebeiguanli1
  • 删除
    #iconshanchu1
  • 已读
    #iconyidu
  • 按组织选择
    #iconanzuzhixuanze
  • 编辑
    #iconbianji
  • 设置
    #iconshezhi
  • 系统预设字段
    #iconxitongyusheziduan
  • 自定义字段
    #iconzidingyiziduan
  • 删除选择
    #iconshanchuxuanze
  • 恢复默认设置
    #iconhuifumorenshezhi
  • 取消全选
    #iconquxiaoquanxuan
  • 选择全部
    #iconxuanzequanbu
  • 设备管理
    #iconshebeiguanli
  • 获取当前数据点数据
    #iconhuoqudangqianshujudianshuju-dis
  • 获取当前数据点数据
    #iconhuoqudangqianshujudianshuju
  • 切换关联
    #iconqiehuanguanlian
  • 解除关联
    #iconjiechuguanlian
  • 导航条报警查看
    #icondaohangtiaobaojingchakan
  • 查看下次任务时间
    #iconchakanxiacirenwushijian
  • 点击关联数据点_禁用
    #icondianjiguanlianshujudian_jinyong
  • 报警等级_点亮
    #iconbaojingdengji_dianliang
  • 点击关联数据点
    #icondianjiguanlianshujudian
  • 报警等级_未点亮
    #iconbaojingdengji_weidianliang
  • 文件
    #iconwenjian
  • 开始反馈
    #iconkaishifankui
  • 取消反馈
    #iconquxiaofankui
  • 编辑反馈
    #iconbianjifankui
  • 点击关注
    #icondianjiguanzhu
  • 取消关注
    #iconquxiaoguanzhu
  • 查看详情
    #iconchakanxiangqing
  • 健康风险项
    #iconjiankangfengxianxiang
  • 报警次数
    #iconbaojingcishu
  • 暂无数据
    #iconzanwushuju
  • 设备作业率
    #iconshebeizuoyeshuai
  • 平均健康值
    #iconpingjunjiankangzhi
  • 数据点
    #iconshujudian
  • 报警处理率
    #iconbaojingchulishuai
  • 健康值_小
    #iconjiankangzhi_xiao
  • 无数据
    #iconwushuju_blue
  • 平均健康值占位
    #iconpingjunjiankangzhizhanwei
  • 无法设置
    #iconwufashezhi
  • 未启用设备
    #iconweiqiyongshebei
  • 无维修任务
    #iconwuweixiurenwu
  • 未添加备品
    #iconweitianjiabeipin
  • 未添加设备
    #iconweitianjiashebei1
  • 无数据_小
    #iconwushuju_xiao
  • 无任务
    #iconwurenwu
  • 无数据
    #iconwushuju
  • 设备
    #iconshebei
  • 未添加设备
    #iconweitianjiashebei
  • icon同步
    #iconicontongbu
  • icon同步_不可用
    #iconicontongbu_bukeyong
  • icon提示
    #iconicontishi
  • bg
    #iconbg
  • icon布尔
    #iconiconbuer
  • icon时间
    #iconiconshijian
  • icon字符
    #iconiconzifu
  • icon123
    #iconicon
  • 多曲线图20191113
    #iconduoquxiantu
  • 数据列表20191113
    #iconshujuliebiao
  • 删除
    #iconshanchu
  • 饼图
    #iconbingtu
  • 柱状图
    #iconzhuzhuangtu
  • 折线图
    #iconzhexiantu
  • 正在编辑当前面板_未选择
    #iconinactive
  • 正在编辑当前面板_已选择
    #iconactive
  • 停止手动抓取
    #icontingzhishoudongzhuaqu
  • 添加新的图形
    #icontianjiaxindetuxing
  • 全屏20190625
    #iconquanping
  • 下移一个禁
    #iconxiayiyigejin
  • 上移一个禁
    #iconshangyiyigejin
  • 上移一个
    #iconshangyiyige
  • 下移一个
    #iconxiayiyige
  • 导出excel
    #icondaochuexcel
  • 条件抓取
    #icontiaojianzhuaqu
  • 手动抓取
    #iconshoudongzhuaqu
  • 未选择表格
    #iconweixuanzebiaoge
  • 添加一行
    #icontianjiayihang
  • 确定查询
    #iconquedingchaxun
  • ic_nodata_light
    #iconic_nodata_light
  • 添加
    #icontianjia
  • 展开
    #iconzhankai
  • ic_nodata
    #iconic_nodata
  • 存储卡
    #iconcunchuka
  • ic_add
    #iconic_add

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>