• 导出
    
  • 电源负荷图
    
  • 返回
    
  • 导入
    
  • 钢笔
    
  • 进攻
    
  • 风险点
    
  • 发布
    
  • 排烟
    
  • 链接
    
  • 电缆沟封堵图
    
  • 控制台
    
  • 监控点
    
  • 键盘
    
  • 控件
    
  • 迁移
    
  • 确认着火
    
  • 上移
    
  • 日历时间
    
  • 收起
    
  • 鼠标
    
  • 添加
    
  • 系统管理
    
  • 路线巡检点
    
  • 下载
    
  • 供水
    
  • 泡沫间
    
  • 任务
    
  • 修改
    
  • 消防资源
    
  • 企业信息
    
  • 消防车进站行车路线图
    
  • 取消
    
  • 设备台账
    
  • 巡检情况统计表
    
  • 领导架构
    
  • 破拆
    
  • 选择建筑
    
  • 巡检点_1
    
  • 人员综合统计分析
    
  • 炸裂
    
  • 任务安排统计分析
    
  • 日检
    
  • 通讯录
    
  • Hi
    
  • 删除
    
  • 筛选
    
  • 首页
    
  • 数据点
    
  • 消除误报
    
  • 所有楼层
    
  • 设置
    
  • 下拉
    
  • 明细
    
  • 侦查
    
  • 查看
    
  • 搜索
    
  • 安全执行
    
  • 保存
    
  • 疏散
    
  • 文字预案
    
  • 消防
    
  • 巡检点数
    
  • 新建分类
    
  • 巡检完成情况月报表
    
  • 提交
    
  • 预案
    
  • 消防取水图
    
  • 办结
    
  • 帮助
    
  • 资源列表
    
  • 场景编辑
    
  • 下移
    
  • 消防小室
    
  • 预案演练
    
  • 消息
    
  • 重点设备详情
    
  • 巡检点
    
  • 重做
    
  • 巡检次数
    
  • 安全预控
    
  • 步骤
    
  • 安全态势
    
  • 撤退
    
  • 禁用
    
  • 密码
    
  • 配置权限
    
  • 启用
    
  • 制作预案
    
  • 3d预案
    
  • 树-厂区
    
  • 树-主控楼
    
  • 树-楼层
    
  • 点位-灭火器点
    
  • 点位-数据点
    
  • 点位-巡检点
    
  • 点位-水源点
    
  • 点位-泡沫间点
    
  • 点位-监控点
    
  • 点位-消防室点
    
  • 步骤-保存
    
  • 步骤-提示
    
  • 步骤-图片
    
  • 步骤-道路
    
  • 步骤-消息
    
  • 步骤-指挥权
    
  • 步骤-确认
    
  • 步骤-电话
    
  • 步骤-故障报警
    
  • 分享
    
  • 下载
    
  • 路线-自定义
    
  • 路线-侦查
    
  • 路线-进攻
    
  • 路线-撤退
    
  • 路线-疏散
    
  • 路线-排烟
    
  • 路线-供水
    
  • 路线-破拆
    
  • 监控
    
  • 鼠标-平移
    
  • 键盘-平移
    
  • 风险点
    
  • 配置权限
    
  • 区域-矩形
    
  • 区域-圆形
    
  • 区域-自定义
    
  • 键盘-缩放
    
  • 鼠标-缩放
    
  • 显示窗-右边栏
    
  • 显示窗-左边栏
    
  • 视图-网格
    
  • 视图-列表
    
  • 预案-图例
    
  • 预案-全屏
    
  • 预案-字幕
    
  • 图例
    
  • 控制台-巡检记录
    
  • 控制台-任务安排
    
  • 控制台-检查项目
    
  • 控制台-巡检点
    
  • 控制台-巡检路线
    
  • 控制台-巡检计划
    
  • 控制台-分类目录
    
  • 控制台-统计分析
    
  • 键盘-重置
    
  • 鼠标-重置
    
  • 分享
    
  • 预案-火情
    
  • 预案-路线
    
  • 预案-消防车
    
  • 预案-战斗力量
    
  • 预案-消防装备
    
  • 点位-重点设备
    
  • 重点设备
    
  • 鼠标-旋转
    
  • 键盘-旋转
    
  • 预案-链接路径
    
  • 预案-规则
    
  • 预案-属性
    
  • 预案-步骤
    
  • 最佳视角
    
  • 配置监测点
    
  • 确认
    
  • 取消
    
  • 监控
    
  • zhixingtanchuang-dui
    
  • 作业活动
    
  • 风险点
    
  • 化工设备
    
  • 隐患点
    
  • 模块点
    
  • 流程图/流程状态
    
  • 流程
    

