• 查询
    
  • 定时
    
  • 童锁
    
  • 热水
    
  • M
    
  • A
    
  • 新风除湿
    
  • 新风
    
  • 内循环
    
  • 内除湿
    
  • 提示
    
  • 恒温恒湿_警告
    
  • 恒温恒湿_风速低
    
  • 恒温恒湿_风速中
    
  • 恒温恒湿_风速停
    
  • 恒温恒湿_风速高
    
  • 恒温恒湿_固件升级
    
  • 制冷
    
  • 恒温恒湿_定时开关
    
  • 恒温恒湿_返回
    
  • 恒温恒湿_关于设备
    
  • 恒温恒湿_历史记录
    
  • 恒温恒湿_加湿
    
  • 恒温恒湿_温湿度
    
  • 恒温恒湿_制冷除湿
    
  • 恒温恒湿_参数查询
    
  • 恒温恒湿_帮助中心
    
  • 恒温恒湿_关
    
  • 恒温恒湿_开关
    
  • 恒温恒湿_秋高气爽
    
  • 恒温恒湿_制热
    
  • 恒温恒湿_睡眠模式
    
  • 恒温恒湿_滤网
    
  • 恒温恒湿_设置
    
  • 恒温恒湿_天朗气清
    
  • 恒温恒湿_制热加湿
    
  • 恒温恒湿_制冷地暖
    
  • 恒温恒湿_下载
    
  • 恒温恒湿_四季如春
    
  • 恒温恒湿_除湿
    
  • 恒温恒湿_开
    
  • 恒温恒湿_加
    
  • 恒温恒湿_减
    
  • 恒温恒湿_制热地暖
    
  • 恒温恒湿_通风
    
  • 恒温恒湿_温度
    
  • 恒温恒湿_制热地暖加湿
    
  • 房间切换
    
  • 切换房间
    
  • 房间
    
  • 新风除湿
    
  • 内除湿
    
  • 新风
    
  • 内循环
    
  • 高速
    
  • 更多
    
  • 固件升级内页
    
  • 关于设备
    
  • 警告
    
  • 关闭
    
  • 好友权限管理
    
  • 历史数据
    
  • 通知
    
  • 添加
    
  • 修改设备名称
    
  • 地暖
    
  • 设备共享
    
  • 中速
    
  • 制热
    
  • 室外地址
    
  • 开关
    
  • 制冷
    
  • 进入箭头
    
  • 通风
    
  • 温度设定
    
  • shouhuodizhi
    
  • 定时开关
    
  • 定时开关机
    
  • 风速停
    
  • 低速
    
  • 
  • 
  • 
  • 关闭
    
  • 开关
    
  • 切换
    
  • 返回
    
  • 设置
    
  • 温度
    
  • 
  • 
  • 湿度
    
  • 
  • 
  • 强制-01
    
  • 季节自动-01
    
  • 夏季-01
    
  • 过渡季节-01
    
  • 冬季-01
    
  • 季节
    
  • 
  • 气爽
    
  • 居家
    
  • 离家
    
  • 窗帘
    
  • 家居控制-窗帘
    
  • 位置
    
  • 天气-多云
    
  • 三档风速
    
  • 两档风速
    
  • 自动风速
    
  • 一档风速
    
  • 地暖制热
    
  • 空气质量仪
    
  • 开发测试
    
  • 健康家
    
  • 空调
    
  • 产品
    
  • 空气质量
    
  • 甲醛
    
  • co2
    
  • 甲醛1
    
  • 开关
    
  • 制热
    
  • 地暖
    
  • 通风
    
  • 风扇
    
  • 全屋净水
    
  • 除湿加湿一体
    
  • 中央空调
    
  • 泳池除湿
    
  • 机房空调
    
  • 中央除湿
    
  • 中央采暖
    
  • 中央加湿
    
  • 中央热水
    
  • 新风净化
    
  • 酒窖设备
    
  • 温度
    
  • 除湿
    
  • 风盘
    
  • 加湿
    
  • 设备中心
    
  • 情景模式
    
  • 首页
    
  • 会客
    
  • 水控
    
  • 制冷
    
  • TVOC
    
  • 会议
    
  • CO
    
  • 制热
    
  • PM
    
  • 新风
    
  • 离家
    
  • 节能
    
  • 月亮
    
  • 背光滑块
    
  • 场景
    
  • 保存成功
    
  • 风速高
    
  • 帮助
    
  • 
  • 点击
    
  • 风速
    
  • 
  • 背光
    
  • 回家
    
  • 返回
    
  • 角标
    
  • 
  • 箭头
    
  • 
  • 开关
    
  • 空调末端
    
  • 闪电
    
  • 上箭头
    
  • 清除
    
  • 内除湿
    
  • 锁屏
    
  • 说明书
    
  • 注意
    
  • 控湿
    
  • 商城
    
  • 设置
    
  • 熄屏
    
  • 时间
    
  • 下箭头
    
  • 虚圆
    
  • 舒适
    
  • 自动
    
  • 新风
    
  • 空调系统
    
  • wifi
    
  • 网络
    
  • 制冷
    

