• 离线
    
  • wifioff无线网
    
  • line-WiFi off(关闭无线)
    
  • 路障2
    
  • 电池-充电
    
  • 电池-高电量
    
  • 
  • 
  • 湿度
    
  • 湿度-异常
    
  • 温度-异常
    
  • 温度
    
  • 大屏-风力
    
  • 大屏-风力 1-异常
    
  • 大屏-降雨量 1-异常
    
  • 大屏-光强
    
  • 大屏-气压
    
  • 大屏-降雨量
    
  • 大屏-光强 1-异常
    
  • 大屏-PM10
    
  • 大屏-焦糊味 1-异常
    
  • 大屏-风向
    
  • 大屏-PM10 1-异常
    
  • 大屏-风向 1-异常
    
  • 大屏-焦糊味
    
  • 大屏-气压 1-异常
    
  • 大屏-风速 1-异常
    
  • 大屏-风速
    
  • wifi
    
  • 网络
    
  • 大屏-臭氧-异常
    
  • 大屏-六氟化硫-异常
    
  • 大屏-明火
    
  • 大屏-二氧化碳
    
  • 大屏-PM2.5.-异常
    
  • 大屏-氧气-异常
    
  • 大屏-甲烷-异常
    
  • 大屏-一氧化碳-异常
    
  • 大屏-烟雾-异常
    
  • 闪电
    
  • 闪电
    
  • 速度_speed8
    
  • 里程
    
  • 作业里程
    
  • 时间
    
  • 转速表,仪表盘,测速,速度
    
  • 速度
    
  • 大屏-氧气
    
  • 大屏-二氧化碳
    
  • 大屏-六氟化硫
    
  • 大屏-臭氧
    
  • 大屏-甲烷
    
  • 大屏-pm2.5
    
  • 大屏-一氧化碳
    
  • 大屏-烟雾
    
  • 大屏-明火
    
  • 密码
    
  • 用户2
    
  • 密码
    
  • 用户
    
  • 密码
    
  • 密码
    
  • 地图2
    
  • 地图-线
    
  • 障碍物
    
  • 坐标
    
  • 工作状态
    
  • 闪电
    
  • 闪电
    
  • 闪电
    
  • 到这去
    
  • 返回
    
  • 退出
    
  • 退出
    
  • 告警消息
    
  • 机器人列表
    
  • 创建任务
    
  • 在线
    
  • 离线
    
  • 任务列表
    
  • 首页
    
  • 首页
    
  • 首页
    
  • YDUI-感叹号(空心)
    
  • 安卓
    
  • 307感叹号-线性圆框
    
  • 感叹号中
    
  • 插件-样式置换
    
  • 切换
    
  • 置换
    
  • 放大
    
  • 放大
    
  • 缩放
    
  • 缩放
    
  • 缩放
    
  • 缩放
    
  • 全屏
    
  • 缩放
    
  • 缩放缩小
    
  • 008屏幕放大
    
  • N屏幕放大
    
  • 放大
    
  • 加减-02
    
  • 加减-01
    
  • 加减-02
    
  • 加减-01
    
  • 加减-1
    
  • 缩放比例
    
  • 默认缩放
    
  • 缩放
    
  • 缩放
    
  • 缩放
    
  • 缩放
    
  • 缩放
    
  • 缩放窗口
    
  • 缩放
    
  • 缩放
    
  • 全屏缩放
    
  • 全屏缩放
    
  • 缩放
    
  • 缩放
    
  • 缩放
    
  • 关闭
    
  • 告警
    
  • 关闭
    
  • 告警列表_告警中_灰色
    
  • 直行右转
    
  • 直行右转
    
  • 直行右转
    
  • 直行右转
    
  • 直行左转
    
  • 直行左转
    
  • 直行左转
    
  • 直行左转
    
  • 左箭头
    
  • 方向-右
    
  • 方向-左
    
  • 箭头
    
  • 位置
    
  • 
  • 返利
    
  • 返利
    
  • 暂停
    
  • 暂停
    
  • 
  • 充电
    
  • 左箭头
    
  • 左箭头
    
  • 左箭头
    
  • 甲烷-图标-svg
    
  • PM10
    
  • 降雨量-图标-svg
    
  • 气压-图标-svg
    
  • PM2.5
    
  • 风向-图标-svg
    
  • 明火
    
  • 风速
    
  • 风力-图标-svg
    
  • 温度-图标-svg
    
  • 臭氧-图标-svg
    
  • 氧气-图标-svg
    
  • 二氧化碳
    
  • SF6
    
  • 光强
    
  • 烟雾
    
  • 添加图标
    
  • 焦糊味-图标-svg
    
  • 取消图标
    
  • 一氧化碳
    
  • 湿度-图标-svg
    
  • 播放
    
  • 播放
    
  • 暂停
    
  • 暂停
    
  • 播放2
    
  • 暂停
    
  • 左-圆
    
  • 播放
    
  • 
  • 暂停
    
  • 暂停
    
  • 
  • 24gl-playCircle
    
  • 暂停
    
  • 左-圆
    
  • 视频
    
  • 音乐模式
    
  • 菜单
    
  • 电量
    
  • 障碍
    
  • 电量3
    
  • 缩放
    
  • 缩放
    
  • 
  • 烟雾感应器
    
  • 焦糊味
    
  • 导出
    
  • 导入
    
  • 交互
    
  • 曲线图
    
  • 音频
    
  • 相机
    
  • 曲线
    
  • 曲线
    
  • 曲线
    
  • 曲线加工
    
  • 图片
    
  • 图片
    
  • 图片
    
  • 图片
    
  • 启用
    
  • 启用
    
  • 启用
    
  • 
  • 方向-左
    
  • 
  • 箭头
    
  • 箭头
    
  • 电量
    
  • 电量
    
  • 电量
    
  • 电量
    
  • 大屏
    
  • 风向
    
  • 降雨量
    
  • 风力
    
  • CO
    
  • CO2
    
  • 菱形-左右
    
  • 风向
    
  • 菱形-上下
    
  • 气压
    
  • 降雨量
    
  • O3
    
  • SF6
    
  • 在线状态
    
  • 运行时长
    
  • 电量
    
  • 运行里程
    
  • 温度
    
  • 当前速度
    
  • 电脑
    
  • PM2.5
    
  • 导出
    
  • 导出
    
  • 导出
    
  • 导出
    
  • 菱形
    
  • 
  • 
  • 
  • 
    
  • 
  • 
  • 时 间
    
  • 
  • 分类
    
  • 恢复执行
    
  • 终止
    
  • 修改密码
    
  • 日志
    
  • 取消
    
  • 查看
    
  • 暂停
    
  • 禁用
    
  • 启用
    
  • 报告
    
  • 权限
    
  • 任务下发
    
  • 数据分析
    
  • 删 除
    
  • 修改
    
  • 审核
    
  • 已读
    
  • √○
    
  • 麦克风关闭
    
  • 线_图形对象_jurassic
    
  • 表格
    
  • 表格
    
  • 图形
    
  • x
    
  • x
    
  • x
    
  • 告警
    
  • 提示
    
  • 提示
    
  • 告警
    
  • 提示
    
  • 告警
    
  • 删 除
    
  • X
    
  • x
    
  • 喇叭
    
  • 喇叭
    
  • 喇叭
    
  • 喇叭
    
  • 喇叭
    
  • 喇叭
    
  • 喇叭
    
  • 光强检测器
    
  • 电池
    
  • 电池
    
  • 持平
    
  • 持平
    
  • 上升
    
  • 上升
    
  • 上升
    
  • 上升
    
  • 
  • 
  • 
  • 
  • 
  • 铃铛
    
  • 问号
    
  • 退出 (5)
    
  • 退出 (1)
    
  • 铃铛
    
  • 问号
    
  • 取消全屏
    
  • 取消全屏
    
  • -上升
    
  • 下降
    
  • 上升
    
  • -上升
    
  • 静音
    
  • 变焦-
    
  • 变焦+
    
  • 光圈 缩小
    
  • 光圈 放大
    
  • 变焦减-01
    
  • 变焦加-01
    
  • 放大
    
  • 放小
    
  • 导航
    
  • 放大
    
  • 用户
    
  • 复位
    
  • 用户
    
  • 日历
    
  • 导出
    
  • SF6
    
  • 
  • 列表
    
  • 加号
    
  • 查询
    
  • 
  • 重置
    
  • 左上
    
  • 左上
    
  • 左上
    
  • 左上
    
  • 左上
    
  • 左上
    
  • 左上
    
  • 左上
    
  • 
  • 
  • tingzhi
    
  • 左上
    
  • 
  • 左上
    
  • 左上
    
  • 
  • 
  • 
  • 左上
    
  • 左上
    
  • 障碍
    
  • 
  • 撤销
    
  • 撤销
    
  • 充电
    
  • 无线网络
    
  • 
  • tup
    
  • 对讲
    
  • 
    
  • 
  • 
  • 
  • 全屏
    
  • 取消全屏
    
  • 里程
    
  • 二氧化碳
    
  • 
  • 放电
    
  • 电池
    
  • 时间
    
  • 电池
    
  • 充电
    
  • 视角
    
  • 充电
    
  • 速度
    
  • 电池电压
    
  • 温度 (3)
    
  • 巡检任务
    
  • 实时监控
    
  • 机器人
    
  • 告警
    
  • 历史数据
    
  • 手动控制
    
  • 手动
    
  • 设 置
    
  • 一氧化碳
    
  • 
  • SF6
    
  • 通信
    
  • 烟雾报警灯(白色)
    
  • 臭氧
    
  • 湿度
    
  • 烟雾
    
  • 放电
    
  • fangdian
    
  • 气温
    