Unicode 引用


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

  • 兼容性最好,支持 IE6+,及所有现代浏览器。
  • 支持按字体的方式去动态调整图标大小,颜色等等。
  • 但是因为是字体,所以不支持多色。只能使用平台里单色的图标,就算项目里有多色图标也会自动去色。

注意:新版 iconfont 支持多色图标,这些多色图标在 Unicode 模式下将不能使用,如果有需求建议使用symbol 的引用方式

Unicode 使用步骤如下:

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

@font-face {
  font-family: 'fasicon';
  src: url('iconfont.eot');
  src: url('iconfont.eot?#iefix') format('embedded-opentype'),
      url('iconfont.woff2') format('woff2'),
      url('iconfont.woff') format('woff'),
      url('iconfont.ttf') format('truetype'),
      url('iconfont.svg#fasicon') format('svg');
}

第二步:定义使用 iconfont 的样式

.fasicon {
  font-family: "fasicon" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

第三步:挑选相应图标并获取字体编码,应用于页面

<span class="fasicon">&#x33;</span>

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

  • 导出
    .fasicon-daochu
  • 电源负荷图
    .fasicon-dianyuanfuhetu
  • 返回
    .fasicon-fanhui
  • 导入
    .fasicon-daoru
  • 钢笔
    .fasicon-gangbi
  • 进攻
    .fasicon-jingong
  • 风险点
    .fasicon-fengxiandian
  • 发布
    .fasicon-fabu
  • 排烟
    .fasicon-paiyan
  • 链接
    .fasicon-lianjie
  • 电缆沟封堵图
    .fasicon-dianlangoufengdutu
  • 控制台
    .fasicon-kongzhitai
  • 监控点
    .fasicon-jiankongdian
  • 键盘
    .fasicon-jianpan
  • 控件
    .fasicon-kongjian
  • 迁移
    .fasicon-qianyi
  • 确认着火
    .fasicon-querenzhuohuo
  • 上移
    .fasicon-shangyi
  • 日历时间
    .fasicon-rilishijian
  • 收起
    .fasicon-shouqi
  • 鼠标
    .fasicon-shubiao
  • 添加
    .fasicon-tianjia
  • 系统管理
    .fasicon-xitongguanli
  • 路线巡检点
    .fasicon-luxianxunjiandian
  • 下载
    .fasicon-xiazai
  • 供水
    .fasicon-gongshui
  • 泡沫间
    .fasicon-paomojian
  • 任务
    .fasicon-renwu
  • 修改
    .fasicon-xiugai
  • 消防资源
    .fasicon-xiaofangziyuan
  • 企业信息
    .fasicon-qiyexinxi
  • 消防车进站行车路线图
    .fasicon-xiaofangchejinzhanhangcheluxiantu
  • 取消
    .fasicon-quxiao
  • 设备台账
    .fasicon-shebeitaizhang
  • 巡检情况统计表
    .fasicon-xunjianqingkuangtongjibiao
  • 领导架构
    .fasicon-lingdaojiagou
  • 破拆
    .fasicon-pochai
  • 选择建筑
    .fasicon-xuanzejianzhu
  • 巡检点_1
    .fasicon-xunjiandian_
  • 人员综合统计分析
    .fasicon-renyuanzonghetongjifenxi
  • 炸裂
    .fasicon-zhalie
  • 任务安排统计分析
    .fasicon-renwuanpaitongjifenxi
  • 日检
    .fasicon-rijian
  • 通讯录
    .fasicon-tongxunlu
  • Hi
    .fasicon-Hi
  • 删除
    .fasicon-shanchu
  • 筛选
    .fasicon-shaixuan
  • 首页
    .fasicon-shouye
  • 数据点
    .fasicon-shujudian
  • 消除误报
    .fasicon-xiaochuwubao
  • 所有楼层
    .fasicon-suoyoulouceng
  • 设置
    .fasicon-shezhi
  • 下拉
    .fasicon-xiala
  • 明细
    .fasicon-mingxi
  • 侦查
    .fasicon-zhencha
  • 查看
    .fasicon-chakan
  • 搜索
    .fasicon-sousuo
  • 安全执行
    .fasicon-anquanzhihang
  • 保存
    .fasicon-baocun
  • 疏散
    .fasicon-shusan
  • 文字预案
    .fasicon-wenziyuan
  • 消防
    .fasicon-xiaofang
  • 巡检点数
    .fasicon-xunjiandianshu
  • 新建分类
    .fasicon-xinjianfenlei
  • 巡检完成情况月报表
    .fasicon-xunjianwanchengqingkuangyuebaobiao
  • 提交
    .fasicon-tijiao
  • 预案
    .fasicon-yuan1
  • 消防取水图
    .fasicon-xiaofangqushuitu
  • 办结
    .fasicon-banjie
  • 帮助
    .fasicon-bangzhu
  • 资源列表
    .fasicon-ziyuanliebiao
  • 场景编辑
    .fasicon-changjingbianji
  • 下移
    .fasicon-xiayi
  • 消防小室
    .fasicon-xiaofangxiaoshi
  • 预案演练
    .fasicon-yuanyanlian
  • 消息
    .fasicon-xiaoxi
  • 重点设备详情
    .fasicon-zhongdianshebeixiangqing
  • 巡检点
    .fasicon-xunjiandian
  • 重做
    .fasicon-zhongzuo
  • 巡检次数
    .fasicon-xunjiancishu
  • 安全预控
    .fasicon-anquanyukong
  • 步骤
    .fasicon-buzhou7
  • 安全态势
    .fasicon-anquantaishi
  • 撤退
    .fasicon-chetui
  • 禁用
    .fasicon-jinyong
  • 密码
    .fasicon-mima
  • 配置权限
    .fasicon-peizhiquanxian
  • 启用
    .fasicon-qiyong
  • 制作预案
    .fasicon-zhizuoyuan
  • 3d预案
    .fasicon-dyuan
  • 树-厂区
    .fasicon-shu-changqu
  • 树-主控楼
    .fasicon-shu-zhukonglou
  • 树-楼层
    .fasicon-shu-louceng
  • 点位-灭火器点
    .fasicon-dianwei-miehuoqidian
  • 点位-数据点
    .fasicon-dianwei-shujudian
  • 点位-巡检点
    .fasicon-dianwei-xunjiandian
  • 点位-水源点
    .fasicon-dianwei-shuiyuandian
  • 点位-泡沫间点
    .fasicon-dianwei-paomojiandian
  • 点位-监控点
    .fasicon-dianwei-jiankongdian
  • 点位-消防室点
    .fasicon-dianwei-xiaofangshidian
  • 步骤-保存
    .fasicon-buzhou-baocun
  • 步骤-提示
    .fasicon-buzhou-tishi
  • 步骤-图片
    .fasicon-buzhou-tupian
  • 步骤-道路
    .fasicon-buzhou-daolu
  • 步骤-消息
    .fasicon-buzhou-xiaoxi
  • 步骤-指挥权
    .fasicon-buzhou-zhihuiquan
  • 步骤-确认
    .fasicon-buzhou-queren
  • 步骤-电话
    .fasicon-buzhou-dianhua
  • 步骤-故障报警
    .fasicon-buzhou-guzhangbaojing
  • 分享
    .fasicon-fenxiang1
  • 下载
    .fasicon-xiazai1
  • 路线-自定义
    .fasicon-luxian-zidingyi
  • 路线-侦查
    .fasicon-luxian-zhencha
  • 路线-进攻
    .fasicon-luxian-jingong
  • 路线-撤退
    .fasicon-luxian-chetui
  • 路线-疏散
    .fasicon-luxian-shusan
  • 路线-排烟
    .fasicon-luxian-paiyan
  • 路线-供水
    .fasicon-luxian-gongshui
  • 路线-破拆
    .fasicon-luxian-pochai
  • 监控
    .fasicon-jiankong
  • 鼠标-平移
    .fasicon-shubiao-pingyi
  • 键盘-平移
    .fasicon-jianpan-pingyi
  • 风险点
    .fasicon-fengxiandian1
  • 配置权限
    .fasicon-peizhiquanxian1
  • 区域-矩形
    .fasicon-quyu-juxing
  • 区域-圆形
    .fasicon-quyu-yuanxing
  • 区域-自定义
    .fasicon-quyu-zidingyi
  • 键盘-缩放
    .fasicon-jianpan-suofang
  • 鼠标-缩放
    .fasicon-shubiao-suofang
  • 显示窗-右边栏
    .fasicon-xianshichuang-youbianlan
  • 显示窗-左边栏
    .fasicon-xianshichuang-zuobianlan
  • 视图-网格
    .fasicon-shitu-wangge
  • 视图-列表
    .fasicon-shitu-liebiao
  • 预案-图例
    .fasicon-yuan-tuli
  • 预案-全屏
    .fasicon-yuan-quanping
  • 预案-字幕
    .fasicon-yuan-zimu
  • 图例
    .fasicon-tuli
  • 控制台-巡检记录
    .fasicon-kongzhitai-xunjianjilu
  • 控制台-任务安排
    .fasicon-kongzhitai-renwuanpai
  • 控制台-检查项目
    .fasicon-kongzhitai-jianchaxiangmu
  • 控制台-巡检点
    .fasicon-kongzhitai-xunjiandian
  • 控制台-巡检路线
    .fasicon-kongzhitai-xunjianluxian
  • 控制台-巡检计划
    .fasicon-kongzhitai-xunjianjihua
  • 控制台-分类目录
    .fasicon-kongzhitai-fenleimulu
  • 控制台-统计分析
    .fasicon-kongzhitai-tongjifenxi
  • 键盘-重置
    .fasicon-jianpan-zhongzhi
  • 鼠标-重置
    .fasicon-shubiao-zhongzhi
  • 分享
    .fasicon-fenxiang
  • 预案-火情
    .fasicon-yuan-huoqing
  • 预案-路线
    .fasicon-yuan-luxian
  • 预案-消防车
    .fasicon-yuan-xiaofangche
  • 预案-战斗力量
    .fasicon-yuan-zhandouliliang
  • 预案-消防装备
    .fasicon-yuan-xiaofangzhuangbei
  • 点位-重点设备
    .fasicon-dianwei-zhongdianshebei
  • 重点设备
    .fasicon-zhongdianshebei1
  • 鼠标-旋转
    .fasicon-shubiao-xuanzhuan
  • 键盘-旋转
    .fasicon-jianpan-xuanzhuan
  • 预案-链接路径
    .fasicon-yuan-lianjielujing
  • 预案-规则
    .fasicon-yuan-guize
  • 预案-属性
    .fasicon-yuan-shuxing
  • 预案-步骤
    .fasicon-yuan-buzhou
  • 最佳视角
    .fasicon-zuijiashijiao
  • 配置监测点
    .fasicon-peizhijiancedian
  • 确认
    .fasicon-queren
  • 取消
    .fasicon-quxiao2
  • 监控
    .fasicon-jiankong2
  • zhixingtanchuang-dui
    .fasicon-zhixingtanchuang-dui
  • 作业活动
    .fasicon-zuoyehuodong
  • 风险点
    .fasicon-fengxiandian2
  • 化工设备
    .fasicon-huagongshebei
  • 隐患点
    .fasicon-yinhuandian
  • 模块点
    .fasicon-mokuaidian
  • 流程图/流程状态
    .fasicon-liuchengtuliuchengzhuangtai
  • 流程
    .fasicon-liucheng

font-class 引用


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

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

  • 兼容性良好,支持 IE8+,及所有现代浏览器。
  • 相比于 Unicode 语意明确,书写更直观。可以很容易分辨这个 icon 是什么。
  • 因为使用 class 来定义图标,所以当要替换图标时,只需要修改 class 里面的 Unicode 引用。
  • 不过因为本质上还是使用的字体,所以多色图标还是不支持的。

使用步骤如下:

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

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

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

<span class="fasicon fasicon-xxx"></span>

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

  • 导出
    #fasicon-daochu
  • 电源负荷图
    #fasicon-dianyuanfuhetu
  • 返回
    #fasicon-fanhui
  • 导入
    #fasicon-daoru
  • 钢笔
    #fasicon-gangbi
  • 进攻
    #fasicon-jingong
  • 风险点
    #fasicon-fengxiandian
  • 发布
    #fasicon-fabu
  • 排烟
    #fasicon-paiyan
  • 链接
    #fasicon-lianjie
  • 电缆沟封堵图
    #fasicon-dianlangoufengdutu
  • 控制台
    #fasicon-kongzhitai
  • 监控点
    #fasicon-jiankongdian
  • 键盘
    #fasicon-jianpan
  • 控件
    #fasicon-kongjian
  • 迁移
    #fasicon-qianyi
  • 确认着火
    #fasicon-querenzhuohuo
  • 上移
    #fasicon-shangyi
  • 日历时间
    #fasicon-rilishijian
  • 收起
    #fasicon-shouqi
  • 鼠标
    #fasicon-shubiao
  • 添加
    #fasicon-tianjia
  • 系统管理
    #fasicon-xitongguanli
  • 路线巡检点
    #fasicon-luxianxunjiandian
  • 下载
    #fasicon-xiazai
  • 供水
    #fasicon-gongshui
  • 泡沫间
    #fasicon-paomojian
  • 任务
    #fasicon-renwu
  • 修改
    #fasicon-xiugai
  • 消防资源
    #fasicon-xiaofangziyuan
  • 企业信息
    #fasicon-qiyexinxi
  • 消防车进站行车路线图
    #fasicon-xiaofangchejinzhanhangcheluxiantu
  • 取消
    #fasicon-quxiao
  • 设备台账
    #fasicon-shebeitaizhang
  • 巡检情况统计表
    #fasicon-xunjianqingkuangtongjibiao
  • 领导架构
    #fasicon-lingdaojiagou
  • 破拆
    #fasicon-pochai
  • 选择建筑
    #fasicon-xuanzejianzhu
  • 巡检点_1
    #fasicon-xunjiandian_
  • 人员综合统计分析
    #fasicon-renyuanzonghetongjifenxi
  • 炸裂
    #fasicon-zhalie
  • 任务安排统计分析
    #fasicon-renwuanpaitongjifenxi
  • 日检
    #fasicon-rijian
  • 通讯录
    #fasicon-tongxunlu
  • Hi
    #fasicon-Hi
  • 删除
    #fasicon-shanchu
  • 筛选
    #fasicon-shaixuan
  • 首页
    #fasicon-shouye
  • 数据点
    #fasicon-shujudian
  • 消除误报
    #fasicon-xiaochuwubao
  • 所有楼层
    #fasicon-suoyoulouceng
  • 设置
    #fasicon-shezhi
  • 下拉
    #fasicon-xiala
  • 明细
    #fasicon-mingxi
  • 侦查
    #fasicon-zhencha
  • 查看
    #fasicon-chakan
  • 搜索
    #fasicon-sousuo
  • 安全执行
    #fasicon-anquanzhihang
  • 保存
    #fasicon-baocun
  • 疏散
    #fasicon-shusan
  • 文字预案
    #fasicon-wenziyuan
  • 消防
    #fasicon-xiaofang
  • 巡检点数
    #fasicon-xunjiandianshu
  • 新建分类
    #fasicon-xinjianfenlei
  • 巡检完成情况月报表
    #fasicon-xunjianwanchengqingkuangyuebaobiao
  • 提交
    #fasicon-tijiao
  • 预案
    #fasicon-yuan1
  • 消防取水图
    #fasicon-xiaofangqushuitu
  • 办结
    #fasicon-banjie
  • 帮助
    #fasicon-bangzhu
  • 资源列表
    #fasicon-ziyuanliebiao
  • 场景编辑
    #fasicon-changjingbianji
  • 下移
    #fasicon-xiayi
  • 消防小室
    #fasicon-xiaofangxiaoshi
  • 预案演练
    #fasicon-yuanyanlian
  • 消息
    #fasicon-xiaoxi
  • 重点设备详情
    #fasicon-zhongdianshebeixiangqing
  • 巡检点
    #fasicon-xunjiandian
  • 重做
    #fasicon-zhongzuo
  • 巡检次数
    #fasicon-xunjiancishu
  • 安全预控
    #fasicon-anquanyukong
  • 步骤
    #fasicon-buzhou7
  • 安全态势
    #fasicon-anquantaishi
  • 撤退
    #fasicon-chetui
  • 禁用
    #fasicon-jinyong
  • 密码
    #fasicon-mima
  • 配置权限
    #fasicon-peizhiquanxian
  • 启用
    #fasicon-qiyong
  • 制作预案
    #fasicon-zhizuoyuan
  • 3d预案
    #fasicon-dyuan
  • 树-厂区
    #fasicon-shu-changqu
  • 树-主控楼
    #fasicon-shu-zhukonglou
  • 树-楼层
    #fasicon-shu-louceng
  • 点位-灭火器点
    #fasicon-dianwei-miehuoqidian
  • 点位-数据点
    #fasicon-dianwei-shujudian
  • 点位-巡检点
    #fasicon-dianwei-xunjiandian
  • 点位-水源点
    #fasicon-dianwei-shuiyuandian
  • 点位-泡沫间点
    #fasicon-dianwei-paomojiandian
  • 点位-监控点
    #fasicon-dianwei-jiankongdian
  • 点位-消防室点
    #fasicon-dianwei-xiaofangshidian
  • 步骤-保存
    #fasicon-buzhou-baocun
  • 步骤-提示
    #fasicon-buzhou-tishi
  • 步骤-图片
    #fasicon-buzhou-tupian
  • 步骤-道路
    #fasicon-buzhou-daolu
  • 步骤-消息
    #fasicon-buzhou-xiaoxi
  • 步骤-指挥权
    #fasicon-buzhou-zhihuiquan
  • 步骤-确认
    #fasicon-buzhou-queren
  • 步骤-电话
    #fasicon-buzhou-dianhua
  • 步骤-故障报警
    #fasicon-buzhou-guzhangbaojing
  • 分享
    #fasicon-fenxiang1
  • 下载
    #fasicon-xiazai1
  • 路线-自定义
    #fasicon-luxian-zidingyi
  • 路线-侦查
    #fasicon-luxian-zhencha
  • 路线-进攻
    #fasicon-luxian-jingong
  • 路线-撤退
    #fasicon-luxian-chetui
  • 路线-疏散
    #fasicon-luxian-shusan
  • 路线-排烟
    #fasicon-luxian-paiyan
  • 路线-供水
    #fasicon-luxian-gongshui
  • 路线-破拆
    #fasicon-luxian-pochai
  • 监控
    #fasicon-jiankong
  • 鼠标-平移
    #fasicon-shubiao-pingyi
  • 键盘-平移
    #fasicon-jianpan-pingyi
  • 风险点
    #fasicon-fengxiandian1
  • 配置权限
    #fasicon-peizhiquanxian1
  • 区域-矩形
    #fasicon-quyu-juxing
  • 区域-圆形
    #fasicon-quyu-yuanxing
  • 区域-自定义
    #fasicon-quyu-zidingyi
  • 键盘-缩放
    #fasicon-jianpan-suofang
  • 鼠标-缩放
    #fasicon-shubiao-suofang
  • 显示窗-右边栏
    #fasicon-xianshichuang-youbianlan
  • 显示窗-左边栏
    #fasicon-xianshichuang-zuobianlan
  • 视图-网格
    #fasicon-shitu-wangge
  • 视图-列表
    #fasicon-shitu-liebiao
  • 预案-图例
    #fasicon-yuan-tuli
  • 预案-全屏
    #fasicon-yuan-quanping
  • 预案-字幕
    #fasicon-yuan-zimu
  • 图例
    #fasicon-tuli
  • 控制台-巡检记录
    #fasicon-kongzhitai-xunjianjilu
  • 控制台-任务安排
    #fasicon-kongzhitai-renwuanpai
  • 控制台-检查项目
    #fasicon-kongzhitai-jianchaxiangmu
  • 控制台-巡检点
    #fasicon-kongzhitai-xunjiandian
  • 控制台-巡检路线
    #fasicon-kongzhitai-xunjianluxian
  • 控制台-巡检计划
    #fasicon-kongzhitai-xunjianjihua
  • 控制台-分类目录
    #fasicon-kongzhitai-fenleimulu
  • 控制台-统计分析
    #fasicon-kongzhitai-tongjifenxi
  • 键盘-重置
    #fasicon-jianpan-zhongzhi
  • 鼠标-重置
    #fasicon-shubiao-zhongzhi
  • 分享
    #fasicon-fenxiang
  • 预案-火情
    #fasicon-yuan-huoqing
  • 预案-路线
    #fasicon-yuan-luxian
  • 预案-消防车
    #fasicon-yuan-xiaofangche
  • 预案-战斗力量
    #fasicon-yuan-zhandouliliang
  • 预案-消防装备
    #fasicon-yuan-xiaofangzhuangbei
  • 点位-重点设备
    #fasicon-dianwei-zhongdianshebei
  • 重点设备
    #fasicon-zhongdianshebei1
  • 鼠标-旋转
    #fasicon-shubiao-xuanzhuan
  • 键盘-旋转
    #fasicon-jianpan-xuanzhuan
  • 预案-链接路径
    #fasicon-yuan-lianjielujing
  • 预案-规则
    #fasicon-yuan-guize
  • 预案-属性
    #fasicon-yuan-shuxing
  • 预案-步骤
    #fasicon-yuan-buzhou
  • 最佳视角
    #fasicon-zuijiashijiao
  • 配置监测点
    #fasicon-peizhijiancedian
  • 确认
    #fasicon-queren
  • 取消
    #fasicon-quxiao2
  • 监控
    #fasicon-jiankong2
  • zhixingtanchuang-dui
    #fasicon-zhixingtanchuang-dui
  • 作业活动
    #fasicon-zuoyehuodong
  • 风险点
    #fasicon-fengxiandian2
  • 化工设备
    #fasicon-huagongshebei
  • 隐患点
    #fasicon-yinhuandian
  • 模块点
    #fasicon-mokuaidian
  • 流程图/流程状态
    #fasicon-liuchengtuliuchengzhuangtai
  • 流程
    #fasicon-liucheng

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>