Unicode 引用


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

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

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

Unicode 使用步骤如下:

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

@font-face {
  font-family: 'iconfont';
  src: url('iconfont.woff2?t=1655445085836') format('woff2'),
       url('iconfont.woff?t=1655445085836') format('woff'),
       url('iconfont.ttf?t=1655445085836') 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-chaxun
  • 定时
    .icon-dingshi
  • 童锁
    .icon-tongsuo
  • 热水
    .icon-reshui
  • M
    .icon-M
  • A
    .icon-A
  • 新风除湿
    .icon-xinfengchushi1
  • 新风
    .icon-xinfeng3
  • 内循环
    .icon-neixunhuan1
  • 内除湿
    .icon-neichushi2
  • 提示
    .icon-tishi
  • 恒温恒湿_警告
    .icon-hengwenhengshi_jinggao
  • 恒温恒湿_风速低
    .icon-hengwenhengshi_fengsudi
  • 恒温恒湿_风速中
    .icon-hengwenhengshi_fengsuzhong
  • 恒温恒湿_风速停
    .icon-hengwenhengshi_fengsuting
  • 恒温恒湿_风速高
    .icon-hengwenhengshi_fengsugao
  • 恒温恒湿_固件升级
    .icon-hengwenhengshi_gujianshengji
  • 制冷
    .icon-zhileng3
  • 恒温恒湿_定时开关
    .icon-hengwenhengshi_dingshikaiguan
  • 恒温恒湿_返回
    .icon-hengwenhengshi_fanhui
  • 恒温恒湿_关于设备
    .icon-hengwenhengshi_guanyushebei
  • 恒温恒湿_历史记录
    .icon-hengwenhengshi_lishijilu
  • 恒温恒湿_加湿
    .icon-hengwenhengshi_jiashi
  • 恒温恒湿_温湿度
    .icon-hengwenhengshi_wenshidu
  • 恒温恒湿_制冷除湿
    .icon-hengwenhengshi_zhilengchushi
  • 恒温恒湿_参数查询
    .icon-hengwenhengshi_canshuchaxun
  • 恒温恒湿_帮助中心
    .icon-hengwenhengshi_bangzhuzhongxin
  • 恒温恒湿_关
    .icon-hengwenhengshi_guan
  • 恒温恒湿_开关
    .icon-hengwenhengshi_kaiguan
  • 恒温恒湿_秋高气爽
    .icon-hengwenhengshi_qiugaoqishuang
  • 恒温恒湿_制热
    .icon-hengwenhengshi_zhire
  • 恒温恒湿_睡眠模式
    .icon-hengwenhengshi_shuimianmoshi
  • 恒温恒湿_滤网
    .icon-hengwenhengshi_lvwang
  • 恒温恒湿_设置
    .icon-hengwenhengshi_shezhi
  • 恒温恒湿_天朗气清
    .icon-hengwenhengshi_tianlangqiqing
  • 恒温恒湿_制热加湿
    .icon-hengwenhengshi_zhirejiashi
  • 恒温恒湿_制冷地暖
    .icon-hengwenhengshi_zhilengdinuan
  • 恒温恒湿_下载
    .icon-hengwenhengshi_xiazai
  • 恒温恒湿_四季如春
    .icon-hengwenhengshi_sijiruchun
  • 恒温恒湿_除湿
    .icon-hengwenhengshi_chushi
  • 恒温恒湿_开
    .icon-hengwenhengshi_kai
  • 恒温恒湿_加
    .icon-hengwenhengshi_jia
  • 恒温恒湿_减
    .icon-hengwenhengshi_jian
  • 恒温恒湿_制热地暖
    .icon-hengwenhengshi_zhiredinuan
  • 恒温恒湿_通风
    .icon-hengwenhengshi_tongfeng
  • 恒温恒湿_温度
    .icon-hengwenhengshi_wendu
  • 恒温恒湿_制热地暖加湿
    .icon-hengwenhengshi_zhiredinuanjiashi
  • 房间切换
    .icon-fangjianqiehuan
  • 切换房间
    .icon-qiehuanfangjian
  • 房间
    .icon-fangjian
  • 新风除湿
    .icon-xinfengchushi
  • 内除湿
    .icon-neichushi1
  • 新风
    .icon-xinfeng2
  • 内循环
    .icon-neixunhuan
  • 高速
    .icon-gaosu
  • 更多
    .icon-gengduo
  • 固件升级内页
    .icon-gujianshengjineiye
  • 关于设备
    .icon-guanyushebei
  • 警告
    .icon-jinggao
  • 关闭
    .icon-guanbi1
  • 好友权限管理
    .icon-haoyouquanxianguanli
  • 历史数据
    .icon-lishishuju
  • 通知
    .icon-tongzhi
  • 添加
    .icon-tianjia
  • 修改设备名称
    .icon-xiugaishebeimingcheng
  • 地暖
    .icon-dinuan1
  • 设备共享
    .icon-shebeigongxiang
  • 中速
    .icon-zhongsu
  • 制热
    .icon-zhire2
  • 室外地址
    .icon-shiwaidizhi
  • 开关
    .icon-kaiguan3
  • 制冷
    .icon-zhileng2
  • 进入箭头
    .icon-jinrujiantou
  • 通风
    .icon-tongfeng2
  • 温度设定
    .icon-wendusheding
  • shouhuodizhi
    .icon-shouhuodizhi
  • 定时开关
    .icon-dingshikaiguan
  • 定时开关机
    .icon-dingshikaiguanji
  • 风速停
    .icon-fengsuting
  • 低速
    .icon-disu
  • .icon-xia
  • .icon-shang
  • .icon-tongfeng1
  • 关闭
    .icon-guanbi
  • 开关
    .icon-kaiguan2
  • 切换
    .icon-qiehuan
  • 返回
    .icon-fanhui1
  • 设置
    .icon-shezhi1
  • 温度
    .icon-wendu1
  • .icon-qiu
  • .icon-chun
  • 湿度
    .icon-shidu
  • .icon-guan1
  • .icon-kai1
  • 强制-01
    .icon-qiangzhi-01
  • 季节自动-01
    .icon-jijiezidong-01
  • 夏季-01
    .icon-xiaji-01
  • 过渡季节-01
    .icon-guodujijie-01
  • 冬季-01
    .icon-dongji-01
  • 季节
    .icon-jijie
  • .icon-feng
  • 气爽
    .icon-qishuang
  • 居家
    .icon-jujia
  • 离家
    .icon-lijia1
  • 窗帘
    .icon-chuanglian
  • 家居控制-窗帘
    .icon-jiajukongzhi-chuanglian
  • 位置
    .icon-weizhi
  • 天气-多云
    .icon-tianqi-duoyun
  • 三档风速
    .icon-sandangfengsu
  • 两档风速
    .icon-liangdangfengsu
  • 自动风速
    .icon-zidongfengsu
  • 一档风速
    .icon-yidangfengsu
  • 地暖制热
    .icon-zhire_dinuan
  • 空气质量仪
    .icon-kongqizhiliangyi
  • 开发测试
    .icon-kaifaceshi
  • 健康家
    .icon-jiankangjia
  • 空调
    .icon-kongtiao
  • 产品
    .icon-chanpin
  • 空气质量
    .icon-kongqizhiliang
  • 甲醛
    .icon-jiaquan1
  • co2
    .icon-co2
  • 甲醛1
    .icon-jiaquan11
  • 开关
    .icon-kaiguan1
  • 制热
    .icon-zhire1
  • 地暖
    .icon-dinuan
  • 通风
    .icon-tongfeng
  • 风扇
    .icon-fengshan
  • 全屋净水
    .icon-quanwujingshui
  • 除湿加湿一体
    .icon-chushijiashiyiti
  • 中央空调
    .icon-zhongyangkongtiao
  • 泳池除湿
    .icon-yongchichushi
  • 机房空调
    .icon-jifangkongtiao
  • 中央除湿
    .icon-zhongyangchushi
  • 中央采暖
    .icon-zhongyangcainuan
  • 中央加湿
    .icon-zhongyangjiashi
  • 中央热水
    .icon-zhongyangreshui
  • 新风净化
    .icon-xinfengjinghua
  • 酒窖设备
    .icon-jiujiaoshebei
  • 温度
    .icon-wendu
  • 除湿
    .icon-chushi
  • 风盘
    .icon-fengpan
  • 加湿
    .icon-jiashi
  • 设备中心
    .icon-shebeizhongxin
  • 情景模式
    .icon-qingjingmoshi
  • 首页
    .icon-shouye
  • 会客
    .icon-huike
  • 水控
    .icon-shuikong
  • 制冷
    .icon-zhileng1
  • TVOC
    .icon-TVOC
  • 会议
    .icon-huiyi
  • CO
    .icon-CO
  • 制热
    .icon-zhire
  • PM
    .icon-PM
  • 新风
    .icon-xinfeng1
  • 离家
    .icon-lijia
  • 节能
    .icon-jieneng
  • 月亮
    .icon-yueliang
  • 背光滑块
    .icon-beiguanghuakuai
  • 场景
    .icon-changjing
  • 保存成功
    .icon-baocunchenggong
  • 风速高
    .icon-fengsugao
  • 帮助
    .icon-bangzhu
  • .icon-jia
  • 点击
    .icon-dianji
  • 风速
    .icon-fengsu
  • .icon-guan
  • 背光
    .icon-beiguang
  • 回家
    .icon-home
  • 返回
    .icon-fanhui
  • 角标
    .icon-jiaobiao
  • .icon-jian
  • 箭头
    .icon-jiantou
  • .icon-kai
  • 开关
    .icon-kaiguan
  • 空调末端
    .icon-kongtiaomoduan
  • 闪电
    .icon-shandian
  • 上箭头
    .icon-shangjiantou
  • 清除
    .icon-qingchu
  • 内除湿
    .icon-neichushi
  • 锁屏
    .icon-suoping
  • 说明书
    .icon-shuomingshu
  • 注意
    .icon-zhuyi
  • 控湿
    .icon-kongshi
  • 商城
    .icon-shangcheng
  • 设置
    .icon-shezhi
  • 熄屏
    .icon-xiping
  • 时间
    .icon-shijian
  • 下箭头
    .icon-xiajiantou
  • 虚圆
    .icon-xuyuan
  • 舒适
    .icon-shushi
  • 自动
    .icon-zidong
  • 新风
    .icon-xinfeng
  • 空调系统
    .icon-kongtiaoxitong
  • wifi
    .icon-wifi
  • 网络
    .icon-wangluo
  • 制冷
    .icon-zhileng

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-chaxun
  • 定时
    #icon-dingshi
  • 童锁
    #icon-tongsuo
  • 热水
    #icon-reshui
  • M
    #icon-M
  • A
    #icon-A
  • 新风除湿
    #icon-xinfengchushi1
  • 新风
    #icon-xinfeng3
  • 内循环
    #icon-neixunhuan1
  • 内除湿
    #icon-neichushi2
  • 提示
    #icon-tishi
  • 恒温恒湿_警告
    #icon-hengwenhengshi_jinggao
  • 恒温恒湿_风速低
    #icon-hengwenhengshi_fengsudi
  • 恒温恒湿_风速中
    #icon-hengwenhengshi_fengsuzhong
  • 恒温恒湿_风速停
    #icon-hengwenhengshi_fengsuting
  • 恒温恒湿_风速高
    #icon-hengwenhengshi_fengsugao
  • 恒温恒湿_固件升级
    #icon-hengwenhengshi_gujianshengji
  • 制冷
    #icon-zhileng3
  • 恒温恒湿_定时开关
    #icon-hengwenhengshi_dingshikaiguan
  • 恒温恒湿_返回
    #icon-hengwenhengshi_fanhui
  • 恒温恒湿_关于设备
    #icon-hengwenhengshi_guanyushebei
  • 恒温恒湿_历史记录
    #icon-hengwenhengshi_lishijilu
  • 恒温恒湿_加湿
    #icon-hengwenhengshi_jiashi
  • 恒温恒湿_温湿度
    #icon-hengwenhengshi_wenshidu
  • 恒温恒湿_制冷除湿
    #icon-hengwenhengshi_zhilengchushi
  • 恒温恒湿_参数查询
    #icon-hengwenhengshi_canshuchaxun
  • 恒温恒湿_帮助中心
    #icon-hengwenhengshi_bangzhuzhongxin
  • 恒温恒湿_关
    #icon-hengwenhengshi_guan
  • 恒温恒湿_开关
    #icon-hengwenhengshi_kaiguan
  • 恒温恒湿_秋高气爽
    #icon-hengwenhengshi_qiugaoqishuang
  • 恒温恒湿_制热
    #icon-hengwenhengshi_zhire
  • 恒温恒湿_睡眠模式
    #icon-hengwenhengshi_shuimianmoshi
  • 恒温恒湿_滤网
    #icon-hengwenhengshi_lvwang
  • 恒温恒湿_设置
    #icon-hengwenhengshi_shezhi
  • 恒温恒湿_天朗气清
    #icon-hengwenhengshi_tianlangqiqing
  • 恒温恒湿_制热加湿
    #icon-hengwenhengshi_zhirejiashi
  • 恒温恒湿_制冷地暖
    #icon-hengwenhengshi_zhilengdinuan
  • 恒温恒湿_下载
    #icon-hengwenhengshi_xiazai
  • 恒温恒湿_四季如春
    #icon-hengwenhengshi_sijiruchun
  • 恒温恒湿_除湿
    #icon-hengwenhengshi_chushi
  • 恒温恒湿_开
    #icon-hengwenhengshi_kai
  • 恒温恒湿_加
    #icon-hengwenhengshi_jia
  • 恒温恒湿_减
    #icon-hengwenhengshi_jian
  • 恒温恒湿_制热地暖
    #icon-hengwenhengshi_zhiredinuan
  • 恒温恒湿_通风
    #icon-hengwenhengshi_tongfeng
  • 恒温恒湿_温度
    #icon-hengwenhengshi_wendu
  • 恒温恒湿_制热地暖加湿
    #icon-hengwenhengshi_zhiredinuanjiashi
  • 房间切换
    #icon-fangjianqiehuan
  • 切换房间
    #icon-qiehuanfangjian
  • 房间
    #icon-fangjian
  • 新风除湿
    #icon-xinfengchushi
  • 内除湿
    #icon-neichushi1
  • 新风
    #icon-xinfeng2
  • 内循环
    #icon-neixunhuan
  • 高速
    #icon-gaosu
  • 更多
    #icon-gengduo
  • 固件升级内页
    #icon-gujianshengjineiye
  • 关于设备
    #icon-guanyushebei
  • 警告
    #icon-jinggao
  • 关闭
    #icon-guanbi1
  • 好友权限管理
    #icon-haoyouquanxianguanli
  • 历史数据
    #icon-lishishuju
  • 通知
    #icon-tongzhi
  • 添加
    #icon-tianjia
  • 修改设备名称
    #icon-xiugaishebeimingcheng
  • 地暖
    #icon-dinuan1
  • 设备共享
    #icon-shebeigongxiang
  • 中速
    #icon-zhongsu
  • 制热
    #icon-zhire2
  • 室外地址
    #icon-shiwaidizhi
  • 开关
    #icon-kaiguan3
  • 制冷
    #icon-zhileng2
  • 进入箭头
    #icon-jinrujiantou
  • 通风
    #icon-tongfeng2
  • 温度设定
    #icon-wendusheding
  • shouhuodizhi
    #icon-shouhuodizhi
  • 定时开关
    #icon-dingshikaiguan
  • 定时开关机
    #icon-dingshikaiguanji
  • 风速停
    #icon-fengsuting
  • 低速
    #icon-disu
  • #icon-xia
  • #icon-shang
  • #icon-tongfeng1
  • 关闭
    #icon-guanbi
  • 开关
    #icon-kaiguan2
  • 切换
    #icon-qiehuan
  • 返回
    #icon-fanhui1
  • 设置
    #icon-shezhi1
  • 温度
    #icon-wendu1
  • #icon-qiu
  • #icon-chun
  • 湿度
    #icon-shidu
  • #icon-guan1
  • #icon-kai1
  • 强制-01
    #icon-qiangzhi-01
  • 季节自动-01
    #icon-jijiezidong-01
  • 夏季-01
    #icon-xiaji-01
  • 过渡季节-01
    #icon-guodujijie-01
  • 冬季-01
    #icon-dongji-01
  • 季节
    #icon-jijie
  • #icon-feng
  • 气爽
    #icon-qishuang
  • 居家
    #icon-jujia
  • 离家
    #icon-lijia1
  • 窗帘
    #icon-chuanglian
  • 家居控制-窗帘
    #icon-jiajukongzhi-chuanglian
  • 位置
    #icon-weizhi
  • 天气-多云
    #icon-tianqi-duoyun
  • 三档风速
    #icon-sandangfengsu
  • 两档风速
    #icon-liangdangfengsu
  • 自动风速
    #icon-zidongfengsu
  • 一档风速
    #icon-yidangfengsu
  • 地暖制热
    #icon-zhire_dinuan
  • 空气质量仪
    #icon-kongqizhiliangyi
  • 开发测试
    #icon-kaifaceshi
  • 健康家
    #icon-jiankangjia
  • 空调
    #icon-kongtiao
  • 产品
    #icon-chanpin
  • 空气质量
    #icon-kongqizhiliang
  • 甲醛
    #icon-jiaquan1
  • co2
    #icon-co2
  • 甲醛1
    #icon-jiaquan11
  • 开关
    #icon-kaiguan1
  • 制热
    #icon-zhire1
  • 地暖
    #icon-dinuan
  • 通风
    #icon-tongfeng
  • 风扇
    #icon-fengshan
  • 全屋净水
    #icon-quanwujingshui
  • 除湿加湿一体
    #icon-chushijiashiyiti
  • 中央空调
    #icon-zhongyangkongtiao
  • 泳池除湿
    #icon-yongchichushi
  • 机房空调
    #icon-jifangkongtiao
  • 中央除湿
    #icon-zhongyangchushi
  • 中央采暖
    #icon-zhongyangcainuan
  • 中央加湿
    #icon-zhongyangjiashi
  • 中央热水
    #icon-zhongyangreshui
  • 新风净化
    #icon-xinfengjinghua
  • 酒窖设备
    #icon-jiujiaoshebei
  • 温度
    #icon-wendu
  • 除湿
    #icon-chushi
  • 风盘
    #icon-fengpan
  • 加湿
    #icon-jiashi
  • 设备中心
    #icon-shebeizhongxin
  • 情景模式
    #icon-qingjingmoshi
  • 首页
    #icon-shouye
  • 会客
    #icon-huike
  • 水控
    #icon-shuikong
  • 制冷
    #icon-zhileng1
  • TVOC
    #icon-TVOC
  • 会议
    #icon-huiyi
  • CO
    #icon-CO
  • 制热
    #icon-zhire
  • PM
    #icon-PM
  • 新风
    #icon-xinfeng1
  • 离家
    #icon-lijia
  • 节能
    #icon-jieneng
  • 月亮
    #icon-yueliang
  • 背光滑块
    #icon-beiguanghuakuai
  • 场景
    #icon-changjing
  • 保存成功
    #icon-baocunchenggong
  • 风速高
    #icon-fengsugao
  • 帮助
    #icon-bangzhu
  • #icon-jia
  • 点击
    #icon-dianji
  • 风速
    #icon-fengsu
  • #icon-guan
  • 背光
    #icon-beiguang
  • 回家
    #icon-home
  • 返回
    #icon-fanhui
  • 角标
    #icon-jiaobiao
  • #icon-jian
  • 箭头
    #icon-jiantou
  • #icon-kai
  • 开关
    #icon-kaiguan
  • 空调末端
    #icon-kongtiaomoduan
  • 闪电
    #icon-shandian
  • 上箭头
    #icon-shangjiantou
  • 清除
    #icon-qingchu
  • 内除湿
    #icon-neichushi
  • 锁屏
    #icon-suoping
  • 说明书
    #icon-shuomingshu
  • 注意
    #icon-zhuyi
  • 控湿
    #icon-kongshi
  • 商城
    #icon-shangcheng
  • 设置
    #icon-shezhi
  • 熄屏
    #icon-xiping
  • 时间
    #icon-shijian
  • 下箭头
    #icon-xiajiantou
  • 虚圆
    #icon-xuyuan
  • 舒适
    #icon-shushi
  • 自动
    #icon-zidong
  • 新风
    #icon-xinfeng
  • 空调系统
    #icon-kongtiaoxitong
  • wifi
    #icon-wifi
  • 网络
    #icon-wangluo
  • 制冷
    #icon-zhileng

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>