• 调试
    
  • 场景管理
    
  • 分享方式
    
  • 编辑
    
  • 关联设备
    
  • 官方版本
    
  • 功能定义
    
  • 基础管理
    
  • 技术服务
    
  • 合作伙伴密钥管理
    
  • 测试申请
    
  • 节点管理
    
  • 警告
    
  • 配网引导
    
  • 人机交互
    
  • 使用文档
    
  • 设备开发
    
  • 权限审批
    
  • 已授权
    
  • 提案审批
    
  • 数据看板
    
  • 应用管理
    
  • 仪表盘
    
  • 账号权限管理
    
  • 园区运维
    
  • 准备量产
    
  • 基站管理
    
  • 关闭
    
  • 自定义
    
  • 下箭头
    
  • 
    上箭头
    
  • icon_loading
    
  • icon_任务进程
    
  • icon_入口
    
  • icon_疑问空心
    
  • icon_发布
    
  • icon_添加
    
  • icon_预览
    
  • icon_账号
    
  • icon_网页
    
  • icon_设置
    
  • icon_保存
    
  • icon_应用管理
    
  • icon_使用文档
    
  • icon_帮助文档
    
  • 表单组件-输入框
    
  • 表单组件-表格
    
  • 表单组件-下拉框
    
  • 图表-饼图
    
  • 表单组件-按钮
    
  • 工业组件-仪表盘
    
  • 图表-卡片
    
  • 工业组件-指示灯
    
  • 图表-折线图
    
  • 形状-矩形
    
  • 形状-箭形
    
  • 工业组件-开关
    
  • 图表-柱状图
    
  • 形状-图片
    
  • 形状-文字
    
  • 形状-椭圆形
    
  • 形状-三角形
    
  • 形状-星形
    
  • 规则
    
  • 设备管理
    
  • 功能定义
    
  • 技术服务
    
  • 运营中心
    
  • 运营管理
    
  • 组织下辖
    
  • 组织展开
    
  • 组织群组
    
  • 打开
    
  • 英文
    
  • 中文
    
  • 密文
    
  • 显号
    
  • 空心对勾
    
  • 回形针
    
  • 对勾
    
  • 下一步
    
  • 上一步
    
  • 控件选中
    
  • 控件未选
    
  • 控件已选
    
  • 0117- 电杆
    
  • 0309融雪剂溶解池*
    
  • 0215路边停车场*
    
  • 0213-路名牌
    
  • 
    0407街头座椅
    
  • 0601-重大危险
    
  • 0209-交通标志牌
    
  • 0303公厕指示牌
    
  • 方块+
    
  • 方块-
    
  • 刷新
    
  • 保存
    
  • 发布
    
  • 下一步
    
  • 上一步
    
  • 向下占行
    
  • 向上占行
    
  • 图片加载失败
    
  • 服务地球
    
  • 缩小
    
  • 放大
    
  • 还原画布
    
  • 全屏
    
  • 表单组件-表格
    
  • API输出
    
  • API接入
    
  • 文件夹
    
  • DOC
    
  • BMP
    
  • GIF
    
  • JPG
    
  • PNG
    
  • 未知格式
    
  • 更多
    
  • 云端下载
    
  • 云端上传
    
  • 
  • 
  • 线
    
  • 设备状态
    
  • 分组管理
    
  • 快速编排
    
  • APP开发
    
  • 问题解答
    
  • 客服
    
  • 软件开发包
    
  • 搜索变小
    
  • 搜索放大
    
  • 定位
    
  • 物模型
    
  • 告警
    
  • 任务进程
    
  • 消息通知
    
  • 优惠
    
  • 告警
    
  • 执行反馈
    
  • 工单确认
    
  • 广播
    
  • 工单
    
  • 
    消息
    
  • 地图-旗
    
  • 地图-地标
    
  • 地图-叉
    
  • 地图-气泡
    
  • 地图-图钉
    
  • 地图-环
    
  • 地图-星
    
  • 地图-圆
    
  • 撤回色块
    
  • 删除色块
    
  • 发布色块
    
  • 信号
    
  • 蓝牙
    
  • Wi-Fi
    
  • 查询
    
  • 电表
    
  • 安全
    
  • 待办事项
    
  • 冰箱
    
  • 反射
    
  • 风车
    
  • 管道
    
  • 规则
    
  • 规则引擎
    
  • 货物堆
    
  • 检测器
    
  • 井盖
    
  • 流计算
    
  • 函数
    
  • 连接流
    
  • 路灯
    
  • 摄像机
    
  • 人体检测
    
  • 魔术棒
    
  • 数据挖掘
    
  • 网关
    
  • 人脑
    
  • 储存
    
  • AI
    
  • 云端刷新
    
  • 运行
    
  • 路由器
    
  • bug
    
  • get
    
  • PIR
    
  • 折线图
    
  • 水表
    
  • js
    
  • 自行车
    
  • 列表
    
  • 汽车定位
    
  • 地磁
    
  • mysql
    
  • 汽车
    
  • 神经
    
  • 城市
    
  • 告警实心
    
  • 门磁
    
  • 插座
    
  • 燃气监测器
    
  • 开关
    
  • 插头
    
  • 洗衣机
    
  • 
    一键开关
    
  • 烟雾报警器
    
  • 无线电波
    
  • 复制
    
  • 删除
    
  • 编辑色块
    
  • i视频失效
    
  • iframe添加
    
  • 图片添加
    
  • 列表模式_块
    
  • 卡片模式_块
    
  • 分栏
    
  • 分割线
    
  • 点赞
    
  • 插入链接
    
  • 插入图片
    
  • 取消链接
    
  • 无序排列
    
  • 居中对齐
    
  • 引用
    
  • 有序排列
    
  • 右对齐
    
  • 字体代码
    
  • 笑脸
    
  • 字体加粗
    
  • 字体删除线
    
  • 字体上标
    
  • 字体标题
    
  • 字体下划线
    
  • 字体斜体
    
  • 字体颜色
    
  • 左对齐
    
  • 字体预览
    
  • 字体下标
    
  • 左右对齐
    
  • 编辑
    
  • 集成打包
    
  • 硬件
    
  • 设备开发
    
  • 点赞_块
    
  • 置换
    
  • 托管
    
  • 对勾
    
  • 关闭
    
  • 爱心 _实心
    
  • 燃气泄漏报警器
    
  • 电表_实体
    
  • 爱心
    
  • 水表_实体
    
  • 智能消防栓
    
  • 燃气表_实体
    
  • 摄像头_实体
    
  • 摄像头_关闭
    
  • 摄像头
    
  • 声音_实体
    
  • 声音开
    
  • 收藏_实心
    
  • 收藏
    
  • 声音无
    
  • 声音静音
    