Unicode 引用


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

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

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

Unicode 使用步骤如下:

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

@font-face {
  font-family: 'iconfont';
  src: url('iconfont.woff2?t=1657162974308') format('woff2'),
       url('iconfont.woff?t=1657162974308') format('woff'),
       url('iconfont.ttf?t=1657162974308') 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-lixian1
  • wifioff无线网
    .icon-wifioffwuxianwang
  • line-WiFi off(关闭无线)
    .icon-line-WiFioffguanbiwuxian
  • 路障2
    .icon-luzhang1
  • 电池-充电
    .icon-dianchi-chongdian
  • 电池-高电量
    .icon-dianchi-gaodianliang
  • .icon-dian2
  • .icon-dian3
  • 湿度
    .icon-HUMIDITY-sw
  • 湿度-异常
    .icon-HUMIDITY-swf
  • 温度-异常
    .icon-TEMPERATURE-swf
  • 温度
    .icon-TEMPERATURE-sw
  • 大屏-风力
    .icon-WINDPOWER-sw
  • 大屏-风力 1-异常
    .icon-WINDPOWER-swf
  • 大屏-降雨量 1-异常
    .icon-RAINFALL-swf
  • 大屏-光强
    .icon-LIGHT-sw
  • 大屏-气压
    .icon-AIRPRESSURE-sw
  • 大屏-降雨量
    .icon-RAINFALL-sw
  • 大屏-光强 1-异常
    .icon-LIGHT-swf
  • 大屏-PM10
    .icon-PM10-sw
  • 大屏-焦糊味 1-异常
    .icon-ANXIOUSBURNTFLAVOUR-swf
  • 大屏-风向
    .icon-WINDDIRECTION-sw
  • 大屏-PM10 1-异常
    .icon-PM10-swf
  • 大屏-风向 1-异常
    .icon-WINDDIRECTION-swf
  • 大屏-焦糊味
    .icon-ANXIOUSBURNTFLAVOUR-sw
  • 大屏-气压 1-异常
    .icon-AIRPRESSURE-swf
  • 大屏-风速 1-异常
    .icon-WINDSPEED-swf
  • 大屏-风速
    .icon-WINDSPEED-sw
  • wifi
    .icon-wifi
  • 网络
    .icon-xinhao
  • 大屏-臭氧-异常
    .icon-O3-swf
  • 大屏-六氟化硫-异常
    .icon-SF6-swf
  • 大屏-明火
    .icon-FIRE-sw
  • 大屏-二氧化碳
    .icon-CO2-sw
  • 大屏-PM2.5.-异常
    .icon-PM-swf
  • 大屏-氧气-异常
    .icon-O2-swf
  • 大屏-甲烷-异常
    .icon-daping-jiawan-yichang
  • 大屏-一氧化碳-异常
    .icon-CO-swf
  • 大屏-烟雾-异常
    .icon-MQ-swf
  • 闪电
    .icon-shandian3
  • 闪电
    .icon-shandian4
  • 速度_speed8
    .icon-suduspeed8
  • 里程
    .icon-licheng
  • 作业里程
    .icon-zuoyelicheng
  • 时间
    .icon-shijian1
  • 转速表,仪表盘,测速,速度
    .icon-dashboard
  • 速度
    .icon-sudu1
  • 大屏-氧气
    .icon-O2-sw
  • 大屏-二氧化碳
    .icon-CO2-swf
  • 大屏-六氟化硫
    .icon-SF6-sw
  • 大屏-臭氧
    .icon-O3-sw
  • 大屏-甲烷
    .icon-daping-jiawan
  • 大屏-pm2.5
    .icon-PM-sw
  • 大屏-一氧化碳
    .icon-CO-sw
  • 大屏-烟雾
    .icon-MQ-sw
  • 大屏-明火
    .icon-FIRE-swf
  • 密码
    .icon-mima
  • 用户2
    .icon-yonghu1
  • 密码
    .icon-mima1
  • 用户
    .icon-yonghu3
  • 密码
    .icon-mima2
  • 密码
    .icon-mima3
  • 地图2
    .icon-map_location_
  • 地图-线
    .icon-ditu-xian
  • 障碍物
    .icon-zhangaiwu
  • 坐标
    .icon-zuobiao
  • 工作状态
    .icon-gongzuozhuangtai
  • 闪电
    .icon-shandian
  • 闪电
    .icon-shandian1
  • 闪电
    .icon-shandian2
  • 到这去
    .icon-daozhequ
  • 返回
    .icon-fanhui
  • 退出
    .icon-tuichu1
  • 退出
    .icon-tuichu2
  • 告警消息
    .icon-gaojingxiaoxi
  • 机器人列表
    .icon-jiqirenliebiao
  • 创建任务
    .icon-chuangjianrenwu
  • 在线
    .icon-zaixian
  • 离线
    .icon-lixian
  • 任务列表
    .icon-renwuliebiao
  • 首页
    .icon-shouye
  • 首页
    .icon-shouye1
  • 首页
    .icon-shouye2
  • YDUI-感叹号(空心)
    .icon-yduigantanhaokongxin
  • 安卓
    .icon-anzhuo
  • 307感叹号-线性圆框
    .icon-gantanhao-xianxingyuankuang
  • 感叹号中
    .icon-gantanhaozhong
  • 插件-样式置换
    .icon-chajian-yangshizhihuan
  • 切换
    .icon-qiehuan
  • 置换
    .icon-zhihuan
  • 放大
    .icon-fangda3
  • 放大
    .icon-fangda4
  • 缩放
    .icon-suofang11
  • 缩放
    .icon-suofang12
  • 缩放
    .icon-suofang13
  • 缩放
    .icon-suofang14
  • 全屏
    .icon-quanping_huaban
  • 缩放
    .icon-suofang15
  • 缩放缩小
    .icon-suofangsuoxiao
  • 008屏幕放大
    .icon-pingmufangda111
  • N屏幕放大
    .icon-pingmufangda1
  • 放大
    .icon-fangda2
  • 加减-02
    .icon-jiajian-
  • 加减-01
    .icon-jiajian-1
  • 加减-02
    .icon-jiajian-2
  • 加减-01
    .icon-jiajian-3
  • 加减-1
    .icon-jiajian-11
  • 缩放比例
    .icon-suofangbili
  • 默认缩放
    .icon-morensuofang
  • 缩放
    .icon-suoxiao
  • 缩放
    .icon-suofang7
  • 缩放
    .icon-suofang8
  • 缩放
    .icon-suofang9
  • 缩放
    .icon-suofang10
  • 缩放窗口
    .icon-suofangchuangkou
  • 缩放
    .icon-suofang2
  • 缩放
    .icon-suofang3
  • 全屏缩放
    .icon-quanpingsuofang
  • 全屏缩放
    .icon-quanpingsuofang1
  • 缩放
    .icon-suofang4
  • 缩放
    .icon-suofang5
  • 缩放
    .icon-suofang6
  • 关闭
    .icon-guanbi
  • 告警
    .icon-gaojing3
  • 关闭
    .icon-guanbi1
  • 告警列表_告警中_灰色
    .icon-gaojingliebiao_gaojingzhong_huise
  • 直行右转
    .icon-zhihangyouzhuan-copy-copy
  • 直行右转
    .icon-zhihangyouzhuan-copy
  • 直行右转
    .icon-zhihangyouzhuan
  • 直行右转
    .icon-zhihangyouzhuan-copy1
  • 直行左转
    .icon-zhihangzuozhuan-copy-copy
  • 直行左转
    .icon-zhihangzuozhuan
  • 直行左转
    .icon-zhihangzuozhuan-copy
  • 直行左转
    .icon-zhihangzuozhuan-copy1
  • 左箭头
    .icon-zuojiantou
  • 方向-右
    .icon-you
  • 方向-左
    .icon-zuo6
  • 箭头
    .icon-jiantou1
  • 位置
    .icon-weizhi
  • .icon-fan
  • 返利
    .icon-fanli
  • 返利
    .icon-fanli1
  • 暂停
    .icon-zanting5
  • 暂停
    .icon-zanting6
  • .icon-fan1
  • 充电
    .icon-chongdian1
  • 左箭头
    .icon-zuojiantou-copy
  • 左箭头
    .icon-zuojiantou-copy1
  • 左箭头
    .icon-zuojiantou-copy2
  • 甲烷-图标-svg
    .icon-jiawan-tubiao-svg
  • PM10
    .icon-PM10
  • 降雨量-图标-svg
    .icon-RAINFALL1
  • 气压-图标-svg
    .icon-AIRPRESSURE
  • PM2.5
    .icon-PM
  • 风向-图标-svg
    .icon-WINDDIRECTION
  • 明火
    .icon-FIRE
  • 风速
    .icon-WINDSPEED
  • 风力-图标-svg
    .icon-WINDPOWER
  • 温度-图标-svg
    .icon-TEMPERATURE
  • 臭氧-图标-svg
    .icon-O3
  • 氧气-图标-svg
    .icon-O2
  • 二氧化碳
    .icon-CO2
  • SF6
    .icon-SF6
  • 光强
    .icon-LIGHT
  • 烟雾
    .icon-MQ
  • 添加图标
    .icon-tianjiatubiao
  • 焦糊味-图标-svg
    .icon-ANXIOUSBURNTFLAVOUR
  • 取消图标
    .icon-quxiaotubiao
  • 一氧化碳
    .icon-CO
  • 湿度-图标-svg
    .icon-HUMIDITY
  • 播放
    .icon-bofang
  • 播放
    .icon-bofang1
  • 暂停
    .icon-zanting1
  • 暂停
    .icon-iconstop
  • 播放2
    .icon-bofang2
  • 暂停
    .icon-zanting2
  • 左-圆
    .icon-zuo-yuan
  • 播放
    .icon-bofang3
  • .icon-zuo4
  • 暂停
    .icon-zanting3
  • 暂停
    .icon-zanting4
  • .icon-zuo5
  • 24gl-playCircle
    .icon-24gl-playCircle
  • 暂停
    .icon-pause-circle
  • 左-圆
    .icon-zuo-yuan-copy
  • 视频
    .icon-shipin
  • 音乐模式
    .icon-yinlemoshi
  • 菜单
    .icon-ego-menu
  • 电量
    .icon-dianliang5
  • 障碍
    .icon-zhangai
  • 电量3
    .icon-dianliang6
  • 缩放
    .icon-suofang
  • 缩放
    .icon-suofang1
  • .icon-dian1
  • 烟雾感应器
    .icon-yanwuganyingqi
  • 焦糊味
    .icon-jiaohuwei
  • 导出
    .icon-daochu3
  • 导入
    .icon-daoru
  • 交互
    .icon-jiaohu
  • 曲线图
    .icon-quxiantu
  • 音频
    .icon-yinpin
  • 相机
    .icon-xiangji
  • 曲线
    .icon-quxian
  • 曲线
    .icon-quxian1
  • 曲线
    .icon-quxian2
  • 曲线加工
    .icon-quxianjiagong
  • 图片
    .icon-tupian
  • 图片
    .icon-tupian1
  • 图片
    .icon-tupian2
  • 图片
    .icon-tupian3
  • 启用
    .icon-qiyong1
  • 启用
    .icon-cangpeitubiao_qiyong
  • 启用
    .icon-qiyong2
  • .icon-zuo2
  • 方向-左
    .icon-zuo21
  • .icon-zuo3
  • 箭头
    .icon-jiantou-copy
  • 箭头
    .icon-jiantou
  • 电量
    .icon-dianliang1
  • 电量
    .icon-dianliang2
  • 电量
    .icon-dianliang3
  • 电量
    .icon-dianliang4
  • 大屏
    .icon-daping
  • 风向
    .icon-fengxiang
  • 降雨量
    .icon-RAINFALL
  • 风力
    .icon-fengli
  • CO
    .icon-CO222
  • CO2
    .icon-CO22222
  • 菱形-左右
    .icon-lingxing-zuoyou
  • 风向
    .icon-fengxiang1
  • 菱形-上下
    .icon-lingxing-shangxia
  • 气压
    .icon-qiya1
  • 降雨量
    .icon-jiangyuliang1
  • O3
    .icon-O31
  • SF6
    .icon-SF61
  • 在线状态
    .icon-zaixianzhuangtai
  • 运行时长
    .icon-yunhangshichang
  • 电量
    .icon-dianliang
  • 运行里程
    .icon-yunhanglicheng
  • 温度
    .icon-wendu1
  • 当前速度
    .icon-dangqiansudu
  • 电脑
    .icon-diannao
  • PM2.5
    .icon-a-PM25
  • 导出
    .icon-daochu11-copy
  • 导出
    .icon-daochu1
  • 导出
    .icon-daochu11
  • 导出
    .icon-daochu2
  • 菱形
    .icon-lingxingzhedie
  • .icon-zuo
  • .icon-zuo1
  • .icon-zuo-copy
  • .icon-zuo-copy1
  • .icon-zuo-copy-copy
  • .icon-zuo1-copy
  • 时 间
    .icon-shijian
  • .icon-jia3
  • 分类
    .icon-fenlei
  • 恢复执行
    .icon-huifuzhixing
  • 终止
    .icon-zhongzhi1
  • 修改密码
    .icon-xiugaimima
  • 日志
    .icon-rizhi
  • 取消
    .icon-quxiao
  • 查看
    .icon-chakan
  • 暂停
    .icon-zanting
  • 禁用
    .icon-jinyong
  • 启用
    .icon-qiyong
  • 报告
    .icon-tubiao_-
  • 权限
    .icon-quanxian
  • 任务下发
    .icon-renwuxiafa
  • 数据分析
    .icon-shujufenxi
  • 删 除
    .icon-shanchu1
  • 修改
    .icon-xiugai
  • 审核
    .icon-shenhe
  • 已读
    .icon-biaojiquanbuyidu
  • √○
    .icon-icon-test
  • 麦克风关闭
    .icon-maikefengguanbi
  • 线_图形对象_jurassic
    .icon-jurassic_line-library
  • 表格
    .icon-biaoge
  • 表格
    .icon-huabanfuben
  • 图形
    .icon-tuxing
  • x
    .icon-xx
  • x
    .icon-x2
  • x
    .icon-x3
  • 告警
    .icon-gaojing
  • 提示
    .icon-tishi
  • 提示
    .icon-tishi1
  • 告警
    .icon-gaojing1
  • 提示
    .icon-tishi2
  • 告警
    .icon-gaojing2
  • 删 除
    .icon-shanchu
  • X
    .icon-X
  • x
    .icon-x1
  • 喇叭
    .icon-laba1
  • 喇叭
    .icon-laba2
  • 喇叭
    .icon-laba-
  • 喇叭
    .icon-laba3
  • 喇叭
    .icon-laba4
  • 喇叭
    .icon-laba
  • 喇叭
    .icon-laba-copy
  • 光强检测器
    .icon-guangqiangjianceqi
  • 电池
    .icon-dianchi2
  • 电池
    .icon-dianchi1
  • 持平
    .icon-chiping
  • 持平
    .icon-chiping1
  • 上升
    .icon-shangsheng11-copy
  • 上升
    .icon-shangsheng22-copy
  • 上升
    .icon-shangsheng1
  • 上升
    .icon-shangsheng2
  • .icon-jia2
  • .icon-wuuiconxiangjifangda
  • .icon-default
  • .icon-jian1
  • .icon-jia1
  • 铃铛
    .icon-lingdang1
  • 问号
    .icon-wenhao
  • 退出 (5)
    .icon-tuichu5
  • 退出 (1)
    .icon-tuichu
  • 铃铛
    .icon-lingdang
  • 问号
    .icon-wenhao1
  • 取消全屏
    .icon-quxiaoquanping1
  • 取消全屏
    .icon-quxiaoquanping2
  • -上升
    .icon--shangsheng
  • 下降
    .icon-xiajiang
  • 上升
    .icon-shangsheng
  • -上升
    .icon--shangsheng-copy
  • 静音
    .icon-jingyin
  • 变焦-
    .icon-bianjiao-
  • 变焦+
    .icon-bianjiao
  • 光圈 缩小
    .icon-guangquansuoxiao
  • 光圈 放大
    .icon-guangquanfangda
  • 变焦减-01
    .icon-bianjiaojian-
  • 变焦加-01
    .icon-bianjiaojia-
  • 放大
    .icon-fangda
  • 放小
    .icon-fangxiao
  • 导航
    .icon-ziyuan
  • 放大
    .icon-fangda1
  • 用户
    .icon-yonghu
  • 复位
    .icon-fuwei
  • 用户
    .icon-yonghu2
  • 日历
    .icon-rili
  • 导出
    .icon-daochu
  • SF6
    .icon-SF1
  • .icon-jian
  • 列表
    .icon-liebiao
  • 加号
    .icon-jiahao
  • 查询
    .icon-chaxun
  • .icon-jia
  • 重置
    .icon-zhongzhi
  • 左上
    .icon-zuoshang-copy
  • 左上
    .icon-zuoshang1-copy-copy1
  • 左上
    .icon-zuoshang1-copy-copy-copy2
  • 左上
    .icon-zuoshang1-copy3
  • 左上
    .icon-zuoshang1-copy4
  • 左上
    .icon-zuoshang1-copy5
  • 左上
    .icon-zuoshang-copy1
  • 左上
    .icon-zuoshang
  • .icon-xin
  • .icon-shang1
  • tingzhi
    .icon-tingzhi
  • 左上
    .icon-zuoshang1
  • .icon-shang2
  • 左上
    .icon-zuoshang-copy2
  • 左上
    .icon-zuoshang-copy3
  • .icon-shang1-copy
  • .icon-shang1-copy1
  • .icon-shang1-copy2
  • 左上
    .icon-zuoshang1-copy-copy6
  • 左上
    .icon-zuoshang1-copy-copy
  • 障碍
    .icon-iconzhangai
  • .icon-fa-angle-down
  • 撤销
    .icon-chexiao
  • 撤销
    .icon-undo-
  • 充电
    .icon-juxingcopy
  • 无线网络
    .icon-wuxianwangluo
  • .icon-shang
  • tup
    .icon-icon-1
  • 对讲
    .icon-duijiang
  • .icon-shang-copy1
  • .icon-shang-copy2
  • .icon-shang-copy3
  • .icon-icon-test-copy-copy
  • 全屏
    .icon-quanping
  • 取消全屏
    .icon-quxiaoquanping
  • 里程
    .icon-mileage
  • 二氧化碳
    .icon-eryanghuatan
  • .icon-yuan
  • 放电
    .icon-fangdian1
  • 电池
    .icon-dianchi1-copy
  • 时间
    .icon-icon01
  • 电池
    .icon-dianchi
  • 充电
    .icon-chongdian
  • 视角
    .icon-shijiao
  • 充电
    .icon-Charge
  • 速度
    .icon-sudu
  • 电池电压
    .icon-dianchidianya
  • 温度 (3)
    .icon-wendu
  • 巡检任务
    .icon-xunjianrenwu
  • 实时监控
    .icon-shishijiankong
  • 机器人
    .icon-jiqiren
  • 告警
    .icon-icon-
  • 历史数据
    .icon-lishishuju
  • 手动控制
    .icon-weibiaoti-1_huaban1fuben
  • 手动
    .icon-shoudong
  • 设 置
    .icon-shezhi
  • 一氧化碳
    .icon-yiyanghuatan
  • .icon-dian
  • SF6
    .icon-SF
  • 通信
    .icon-tongxin
  • 烟雾报警灯(白色)
    .icon-yanwubaojingdengbaise
  • 臭氧
    .icon-chouyang
  • 湿度
    .icon-shidu
  • 烟雾
    .icon-yanwu
  • 放电
    .icon-tubiao-
  • fangdian
    .icon-fangdian
  • 气温
    .icon-qiwen

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-lixian1
  • wifioff无线网
    #icon-wifioffwuxianwang
  • line-WiFi off(关闭无线)
    #icon-line-WiFioffguanbiwuxian
  • 路障2
    #icon-luzhang1
  • 电池-充电
    #icon-dianchi-chongdian
  • 电池-高电量
    #icon-dianchi-gaodianliang
  • #icon-dian2
  • #icon-dian3
  • 湿度
    #icon-HUMIDITY-sw
  • 湿度-异常
    #icon-HUMIDITY-swf
  • 温度-异常
    #icon-TEMPERATURE-swf
  • 温度
    #icon-TEMPERATURE-sw
  • 大屏-风力
    #icon-WINDPOWER-sw
  • 大屏-风力 1-异常
    #icon-WINDPOWER-swf
  • 大屏-降雨量 1-异常
    #icon-RAINFALL-swf
  • 大屏-光强
    #icon-LIGHT-sw
  • 大屏-气压
    #icon-AIRPRESSURE-sw
  • 大屏-降雨量
    #icon-RAINFALL-sw
  • 大屏-光强 1-异常
    #icon-LIGHT-swf
  • 大屏-PM10
    #icon-PM10-sw
  • 大屏-焦糊味 1-异常
    #icon-ANXIOUSBURNTFLAVOUR-swf
  • 大屏-风向
    #icon-WINDDIRECTION-sw
  • 大屏-PM10 1-异常
    #icon-PM10-swf
  • 大屏-风向 1-异常
    #icon-WINDDIRECTION-swf
  • 大屏-焦糊味
    #icon-ANXIOUSBURNTFLAVOUR-sw
  • 大屏-气压 1-异常
    #icon-AIRPRESSURE-swf
  • 大屏-风速 1-异常
    #icon-WINDSPEED-swf
  • 大屏-风速
    #icon-WINDSPEED-sw
  • wifi
    #icon-wifi
  • 网络
    #icon-xinhao
  • 大屏-臭氧-异常
    #icon-O3-swf
  • 大屏-六氟化硫-异常
    #icon-SF6-swf
  • 大屏-明火
    #icon-FIRE-sw
  • 大屏-二氧化碳
    #icon-CO2-sw
  • 大屏-PM2.5.-异常
    #icon-PM-swf
  • 大屏-氧气-异常
    #icon-O2-swf
  • 大屏-甲烷-异常
    #icon-daping-jiawan-yichang
  • 大屏-一氧化碳-异常
    #icon-CO-swf
  • 大屏-烟雾-异常
    #icon-MQ-swf
  • 闪电
    #icon-shandian3
  • 闪电
    #icon-shandian4
  • 速度_speed8
    #icon-suduspeed8
  • 里程
    #icon-licheng
  • 作业里程
    #icon-zuoyelicheng
  • 时间
    #icon-shijian1
  • 转速表,仪表盘,测速,速度
    #icon-dashboard
  • 速度
    #icon-sudu1
  • 大屏-氧气
    #icon-O2-sw
  • 大屏-二氧化碳
    #icon-CO2-swf
  • 大屏-六氟化硫
    #icon-SF6-sw
  • 大屏-臭氧
    #icon-O3-sw
  • 大屏-甲烷
    #icon-daping-jiawan
  • 大屏-pm2.5
    #icon-PM-sw
  • 大屏-一氧化碳
    #icon-CO-sw
  • 大屏-烟雾
    #icon-MQ-sw
  • 大屏-明火
    #icon-FIRE-swf
  • 密码
    #icon-mima
  • 用户2
    #icon-yonghu1
  • 密码
    #icon-mima1
  • 用户
    #icon-yonghu3
  • 密码
    #icon-mima2
  • 密码
    #icon-mima3
  • 地图2
    #icon-map_location_
  • 地图-线
    #icon-ditu-xian
  • 障碍物
    #icon-zhangaiwu
  • 坐标
    #icon-zuobiao
  • 工作状态
    #icon-gongzuozhuangtai
  • 闪电
    #icon-shandian
  • 闪电
    #icon-shandian1
  • 闪电
    #icon-shandian2
  • 到这去
    #icon-daozhequ
  • 返回
    #icon-fanhui
  • 退出
    #icon-tuichu1
  • 退出
    #icon-tuichu2
  • 告警消息
    #icon-gaojingxiaoxi
  • 机器人列表
    #icon-jiqirenliebiao
  • 创建任务
    #icon-chuangjianrenwu
  • 在线
    #icon-zaixian
  • 离线
    #icon-lixian
  • 任务列表
    #icon-renwuliebiao
  • 首页
    #icon-shouye
  • 首页
    #icon-shouye1
  • 首页
    #icon-shouye2
  • YDUI-感叹号(空心)
    #icon-yduigantanhaokongxin
  • 安卓
    #icon-anzhuo
  • 307感叹号-线性圆框
    #icon-gantanhao-xianxingyuankuang
  • 感叹号中
    #icon-gantanhaozhong
  • 插件-样式置换
    #icon-chajian-yangshizhihuan
  • 切换
    #icon-qiehuan
  • 置换
    #icon-zhihuan
  • 放大
    #icon-fangda3
  • 放大
    #icon-fangda4
  • 缩放
    #icon-suofang11
  • 缩放
    #icon-suofang12
  • 缩放
    #icon-suofang13
  • 缩放
    #icon-suofang14
  • 全屏
    #icon-quanping_huaban
  • 缩放
    #icon-suofang15
  • 缩放缩小
    #icon-suofangsuoxiao
  • 008屏幕放大
    #icon-pingmufangda111
  • N屏幕放大
    #icon-pingmufangda1
  • 放大
    #icon-fangda2
  • 加减-02
    #icon-jiajian-
  • 加减-01
    #icon-jiajian-1
  • 加减-02
    #icon-jiajian-2
  • 加减-01
    #icon-jiajian-3
  • 加减-1
    #icon-jiajian-11
  • 缩放比例
    #icon-suofangbili
  • 默认缩放
    #icon-morensuofang
  • 缩放
    #icon-suoxiao
  • 缩放
    #icon-suofang7
  • 缩放
    #icon-suofang8
  • 缩放
    #icon-suofang9
  • 缩放
    #icon-suofang10
  • 缩放窗口
    #icon-suofangchuangkou
  • 缩放
    #icon-suofang2
  • 缩放
    #icon-suofang3
  • 全屏缩放
    #icon-quanpingsuofang
  • 全屏缩放
    #icon-quanpingsuofang1
  • 缩放
    #icon-suofang4
  • 缩放
    #icon-suofang5
  • 缩放
    #icon-suofang6
  • 关闭
    #icon-guanbi
  • 告警
    #icon-gaojing3
  • 关闭
    #icon-guanbi1
  • 告警列表_告警中_灰色
    #icon-gaojingliebiao_gaojingzhong_huise
  • 直行右转
    #icon-zhihangyouzhuan-copy-copy
  • 直行右转
    #icon-zhihangyouzhuan-copy
  • 直行右转
    #icon-zhihangyouzhuan
  • 直行右转
    #icon-zhihangyouzhuan-copy1
  • 直行左转
    #icon-zhihangzuozhuan-copy-copy
  • 直行左转
    #icon-zhihangzuozhuan
  • 直行左转
    #icon-zhihangzuozhuan-copy
  • 直行左转
    #icon-zhihangzuozhuan-copy1
  • 左箭头
    #icon-zuojiantou
  • 方向-右
    #icon-you
  • 方向-左
    #icon-zuo6
  • 箭头
    #icon-jiantou1
  • 位置
    #icon-weizhi
  • #icon-fan
  • 返利
    #icon-fanli
  • 返利
    #icon-fanli1
  • 暂停
    #icon-zanting5
  • 暂停
    #icon-zanting6
  • #icon-fan1
  • 充电
    #icon-chongdian1
  • 左箭头
    #icon-zuojiantou-copy
  • 左箭头
    #icon-zuojiantou-copy1
  • 左箭头
    #icon-zuojiantou-copy2
  • 甲烷-图标-svg
    #icon-jiawan-tubiao-svg
  • PM10
    #icon-PM10
  • 降雨量-图标-svg
    #icon-RAINFALL1
  • 气压-图标-svg
    #icon-AIRPRESSURE
  • PM2.5
    #icon-PM
  • 风向-图标-svg
    #icon-WINDDIRECTION
  • 明火
    #icon-FIRE
  • 风速
    #icon-WINDSPEED
  • 风力-图标-svg
    #icon-WINDPOWER
  • 温度-图标-svg
    #icon-TEMPERATURE
  • 臭氧-图标-svg
    #icon-O3
  • 氧气-图标-svg
    #icon-O2
  • 二氧化碳
    #icon-CO2
  • SF6
    #icon-SF6
  • 光强
    #icon-LIGHT
  • 烟雾
    #icon-MQ
  • 添加图标
    #icon-tianjiatubiao
  • 焦糊味-图标-svg
    #icon-ANXIOUSBURNTFLAVOUR
  • 取消图标
    #icon-quxiaotubiao
  • 一氧化碳
    #icon-CO
  • 湿度-图标-svg
    #icon-HUMIDITY
  • 播放
    #icon-bofang
  • 播放
    #icon-bofang1
  • 暂停
    #icon-zanting1
  • 暂停
    #icon-iconstop
  • 播放2
    #icon-bofang2
  • 暂停
    #icon-zanting2
  • 左-圆
    #icon-zuo-yuan
  • 播放
    #icon-bofang3
  • #icon-zuo4
  • 暂停
    #icon-zanting3
  • 暂停
    #icon-zanting4
  • #icon-zuo5
  • 24gl-playCircle
    #icon-24gl-playCircle
  • 暂停
    #icon-pause-circle
  • 左-圆
    #icon-zuo-yuan-copy
  • 视频
    #icon-shipin
  • 音乐模式
    #icon-yinlemoshi
  • 菜单
    #icon-ego-menu
  • 电量
    #icon-dianliang5
  • 障碍
    #icon-zhangai
  • 电量3
    #icon-dianliang6
  • 缩放
    #icon-suofang
  • 缩放
    #icon-suofang1
  • #icon-dian1
  • 烟雾感应器
    #icon-yanwuganyingqi
  • 焦糊味
    #icon-jiaohuwei
  • 导出
    #icon-daochu3
  • 导入
    #icon-daoru
  • 交互
    #icon-jiaohu
  • 曲线图
    #icon-quxiantu
  • 音频
    #icon-yinpin
  • 相机
    #icon-xiangji
  • 曲线
    #icon-quxian
  • 曲线
    #icon-quxian1
  • 曲线
    #icon-quxian2
  • 曲线加工
    #icon-quxianjiagong
  • 图片
    #icon-tupian
  • 图片
    #icon-tupian1
  • 图片
    #icon-tupian2
  • 图片
    #icon-tupian3
  • 启用
    #icon-qiyong1
  • 启用
    #icon-cangpeitubiao_qiyong
  • 启用
    #icon-qiyong2
  • #icon-zuo2
  • 方向-左
    #icon-zuo21
  • #icon-zuo3
  • 箭头
    #icon-jiantou-copy
  • 箭头
    #icon-jiantou
  • 电量
    #icon-dianliang1
  • 电量
    #icon-dianliang2
  • 电量
    #icon-dianliang3
  • 电量
    #icon-dianliang4
  • 大屏
    #icon-daping
  • 风向
    #icon-fengxiang
  • 降雨量
    #icon-RAINFALL
  • 风力
    #icon-fengli
  • CO
    #icon-CO222
  • CO2
    #icon-CO22222
  • 菱形-左右
    #icon-lingxing-zuoyou
  • 风向
    #icon-fengxiang1
  • 菱形-上下
    #icon-lingxing-shangxia
  • 气压
    #icon-qiya1
  • 降雨量
    #icon-jiangyuliang1
  • O3
    #icon-O31
  • SF6
    #icon-SF61
  • 在线状态
    #icon-zaixianzhuangtai
  • 运行时长
    #icon-yunhangshichang
  • 电量
    #icon-dianliang
  • 运行里程
    #icon-yunhanglicheng
  • 温度
    #icon-wendu1
  • 当前速度
    #icon-dangqiansudu
  • 电脑
    #icon-diannao
  • PM2.5
    #icon-a-PM25
  • 导出
    #icon-daochu11-copy
  • 导出
    #icon-daochu1
  • 导出
    #icon-daochu11
  • 导出
    #icon-daochu2
  • 菱形
    #icon-lingxingzhedie
  • #icon-zuo
  • #icon-zuo1
  • #icon-zuo-copy
  • #icon-zuo-copy1
  • #icon-zuo-copy-copy
  • #icon-zuo1-copy
  • 时 间
    #icon-shijian
  • #icon-jia3
  • 分类
    #icon-fenlei
  • 恢复执行
    #icon-huifuzhixing
  • 终止
    #icon-zhongzhi1
  • 修改密码
    #icon-xiugaimima
  • 日志
    #icon-rizhi
  • 取消
    #icon-quxiao
  • 查看
    #icon-chakan
  • 暂停
    #icon-zanting
  • 禁用
    #icon-jinyong
  • 启用
    #icon-qiyong
  • 报告
    #icon-tubiao_-
  • 权限
    #icon-quanxian
  • 任务下发
    #icon-renwuxiafa
  • 数据分析
    #icon-shujufenxi
  • 删 除
    #icon-shanchu1
  • 修改
    #icon-xiugai
  • 审核
    #icon-shenhe
  • 已读
    #icon-biaojiquanbuyidu
  • √○
    #icon-icon-test
  • 麦克风关闭
    #icon-maikefengguanbi
  • 线_图形对象_jurassic
    #icon-jurassic_line-library
  • 表格
    #icon-biaoge
  • 表格
    #icon-huabanfuben
  • 图形
    #icon-tuxing
  • x
    #icon-xx
  • x
    #icon-x2
  • x
    #icon-x3
  • 告警
    #icon-gaojing
  • 提示
    #icon-tishi
  • 提示
    #icon-tishi1
  • 告警
    #icon-gaojing1
  • 提示
    #icon-tishi2
  • 告警
    #icon-gaojing2
  • 删 除
    #icon-shanchu
  • X
    #icon-X
  • x
    #icon-x1
  • 喇叭
    #icon-laba1
  • 喇叭
    #icon-laba2
  • 喇叭
    #icon-laba-
  • 喇叭
    #icon-laba3
  • 喇叭
    #icon-laba4
  • 喇叭
    #icon-laba
  • 喇叭
    #icon-laba-copy
  • 光强检测器
    #icon-guangqiangjianceqi
  • 电池
    #icon-dianchi2
  • 电池
    #icon-dianchi1
  • 持平
    #icon-chiping
  • 持平
    #icon-chiping1
  • 上升
    #icon-shangsheng11-copy
  • 上升
    #icon-shangsheng22-copy
  • 上升
    #icon-shangsheng1
  • 上升
    #icon-shangsheng2
  • #icon-jia2
  • #icon-wuuiconxiangjifangda
  • #icon-default
  • #icon-jian1
  • #icon-jia1
  • 铃铛
    #icon-lingdang1
  • 问号
    #icon-wenhao
  • 退出 (5)
    #icon-tuichu5
  • 退出 (1)
    #icon-tuichu
  • 铃铛
    #icon-lingdang
  • 问号
    #icon-wenhao1
  • 取消全屏
    #icon-quxiaoquanping1
  • 取消全屏
    #icon-quxiaoquanping2
  • -上升
    #icon--shangsheng
  • 下降
    #icon-xiajiang
  • 上升
    #icon-shangsheng
  • -上升
    #icon--shangsheng-copy
  • 静音
    #icon-jingyin
  • 变焦-
    #icon-bianjiao-
  • 变焦+
    #icon-bianjiao
  • 光圈 缩小
    #icon-guangquansuoxiao
  • 光圈 放大
    #icon-guangquanfangda
  • 变焦减-01
    #icon-bianjiaojian-
  • 变焦加-01
    #icon-bianjiaojia-
  • 放大
    #icon-fangda
  • 放小
    #icon-fangxiao
  • 导航
    #icon-ziyuan
  • 放大
    #icon-fangda1
  • 用户
    #icon-yonghu
  • 复位
    #icon-fuwei
  • 用户
    #icon-yonghu2
  • 日历
    #icon-rili
  • 导出
    #icon-daochu
  • SF6
    #icon-SF1
  • #icon-jian
  • 列表
    #icon-liebiao
  • 加号
    #icon-jiahao
  • 查询
    #icon-chaxun
  • #icon-jia
  • 重置
    #icon-zhongzhi
  • 左上
    #icon-zuoshang-copy
  • 左上
    #icon-zuoshang1-copy-copy1
  • 左上
    #icon-zuoshang1-copy-copy-copy2
  • 左上
    #icon-zuoshang1-copy3
  • 左上
    #icon-zuoshang1-copy4
  • 左上
    #icon-zuoshang1-copy5
  • 左上
    #icon-zuoshang-copy1
  • 左上
    #icon-zuoshang
  • #icon-xin
  • #icon-shang1
  • tingzhi
    #icon-tingzhi
  • 左上
    #icon-zuoshang1
  • #icon-shang2
  • 左上
    #icon-zuoshang-copy2
  • 左上
    #icon-zuoshang-copy3
  • #icon-shang1-copy
  • #icon-shang1-copy1
  • #icon-shang1-copy2
  • 左上
    #icon-zuoshang1-copy-copy6
  • 左上
    #icon-zuoshang1-copy-copy
  • 障碍
    #icon-iconzhangai
  • #icon-fa-angle-down
  • 撤销
    #icon-chexiao
  • 撤销
    #icon-undo-
  • 充电
    #icon-juxingcopy
  • 无线网络
    #icon-wuxianwangluo
  • #icon-shang
  • tup
    #icon-icon-1
  • 对讲
    #icon-duijiang
  • #icon-shang-copy1
  • #icon-shang-copy2
  • #icon-shang-copy3
  • #icon-icon-test-copy-copy
  • 全屏
    #icon-quanping
  • 取消全屏
    #icon-quxiaoquanping
  • 里程
    #icon-mileage
  • 二氧化碳
    #icon-eryanghuatan
  • #icon-yuan
  • 放电
    #icon-fangdian1
  • 电池
    #icon-dianchi1-copy
  • 时间
    #icon-icon01
  • 电池
    #icon-dianchi
  • 充电
    #icon-chongdian
  • 视角
    #icon-shijiao
  • 充电
    #icon-Charge
  • 速度
    #icon-sudu
  • 电池电压
    #icon-dianchidianya
  • 温度 (3)
    #icon-wendu
  • 巡检任务
    #icon-xunjianrenwu
  • 实时监控
    #icon-shishijiankong
  • 机器人
    #icon-jiqiren
  • 告警
    #icon-icon-
  • 历史数据
    #icon-lishishuju
  • 手动控制
    #icon-weibiaoti-1_huaban1fuben
  • 手动
    #icon-shoudong
  • 设 置
    #icon-shezhi
  • 一氧化碳
    #icon-yiyanghuatan
  • #icon-dian
  • SF6
    #icon-SF
  • 通信
    #icon-tongxin
  • 烟雾报警灯(白色)
    #icon-yanwubaojingdengbaise
  • 臭氧
    #icon-chouyang
  • 湿度
    #icon-shidu
  • 烟雾
    #icon-yanwu
  • 放电
    #icon-tubiao-
  • fangdian
    #icon-fangdian
  • 气温
    #icon-qiwen

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>