Unicode 引用


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

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

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

Unicode 使用步骤如下:

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

@font-face {
  font-family: 'iconfont';
  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#iconfont') format('svg');
}

第二步:定义使用 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"。

  • 调试
    .el-icon-third-tiaoshi
  • 场景管理
    .el-icon-third-changjingguanli
  • 分享方式
    .el-icon-third-fenxiangfangshi
  • 编辑
    .el-icon-third-bianji
  • 关联设备
    .el-icon-third-guanlianshebei
  • 官方版本
    .el-icon-third-guanfangbanben
  • 功能定义
    .el-icon-third-gongnengdingyi
  • 基础管理
    .el-icon-third-jichuguanli
  • 技术服务
    .el-icon-third-jishufuwu
  • 合作伙伴密钥管理
    .el-icon-third-hezuohuobanmiyueguanli
  • 测试申请
    .el-icon-third-ceshishenqing
  • 节点管理
    .el-icon-third-jiedianguanli
  • 警告
    .el-icon-third-jinggao
  • 配网引导
    .el-icon-third-peiwangyindao
  • 人机交互
    .el-icon-third-renjijiaohu
  • 使用文档
    .el-icon-third-shiyongwendang
  • 设备开发
    .el-icon-third-shebeikaifa
  • 权限审批
    .el-icon-third-quanxianshenpi
  • 已授权
    .el-icon-third-yishouquan
  • 提案审批
    .el-icon-third-tianshenpi
  • 数据看板
    .el-icon-third-shujukanban
  • 应用管理
    .el-icon-third-yingyongguanli
  • 仪表盘
    .el-icon-third-yibiaopan
  • 账号权限管理
    .el-icon-third-zhanghaoquanxianguanli
  • 园区运维
    .el-icon-third-yuanquyunwei
  • 准备量产
    .el-icon-third-zhunbeiliangchan
  • 基站管理
    .el-icon-third-jizhanguanli
  • 关闭
    .el-icon-third-guanbi
  • 自定义
    .el-icon-third-zidingyi
  • 下箭头
    .el-icon-third-xiajiantou
  • 上箭头
    .el-icon-third-shangjiantou
  • icon_loading
    .el-icon-third-icon_loading
  • icon_任务进程
    .el-icon-third-icon_renwujincheng
  • icon_入口
    .el-icon-third-icon_rukou
  • icon_疑问空心
    .el-icon-third-icon_yiwenkongxin
  • icon_发布
    .el-icon-third-icon_fabu
  • icon_添加
    .el-icon-third-icon_tianjia
  • icon_预览
    .el-icon-third-icon_yulan
  • icon_账号
    .el-icon-third-icon_zhanghao
  • icon_网页
    .el-icon-third-icon_wangye
  • icon_设置
    .el-icon-third-icon_shezhi
  • icon_保存
    .el-icon-third-icon_baocun
  • icon_应用管理
    .el-icon-third-icon_yingyongguanli
  • icon_使用文档
    .el-icon-third-icon_shiyongwendang
  • icon_帮助文档
    .el-icon-third-icon_bangzhuwendang
  • 表单组件-输入框
    .el-icon-third-biaodanzujian-shurukuang
  • 表单组件-表格
    .el-icon-third-biaodanzujian-biaoge
  • 表单组件-下拉框
    .el-icon-third-biaodanzujian-xialakuang
  • 图表-饼图
    .el-icon-third-tubiao-bingtu
  • 表单组件-按钮
    .el-icon-third-biaodanzujian-anniu
  • 工业组件-仪表盘
    .el-icon-third-gongyezujian-yibiaopan
  • 图表-卡片
    .el-icon-third-tubiao-qiapian
  • 工业组件-指示灯
    .el-icon-third-gongyezujian-zhishideng
  • 图表-折线图
    .el-icon-third-tubiao-zhexiantu
  • 形状-矩形
    .el-icon-third-xingzhuang-juxing
  • 形状-箭形
    .el-icon-third-xingzhuang-jianxing
  • 工业组件-开关
    .el-icon-third-gongyezujian-kaiguan
  • 图表-柱状图
    .el-icon-third-tubiao-zhuzhuangtu
  • 形状-图片
    .el-icon-third-xingzhuang-tupian
  • 形状-文字
    .el-icon-third-xingzhuang-wenzi
  • 形状-椭圆形
    .el-icon-third-xingzhuang-tuoyuanxing
  • 形状-三角形
    .el-icon-third-xingzhuang-sanjiaoxing
  • 形状-星形
    .el-icon-third-xingzhuang-xingxing
  • 规则
    .el-icon-third-guize
  • 设备管理
    .el-icon-third-shebeiguanli
  • 功能定义
    .el-icon-third-gongnengdingyi1
  • 技术服务
    .el-icon-third-jishufuwu1
  • 运营中心
    .el-icon-third-yunyingzhongxin
  • 运营管理
    .el-icon-third-yunyingguanli
  • 组织下辖
    .el-icon-third-zuzhixiaxia
  • 组织展开
    .el-icon-third-zuzhizhankai
  • 组织群组
    .el-icon-third-zuzhiqunzu
  • 打开
    .el-icon-third-dakai
  • 英文
    .el-icon-third-yingwen
  • 中文
    .el-icon-third-zhongwen
  • 密文
    .el-icon-third-miwen
  • 显号
    .el-icon-third-xianhao
  • 空心对勾
    .el-icon-third-kongxinduigou
  • 回形针
    .el-icon-third-huixingzhen
  • 对勾
    .el-icon-third-duigou
  • 下一步
    .el-icon-third-xiayibu
  • 上一步
    .el-icon-third-shangyibu
  • 控件选中
    .el-icon-third-kongjianxuanzhong
  • 控件未选
    .el-icon-third-kongjianweixuan
  • 控件已选
    .el-icon-third-kongjianyixuan
  • 0117- 电杆
    .el-icon-third--diangan
  • 0309融雪剂溶解池*
    .el-icon-third-rongxuejirongjiechi
  • 0215路边停车场*
    .el-icon-third-lubiantingchechang
  • 0213-路名牌
    .el-icon-third--lumingpai
  • 0407街头座椅
    .el-icon-third-jietouzuoyi
  • 0601-重大危险
    .el-icon-third--zhongdaweixian
  • 0209-交通标志牌
    .el-icon-third--jiaotongbiaozhipai
  • 0303公厕指示牌
    .el-icon-third-gongcezhishipai
  • 方块+
    .el-icon-third-fangkuai
  • 方块-
    .el-icon-third-fangkuai-
  • 刷新
    .el-icon-third-shuaxin
  • 保存
    .el-icon-third-baocun
  • 发布
    .el-icon-third-fabu
  • 下一步
    .el-icon-third-xiayibu1
  • 上一步
    .el-icon-third-shangyibu1
  • 向下占行
    .el-icon-third-xiangxiazhanhang
  • 向上占行
    .el-icon-third-xiangshangzhanhang
  • 图片加载失败
    .el-icon-third-tupianjiazaishibai
  • 服务地球
    .el-icon-third-fuwudiqiu
  • 缩小
    .el-icon-third-suoxiao
  • 放大
    .el-icon-third-fangda
  • 还原画布
    .el-icon-third-huanyuanhuabu
  • 全屏
    .el-icon-third-quanping
  • 表单组件-表格
    .el-icon-third-biaodanzujian-biaoge1
  • API输出
    .el-icon-third-APIshuchu
  • API接入
    .el-icon-third-APIjieru
  • 文件夹
    .el-icon-third-wenjianjia
  • DOC
    .el-icon-third-DOC
  • BMP
    .el-icon-third-BMP
  • GIF
    .el-icon-third-GIF
  • JPG
    .el-icon-third-JPG
  • PNG
    .el-icon-third-PNG
  • 未知格式
    .el-icon-third-weizhigeshi
  • 更多
    .el-icon-third-gengduo
  • 云端下载
    .el-icon-third-yunduanxiazai
  • 云端上传
    .el-icon-third-yunduanshangchuan
  • .el-icon-third-dian
  • .el-icon-third-mian
  • 线
    .el-icon-third-xian
  • 设备状态
    .el-icon-third-shebeizhuangtai
  • 分组管理
    .el-icon-third-fenzuguanli
  • 快速编排
    .el-icon-third-kuaisubianpai
  • APP开发
    .el-icon-third-APPkaifa
  • 问题解答
    .el-icon-third-wentijieda
  • 客服
    .el-icon-third-kefu
  • 软件开发包
    .el-icon-third-ruanjiankaifabao
  • 搜索变小
    .el-icon-third-sousuobianxiao
  • 搜索放大
    .el-icon-third-sousuofangda
  • 定位
    .el-icon-third-dingwei
  • 物模型
    .el-icon-third-wumoxing
  • 告警
    .el-icon-third-gaojing
  • 任务进程
    .el-icon-third-renwujincheng
  • 消息通知
    .el-icon-third-xiaoxitongzhi
  • 优惠
    .el-icon-third-youhui
  • 告警
    .el-icon-third-gaojing1
  • 执行反馈
    .el-icon-third-zhihangfankui
  • 工单确认
    .el-icon-third-gongdanqueren
  • 广播
    .el-icon-third-guangbo
  • 工单
    .el-icon-third-gongdan
  • 消息
    .el-icon-third-xiaoxi
  • 地图-旗
    .el-icon-third-ditu-qi
  • 地图-地标
    .el-icon-third-ditu-dibiao
  • 地图-叉
    .el-icon-third-ditu-cha
  • 地图-气泡
    .el-icon-third-ditu-qipao
  • 地图-图钉
    .el-icon-third-ditu-tuding
  • 地图-环
    .el-icon-third-ditu-huan
  • 地图-星
    .el-icon-third-ditu-xing
  • 地图-圆
    .el-icon-third-ditu-yuan
  • 撤回色块
    .el-icon-third-chehuisekuai
  • 删除色块
    .el-icon-third-shanchusekuai
  • 发布色块
    .el-icon-third-fabusekuai
  • 信号
    .el-icon-third-xinhao
  • 蓝牙
    .el-icon-third-lanya
  • Wi-Fi
    .el-icon-third-Wi-Fi
  • 查询
    .el-icon-third-chaxun
  • 电表
    .el-icon-third-dianbiao
  • 安全
    .el-icon-third-anquan
  • 待办事项
    .el-icon-third-daibanshixiang
  • 冰箱
    .el-icon-third-bingxiang
  • 反射
    .el-icon-third-fanshe
  • 风车
    .el-icon-third-fengche
  • 管道
    .el-icon-third-guandao
  • 规则
    .el-icon-third-guize1
  • 规则引擎
    .el-icon-third-guizeyinqing
  • 货物堆
    .el-icon-third-huowudui
  • 检测器
    .el-icon-third-jianceqi
  • 井盖
    .el-icon-third-jinggai
  • 流计算
    .el-icon-third-liujisuan
  • 函数
    .el-icon-third-hanshu
  • 连接流
    .el-icon-third-lianjieliu
  • 路灯
    .el-icon-third-ludeng
  • 摄像机
    .el-icon-third-shexiangji
  • 人体检测
    .el-icon-third-rentijiance
  • 魔术棒
    .el-icon-third-moshubang
  • 数据挖掘
    .el-icon-third-shujuwajue
  • 网关
    .el-icon-third-wangguan
  • 人脑
    .el-icon-third-shenjing
  • 储存
    .el-icon-third-chucun
  • AI
    .el-icon-third-wuguan
  • 云端刷新
    .el-icon-third-yunduanshuaxin
  • 运行
    .el-icon-third-yunhang
  • 路由器
    .el-icon-third-luyouqi
  • bug
    .el-icon-third-bug
  • get
    .el-icon-third-get
  • PIR
    .el-icon-third-PIR
  • 折线图
    .el-icon-third-zhexiantu
  • 水表
    .el-icon-third-shuibiao
  • js
    .el-icon-third-js
  • 自行车
    .el-icon-third-zihangche
  • 列表
    .el-icon-third-liebiao
  • 汽车定位
    .el-icon-third-qichedingwei
  • 地磁
    .el-icon-third-dici
  • mysql
    .el-icon-third-mysql
  • 汽车
    .el-icon-third-qiche
  • 神经
    .el-icon-third-shenjing1
  • 城市
    .el-icon-third-chengshi
  • 告警实心
    .el-icon-third-tixingshixin
  • 门磁
    .el-icon-third-menci
  • 插座
    .el-icon-third-chazuo
  • 燃气监测器
    .el-icon-third-ranqijianceqi
  • 开关
    .el-icon-third-kaiguan
  • 插头
    .el-icon-third-chatou
  • 洗衣机
    .el-icon-third-xiyiji
  • 一键开关
    .el-icon-third-yijiankaiguan
  • 烟雾报警器
    .el-icon-third-yanwubaojingqi
  • 无线电波
    .el-icon-third-wuxiandianbo
  • 复制
    .el-icon-third-fuzhi
  • 删除
    .el-icon-third-shanchu
  • 编辑色块
    .el-icon-third-bianjisekuai
  • i视频失效
    .el-icon-third-ishipinshixiao
  • iframe添加
    .el-icon-third-iframetianjia
  • 图片添加
    .el-icon-third-tupiantianjia
  • 列表模式_块
    .el-icon-third-liebiaomoshi_kuai
  • 卡片模式_块
    .el-icon-third-qiapianmoshi_kuai
  • 分栏
    .el-icon-third-fenlan
  • 分割线
    .el-icon-third-fengexian
  • 点赞
    .el-icon-third-dianzan
  • 插入链接
    .el-icon-third-charulianjie
  • 插入图片
    .el-icon-third-charutupian
  • 取消链接
    .el-icon-third-quxiaolianjie
  • 无序排列
    .el-icon-third-wuxupailie
  • 居中对齐
    .el-icon-third-juzhongduiqi
  • 引用
    .el-icon-third-yinyong
  • 有序排列
    .el-icon-third-youxupailie
  • 右对齐
    .el-icon-third-youduiqi
  • 字体代码
    .el-icon-third-zitidaima
  • 笑脸
    .el-icon-third-xiaolian
  • 字体加粗
    .el-icon-third-zitijiacu
  • 字体删除线
    .el-icon-third-zitishanchuxian
  • 字体上标
    .el-icon-third-zitishangbiao
  • 字体标题
    .el-icon-third-zitibiaoti
  • 字体下划线
    .el-icon-third-zitixiahuaxian
  • 字体斜体
    .el-icon-third-zitixieti
  • 字体颜色
    .el-icon-third-zitiyanse
  • 左对齐
    .el-icon-third-zuoduiqi
  • 字体预览
    .el-icon-third-zitiyulan
  • 字体下标
    .el-icon-third-zitixiabiao
  • 左右对齐
    .el-icon-third-zuoyouduiqi
  • 编辑
    .el-icon-third-tianxie
  • 集成打包
    .el-icon-third-huowudui1
  • 硬件
    .el-icon-third-yingjian
  • 设备开发
    .el-icon-third-shebeikaifa1
  • 点赞_块
    .el-icon-third-dianzan_kuai
  • 置换
    .el-icon-third-zhihuan
  • 托管
    .el-icon-third-tuoguan
  • 对勾
    .el-icon-third-duigoux
  • 关闭
    .el-icon-third-guanbi1
  • 爱心 _实心
    .el-icon-third-aixin_shixin
  • 燃气泄漏报警器
    .el-icon-third-ranqixieloubaojingqi
  • 电表_实体
    .el-icon-third-dianbiao_shiti
  • 爱心
    .el-icon-third-aixin
  • 水表_实体
    .el-icon-third-shuibiao_shiti
  • 智能消防栓
    .el-icon-third-zhinengxiaofangshuan
  • 燃气表_实体
    .el-icon-third-ranqibiao_shiti
  • 摄像头_实体
    .el-icon-third-shexiangtou_shiti
  • 摄像头_关闭
    .el-icon-third-shexiangtou_guanbi
  • 摄像头
    .el-icon-third-shexiangtou
  • 声音_实体
    .el-icon-third-shengyin_shiti
  • 声音开
    .el-icon-third-shengyinkai
  • 收藏_实心
    .el-icon-third-shoucang_shixin
  • 收藏
    .el-icon-third-shoucang
  • 声音无
    .el-icon-third-shengyinwu
  • 声音静音
    .el-icon-third-shengyinjingyin

font-class 引用


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

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

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

使用步骤如下:

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

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

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

<span class="iconfont el-icon-third-xxx"></span>

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

  • 调试
    #el-icon-third-tiaoshi
  • 场景管理
    #el-icon-third-changjingguanli
  • 分享方式
    #el-icon-third-fenxiangfangshi
  • 编辑
    #el-icon-third-bianji
  • 关联设备
    #el-icon-third-guanlianshebei
  • 官方版本
    #el-icon-third-guanfangbanben
  • 功能定义
    #el-icon-third-gongnengdingyi
  • 基础管理
    #el-icon-third-jichuguanli
  • 技术服务
    #el-icon-third-jishufuwu
  • 合作伙伴密钥管理
    #el-icon-third-hezuohuobanmiyueguanli
  • 测试申请
    #el-icon-third-ceshishenqing
  • 节点管理
    #el-icon-third-jiedianguanli
  • 警告
    #el-icon-third-jinggao
  • 配网引导
    #el-icon-third-peiwangyindao
  • 人机交互
    #el-icon-third-renjijiaohu
  • 使用文档
    #el-icon-third-shiyongwendang
  • 设备开发
    #el-icon-third-shebeikaifa
  • 权限审批
    #el-icon-third-quanxianshenpi
  • 已授权
    #el-icon-third-yishouquan
  • 提案审批
    #el-icon-third-tianshenpi
  • 数据看板
    #el-icon-third-shujukanban
  • 应用管理
    #el-icon-third-yingyongguanli
  • 仪表盘
    #el-icon-third-yibiaopan
  • 账号权限管理
    #el-icon-third-zhanghaoquanxianguanli
  • 园区运维
    #el-icon-third-yuanquyunwei
  • 准备量产
    #el-icon-third-zhunbeiliangchan
  • 基站管理
    #el-icon-third-jizhanguanli
  • 关闭
    #el-icon-third-guanbi
  • 自定义
    #el-icon-third-zidingyi
  • 下箭头
    #el-icon-third-xiajiantou
  • 上箭头
    #el-icon-third-shangjiantou
  • icon_loading
    #el-icon-third-icon_loading
  • icon_任务进程
    #el-icon-third-icon_renwujincheng
  • icon_入口
    #el-icon-third-icon_rukou
  • icon_疑问空心
    #el-icon-third-icon_yiwenkongxin
  • icon_发布
    #el-icon-third-icon_fabu
  • icon_添加
    #el-icon-third-icon_tianjia
  • icon_预览
    #el-icon-third-icon_yulan
  • icon_账号
    #el-icon-third-icon_zhanghao
  • icon_网页
    #el-icon-third-icon_wangye
  • icon_设置
    #el-icon-third-icon_shezhi
  • icon_保存
    #el-icon-third-icon_baocun
  • icon_应用管理
    #el-icon-third-icon_yingyongguanli
  • icon_使用文档
    #el-icon-third-icon_shiyongwendang
  • icon_帮助文档
    #el-icon-third-icon_bangzhuwendang
  • 表单组件-输入框
    #el-icon-third-biaodanzujian-shurukuang
  • 表单组件-表格
    #el-icon-third-biaodanzujian-biaoge
  • 表单组件-下拉框
    #el-icon-third-biaodanzujian-xialakuang
  • 图表-饼图
    #el-icon-third-tubiao-bingtu
  • 表单组件-按钮
    #el-icon-third-biaodanzujian-anniu
  • 工业组件-仪表盘
    #el-icon-third-gongyezujian-yibiaopan
  • 图表-卡片
    #el-icon-third-tubiao-qiapian
  • 工业组件-指示灯
    #el-icon-third-gongyezujian-zhishideng
  • 图表-折线图
    #el-icon-third-tubiao-zhexiantu
  • 形状-矩形
    #el-icon-third-xingzhuang-juxing
  • 形状-箭形
    #el-icon-third-xingzhuang-jianxing
  • 工业组件-开关
    #el-icon-third-gongyezujian-kaiguan
  • 图表-柱状图
    #el-icon-third-tubiao-zhuzhuangtu
  • 形状-图片
    #el-icon-third-xingzhuang-tupian
  • 形状-文字
    #el-icon-third-xingzhuang-wenzi
  • 形状-椭圆形
    #el-icon-third-xingzhuang-tuoyuanxing
  • 形状-三角形
    #el-icon-third-xingzhuang-sanjiaoxing
  • 形状-星形
    #el-icon-third-xingzhuang-xingxing
  • 规则
    #el-icon-third-guize
  • 设备管理
    #el-icon-third-shebeiguanli
  • 功能定义
    #el-icon-third-gongnengdingyi1
  • 技术服务
    #el-icon-third-jishufuwu1
  • 运营中心
    #el-icon-third-yunyingzhongxin
  • 运营管理
    #el-icon-third-yunyingguanli
  • 组织下辖
    #el-icon-third-zuzhixiaxia
  • 组织展开
    #el-icon-third-zuzhizhankai
  • 组织群组
    #el-icon-third-zuzhiqunzu
  • 打开
    #el-icon-third-dakai
  • 英文
    #el-icon-third-yingwen
  • 中文
    #el-icon-third-zhongwen
  • 密文
    #el-icon-third-miwen
  • 显号
    #el-icon-third-xianhao
  • 空心对勾
    #el-icon-third-kongxinduigou
  • 回形针
    #el-icon-third-huixingzhen
  • 对勾
    #el-icon-third-duigou
  • 下一步
    #el-icon-third-xiayibu
  • 上一步
    #el-icon-third-shangyibu
  • 控件选中
    #el-icon-third-kongjianxuanzhong
  • 控件未选
    #el-icon-third-kongjianweixuan
  • 控件已选
    #el-icon-third-kongjianyixuan
  • 0117- 电杆
    #el-icon-third--diangan
  • 0309融雪剂溶解池*
    #el-icon-third-rongxuejirongjiechi
  • 0215路边停车场*
    #el-icon-third-lubiantingchechang
  • 0213-路名牌
    #el-icon-third--lumingpai
  • 0407街头座椅
    #el-icon-third-jietouzuoyi
  • 0601-重大危险
    #el-icon-third--zhongdaweixian
  • 0209-交通标志牌
    #el-icon-third--jiaotongbiaozhipai
  • 0303公厕指示牌
    #el-icon-third-gongcezhishipai
  • 方块+
    #el-icon-third-fangkuai
  • 方块-
    #el-icon-third-fangkuai-
  • 刷新
    #el-icon-third-shuaxin
  • 保存
    #el-icon-third-baocun
  • 发布
    #el-icon-third-fabu
  • 下一步
    #el-icon-third-xiayibu1
  • 上一步
    #el-icon-third-shangyibu1
  • 向下占行
    #el-icon-third-xiangxiazhanhang
  • 向上占行
    #el-icon-third-xiangshangzhanhang
  • 图片加载失败
    #el-icon-third-tupianjiazaishibai
  • 服务地球
    #el-icon-third-fuwudiqiu
  • 缩小
    #el-icon-third-suoxiao
  • 放大
    #el-icon-third-fangda
  • 还原画布
    #el-icon-third-huanyuanhuabu
  • 全屏
    #el-icon-third-quanping
  • 表单组件-表格
    #el-icon-third-biaodanzujian-biaoge1
  • API输出
    #el-icon-third-APIshuchu
  • API接入
    #el-icon-third-APIjieru
  • 文件夹
    #el-icon-third-wenjianjia
  • DOC
    #el-icon-third-DOC
  • BMP
    #el-icon-third-BMP
  • GIF
    #el-icon-third-GIF
  • JPG
    #el-icon-third-JPG
  • PNG
    #el-icon-third-PNG
  • 未知格式
    #el-icon-third-weizhigeshi
  • 更多
    #el-icon-third-gengduo
  • 云端下载
    #el-icon-third-yunduanxiazai
  • 云端上传
    #el-icon-third-yunduanshangchuan
  • #el-icon-third-dian
  • #el-icon-third-mian
  • 线
    #el-icon-third-xian
  • 设备状态
    #el-icon-third-shebeizhuangtai
  • 分组管理
    #el-icon-third-fenzuguanli
  • 快速编排
    #el-icon-third-kuaisubianpai
  • APP开发
    #el-icon-third-APPkaifa
  • 问题解答
    #el-icon-third-wentijieda
  • 客服
    #el-icon-third-kefu
  • 软件开发包
    #el-icon-third-ruanjiankaifabao
  • 搜索变小
    #el-icon-third-sousuobianxiao
  • 搜索放大
    #el-icon-third-sousuofangda
  • 定位
    #el-icon-third-dingwei
  • 物模型
    #el-icon-third-wumoxing
  • 告警
    #el-icon-third-gaojing
  • 任务进程
    #el-icon-third-renwujincheng
  • 消息通知
    #el-icon-third-xiaoxitongzhi
  • 优惠
    #el-icon-third-youhui
  • 告警
    #el-icon-third-gaojing1
  • 执行反馈
    #el-icon-third-zhihangfankui
  • 工单确认
    #el-icon-third-gongdanqueren
  • 广播
    #el-icon-third-guangbo
  • 工单
    #el-icon-third-gongdan
  • 消息
    #el-icon-third-xiaoxi
  • 地图-旗
    #el-icon-third-ditu-qi
  • 地图-地标
    #el-icon-third-ditu-dibiao
  • 地图-叉
    #el-icon-third-ditu-cha
  • 地图-气泡
    #el-icon-third-ditu-qipao
  • 地图-图钉
    #el-icon-third-ditu-tuding
  • 地图-环
    #el-icon-third-ditu-huan
  • 地图-星
    #el-icon-third-ditu-xing
  • 地图-圆
    #el-icon-third-ditu-yuan
  • 撤回色块
    #el-icon-third-chehuisekuai
  • 删除色块
    #el-icon-third-shanchusekuai
  • 发布色块
    #el-icon-third-fabusekuai
  • 信号
    #el-icon-third-xinhao
  • 蓝牙
    #el-icon-third-lanya
  • Wi-Fi
    #el-icon-third-Wi-Fi
  • 查询
    #el-icon-third-chaxun
  • 电表
    #el-icon-third-dianbiao
  • 安全
    #el-icon-third-anquan
  • 待办事项
    #el-icon-third-daibanshixiang
  • 冰箱
    #el-icon-third-bingxiang
  • 反射
    #el-icon-third-fanshe
  • 风车
    #el-icon-third-fengche
  • 管道
    #el-icon-third-guandao
  • 规则
    #el-icon-third-guize1
  • 规则引擎
    #el-icon-third-guizeyinqing
  • 货物堆
    #el-icon-third-huowudui
  • 检测器
    #el-icon-third-jianceqi
  • 井盖
    #el-icon-third-jinggai
  • 流计算
    #el-icon-third-liujisuan
  • 函数
    #el-icon-third-hanshu
  • 连接流
    #el-icon-third-lianjieliu
  • 路灯
    #el-icon-third-ludeng
  • 摄像机
    #el-icon-third-shexiangji
  • 人体检测
    #el-icon-third-rentijiance
  • 魔术棒
    #el-icon-third-moshubang
  • 数据挖掘
    #el-icon-third-shujuwajue
  • 网关
    #el-icon-third-wangguan
  • 人脑
    #el-icon-third-shenjing
  • 储存
    #el-icon-third-chucun
  • AI
    #el-icon-third-wuguan
  • 云端刷新
    #el-icon-third-yunduanshuaxin
  • 运行
    #el-icon-third-yunhang
  • 路由器
    #el-icon-third-luyouqi
  • bug
    #el-icon-third-bug
  • get
    #el-icon-third-get
  • PIR
    #el-icon-third-PIR
  • 折线图
    #el-icon-third-zhexiantu
  • 水表
    #el-icon-third-shuibiao
  • js
    #el-icon-third-js
  • 自行车
    #el-icon-third-zihangche
  • 列表
    #el-icon-third-liebiao
  • 汽车定位
    #el-icon-third-qichedingwei
  • 地磁
    #el-icon-third-dici
  • mysql
    #el-icon-third-mysql
  • 汽车
    #el-icon-third-qiche
  • 神经
    #el-icon-third-shenjing1
  • 城市
    #el-icon-third-chengshi
  • 告警实心
    #el-icon-third-tixingshixin
  • 门磁
    #el-icon-third-menci
  • 插座
    #el-icon-third-chazuo
  • 燃气监测器
    #el-icon-third-ranqijianceqi
  • 开关
    #el-icon-third-kaiguan
  • 插头
    #el-icon-third-chatou
  • 洗衣机
    #el-icon-third-xiyiji
  • 一键开关
    #el-icon-third-yijiankaiguan
  • 烟雾报警器
    #el-icon-third-yanwubaojingqi
  • 无线电波
    #el-icon-third-wuxiandianbo
  • 复制
    #el-icon-third-fuzhi
  • 删除
    #el-icon-third-shanchu
  • 编辑色块
    #el-icon-third-bianjisekuai
  • i视频失效
    #el-icon-third-ishipinshixiao
  • iframe添加
    #el-icon-third-iframetianjia
  • 图片添加
    #el-icon-third-tupiantianjia
  • 列表模式_块
    #el-icon-third-liebiaomoshi_kuai
  • 卡片模式_块
    #el-icon-third-qiapianmoshi_kuai
  • 分栏
    #el-icon-third-fenlan
  • 分割线
    #el-icon-third-fengexian
  • 点赞
    #el-icon-third-dianzan
  • 插入链接
    #el-icon-third-charulianjie
  • 插入图片
    #el-icon-third-charutupian
  • 取消链接
    #el-icon-third-quxiaolianjie
  • 无序排列
    #el-icon-third-wuxupailie
  • 居中对齐
    #el-icon-third-juzhongduiqi
  • 引用
    #el-icon-third-yinyong
  • 有序排列
    #el-icon-third-youxupailie
  • 右对齐
    #el-icon-third-youduiqi
  • 字体代码
    #el-icon-third-zitidaima
  • 笑脸
    #el-icon-third-xiaolian
  • 字体加粗
    #el-icon-third-zitijiacu
  • 字体删除线
    #el-icon-third-zitishanchuxian
  • 字体上标
    #el-icon-third-zitishangbiao
  • 字体标题
    #el-icon-third-zitibiaoti
  • 字体下划线
    #el-icon-third-zitixiahuaxian
  • 字体斜体
    #el-icon-third-zitixieti
  • 字体颜色
    #el-icon-third-zitiyanse
  • 左对齐
    #el-icon-third-zuoduiqi
  • 字体预览
    #el-icon-third-zitiyulan
  • 字体下标
    #el-icon-third-zitixiabiao
  • 左右对齐
    #el-icon-third-zuoyouduiqi
  • 编辑
    #el-icon-third-tianxie
  • 集成打包
    #el-icon-third-huowudui1
  • 硬件
    #el-icon-third-yingjian
  • 设备开发
    #el-icon-third-shebeikaifa1
  • 点赞_块
    #el-icon-third-dianzan_kuai
  • 置换
    #el-icon-third-zhihuan
  • 托管
    #el-icon-third-tuoguan
  • 对勾
    #el-icon-third-duigoux
  • 关闭
    #el-icon-third-guanbi1
  • 爱心 _实心
    #el-icon-third-aixin_shixin
  • 燃气泄漏报警器
    #el-icon-third-ranqixieloubaojingqi
  • 电表_实体
    #el-icon-third-dianbiao_shiti
  • 爱心
    #el-icon-third-aixin
  • 水表_实体
    #el-icon-third-shuibiao_shiti
  • 智能消防栓
    #el-icon-third-zhinengxiaofangshuan
  • 燃气表_实体
    #el-icon-third-ranqibiao_shiti
  • 摄像头_实体
    #el-icon-third-shexiangtou_shiti
  • 摄像头_关闭
    #el-icon-third-shexiangtou_guanbi
  • 摄像头
    #el-icon-third-shexiangtou
  • 声音_实体
    #el-icon-third-shengyin_shiti
  • 声音开
    #el-icon-third-shengyinkai
  • 收藏_实心
    #el-icon-third-shoucang_shixin
  • 收藏
    #el-icon-third-shoucang
  • 声音无
    #el-icon-third-shengyinwu
  • 声音静音
    #el-icon-third-shengyinjingyin

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>