• 首页
    
  • 搜索
    
  • 用户
    
  • 
  • 扫一扫
    
  • 后退
    
  • 企业
    
  • 正确
    
  • 添加
    
  • 评论
    
  • 箭头
    
  • 网络设置
    
  • 群组
    
  • zbds_沙漏
    
  • 箭头
    
  • 热点要闻
    
  • 语音
    
  • 收藏
    
  • 密码
    
  • table-dividingline
    
  • 分享
    
  • 箭头
    
  • 用户
    
  • 模型
    
  • 环境与资质
    
  • 04_个人
    
  • 05_群组
    
  • Open folder
    
  • 后退
    
  • 视频录制
    
  • 语音
    
  • 箱子
    
  • 编辑
    
  • 项目
    
  • 视频
    
  • 关注
    
  • 
  • 新闻
    
  • 我的
    
  • 用户名
    
  • 语音
    
  • 地区
    
  • 更多
    
  • 应用中心
    
  • 用户-圆
    
  • 用户
    
  • 网络系统
    
  • IP
    
  • 登录
    
  • 提醒
    
  • 区域
    
  • 通用
    
  • 网关
    
  • 规章制度
    
  • 历史
    
  • 重启
    
  • 07配载、装车-线性
    
  • 10仓库、仓储-线性
    
  • 11中转站-线性
    
  • 12库存-线性
    
  • 13末端网点-线性
    
  • 17企业、园区、物业
    
  • 17企业、园区、物业-线性
    
  • 36合作、关系-线性
    
  • 36合作、关系
    
  • 37-服务-线性
    
  • 37-服务
    
  • 音频
    
  • 沙漏
    
  • 新增
    
  • 导入
    
  • 列表展示1
    
  • 列表展示2
    
  • 交通运输表
    
  • max
    
  • 复制
    
  • 管理
    
  • 流程
    
  • 需求
    
  • 交通运输
    
  • 模型
    
  • 编辑
    
  • 用车
    
  • 可视化
    
  • 系统
    
  • 安全
    
  • 现金
    
  • 重启
    
  • home
    
  • 回收
    
  • 暂无数据
    
  • 差异性分析
    
  • 记事本
    
  • 系统
    
  • 提醒
    
  • 公文流转-收发工作-01
    
  • 云计算云平台
    
  • 公开年报
    
  • 调试
    
  • 场景管理
    
  • 编辑
    
  • 关联设备
    
  • 官方版本
    
  • 功能定义
    
  • 基础管理
    
  • 技术服务
    
  • 合作伙伴密钥管理
    
  • 测试申请
    
  • 节点管理
    
  • 警告
    
  • 配网引导
    
  • 人机交互
    
  • 使用文档
    
  • 权限审批
    
  • 已授权
    
  • 提案审批
    
  • 数据看板
    
  • 应用管理
    
  • 仪表盘
    
  • 账号权限管理
    
  • 园区运维
    
  • 基站管理
    
  • 大数据支持
    
  • 复合接口
    
  • menu-流转监控
    
  • 关闭
    
  • 自定义
    
  • 暂无数据
    
  • 模型
    
  • 内存
    
  • 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
    
  • 未知格式
    
  • 更多
    
  • 详情
    
  • unkown
    
  • 云端下载
    
  • 云端上传
    
  • 
  • 
  • 线
    
  • 复制
    
  • 透视
    
  • setting
    
  • 数据
    
  • 数据采集
    
  • 对比
    
  • 设备状态
    
  • 分组管理
    
  • 快速编排
    
  • APP开发
    
  • 记事本
    
  • 问题解答
    
  • 客服
    
  • 软件开发包
    
  • 会议
    
  • 公文流转
    
  • 审批
    
  • htb-Arrow right02
    
  • 编辑
    
  • 公务员
    
  • 复制
    
  • 暂停
    
  • 搜索变小
    
  • 搜索放大
    
  • 定位
    
  • 物模型
    
  • 告警
    
  • 任务进程
    
  • 消息通知
    
  • 优惠
    
  • 告警
    
  • 执行反馈
    
  • 工单确认
    
  • 广播
    
  • 工单
    
  • 区域
    
  • 模型
    
  • stop
    
  • 电脑
    
  • 地块
    
  • 
    消息
    
  • 信号
    
  • 蓝牙
    
  • Wi-Fi
    
  • icon-rgb_架构智能分析-35
    
  • icon-rgb_事件智能分析-32
    
  • icon-rgb_指标智能分析-31
    
  • 暂无数据
    
  • 查询
    
  • 电表
    
  • 安全
    
  • 待办事项
    
  • 冰箱
    
  • 反射
    
  • 风车
    
  • 管道
    
  • 规则
    
  • 规则引擎
    
  • 货物堆
    
  • 检测器
    
  • 井盖
    
  • 流计算
    
  • 函数
    
  • 连接流
    
  • 路灯
    
  • 摄像机
    
  • 人体检测
    
  • 魔术棒
    
  • 数据挖掘
    
  • 网关
    
  • 人脑
    
  • 储存
    
  • AI
    
  • 云端刷新
    
  • 运行
    
  • 路由器
    
  • get
    
  • PIR
    
  • 折线图
    
  • 水表
    
  • js
    
  • 自行车
    
  • 列表
    
  • 汽车定位
    
  • 地磁
    
  • mysql
    
  • 汽车
    
  • 神经
    
  • 同步
    
  • 城市
    
  • 门磁
    
  • 插座
    
  • 燃气监测器
    
  • 开关
    
  • 插头
    
  • 洗衣机
    
  • 一键开关
    
  • 烟雾报警器
    
  • 
    无线电波
    
  • 复制
    
  • 审计
    
  • 出租
    
  • 图表
    
  • 公开指南
    
  • 删除
    
  • i视频失效
    
  • iframe添加
    
  • 图片添加
    
  • 出租
    
  • 暂无数据 反馈图标-50
    
  • 已办
    
  • 区域
    
  • 分栏
    
  • 分割线
    
  • 点赞
    
  • 插入链接
    
  • 取消链接
    
  • 无序排列
    
  • 居中对齐
    
  • 引用
    
  • 有序排列
    
  • 右对齐
    
  • 字体代码
    
  • 笑脸
    
  • 字体加粗
    
  • 字体删除线
    
  • 字体上标
    
  • 字体标题
    
  • 字体下划线
    
  • 字体斜体
    
  • 字体颜色
    
  • 左对齐
    
  • 字体预览
    
  • 字体下标
    
  • 左右对齐
    
  • 编辑
    
  • 集成打包
    
  • 硬件
    
  • 设备开发
    
  • GIS
    
  • 置换
    
  • 托管
    
  • 公开招标
    
  • 暂无数据
    
  • 详情
    
  • 对勾
    
  • 关闭
    
  • GIS
    
  • 爱心
    
  • 摄像头_关闭
    
  • 摄像头
    
  • 声音开
    
  • 收藏
    
  • 声音无
    
  • 声音静音
    
  • 识别
    
  • 文件-文件流转
    
  • begin
    
  • 准备量产
    
  • 设备开发
    
  • 数据库
    
  • 地图 (1)
    
  • 交通运输
    
  • Log file upload
    
  • 公开线索
    
  • 地块
    
  • 暂无数据
    
  • 智能分析
    
  • 设置
    
  • 编辑
    
  • 记事本
    
  • 警告
    
  • 图表
    
  • 沙漏
    
  • 应用 触发
    
  • 公务
    
  • 空心问号
    
  • 错误空心
    
  • 方块
    
  • 方块+
    
  • 空心对勾
    
  • 信息空心
    
  • 控件
    
  • 告警空心
    
  • 暂无数据
    
  • 探索
    
  • 记事本
    
  • 暂无数据
    
  • 新建任务
    
  • 抵押质押
    
  • audit
    
  • delete
    
  • file-add
    
  • file-image
    
  • file-exception
    
  • file-excel
    
  • file-word
    
  • file-copy
    
  • file-zip
    
  • safetycertificate
    
  • book
    
  • file-pdf
    
  • file-text
    
  • file-exclamation
    
  • file
    
  • propertysafety
    
  • filesearch
    
  • fileprotect
    
  • filesync
    
  • solution
    
  • eye
    
  • message
    
  • play-circle
    
  • right-circle
    
  • reload
    
  • earth
    
  • question-circle
    
  • smile
    
  • redo
    
  • sync
    
  • setting
    
  • reloadtime
    
  • time-circle
    
  • warning-circle
    
  • up-circle
    
  • undo
    
  • YUAN
    
  • timeout
    
  • logout
    
  • poweroff
    
  • adduser
    
  • appstore
    
  • deleteteam
    
  • edit-square
    
  • barchart
    
  • deleteuser
    
  • Import
    
  • location
    
  • addteam
    
  • minus-square
    
  • plus-square
    
  • linechart
    
  • mobile
    
  • sever
    
  • wallet
    
  • save
    
  • user
    
  • project
    
  • team
    
  • export
    
  • arrawsalt
    
  • attachment
    
  • creditcard
    
  • edit
    
  • error
    
  • image
    
  • mail
    
  • key
    
  • link
    
  • sound
    
  • share
    
  • heart
    
  • shrink
    
  • verticalleft
    
  • wrench
    
  • verticalright
    
  • tag
    
  • wifi
    
  • disconnect
    
  • close-circle
    
  • check-circle
    
  • down-circle
    
  • info-circle
    
  • plus-circle
    
  • frown
    
  • left-circle
    
  • minus-circle
    
  • calendar
    
  • bell
    
  • cloud-upload
    
  • camera
    
  • cloud
    
  • cloud-download
    
  • folder-open
    
  • filter
    
  • folder-add
    
  • home
    
  • folder
    
  • like
    
  • lock
    
  • shop
    
  • shopping
    
  • video
    
  • unlike
    
  • printer
    
  • arrowright
    
  • arrowleft
    
  • arrowup
    
  • audiostatic
    
  • check
    
  • close
    
  • desktop
    
  • audio
    
  • arrowdown
    
  • download
    
  • fire
    
  • indent
    
  • menu
    
  • sort-descending
    
  • upload
    
  • outdent
    
  • sort-ascending
    
  • search
    
  • 暂无数据
    
  • 暂无数据
    

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"。

  • 首页
    .icon-shouye
  • 搜索
    .icon-search
  • 用户
    .icon-yonghuicon
  • .icon-jia
  • 扫一扫
    .icon-saoyisao
  • 后退
    .icon-houtui
  • 企业
    .icon-qiye
  • 正确
    .icon-zhengque
  • 添加
    .icon-tianjia
  • 评论
    .icon-pinglun
  • 箭头
    .icon-jiantou
  • 网络设置
    .icon-wangluoshezhi
  • 群组
    .icon-qunzu
  • zbds_沙漏
    .icon-shalou
  • 箭头
    .icon-jiantou1
  • 热点要闻
    .icon-redianyaowen
  • 语音
    .icon-yuyin
  • 收藏
    .icon-shoucang
  • 密码
    .icon-mima
  • table-dividingline
    .icon-tabledividingline
  • 分享
    .icon-fenxiang
  • 箭头
    .icon-jiantou2
  • 用户
    .icon-yonghu1
  • 模型
    .icon-moxing
  • 环境与资质
    .icon-huanjingyuzizhi
  • 04_个人
    .icon-04geren
  • 05_群组
    .icon-05qunzu
  • Open folder
    .icon-openfolder
  • 后退
    .icon-houtui1
  • 视频录制
    .icon-shipinluzhi
  • 语音
    .icon-yuyin-copy
  • 箱子
    .icon-xiangzi
  • 编辑
    .icon-bianji
  • 项目
    .icon-xiangmu
  • 视频
    .icon-shipin
  • 关注
    .icon-guanzhu
  • .icon-zan
  • 新闻
    .icon-xinwen
  • 我的
    .icon-wode-copy
  • 用户名
    .icon-yonghuming-copy
  • 语音
    .icon-yuyin-copy1
  • 地区
    .icon-diqu
  • 更多
    .icon-gengduo1
  • 应用中心
    .icon-yingyongzhongxin
  • 用户-圆
    .icon-yonghu-yuan
  • 用户
    .icon-yonghu
  • 网络系统
    .icon-wangluoxitong
  • IP
    .icon-IP
  • 登录
    .icon-denglu
  • 提醒
    .icon-tixing
  • 区域
    .icon-quyu
  • 通用
    .icon-tongyong
  • 网关
    .icon-wangguan1
  • 规章制度
    .icon-guizhangzhidu
  • 历史
    .icon-lishi
  • 重启
    .icon-zhongqi
  • 07配载、装车-线性
    .icon-peizaizhuangche-xianxing
  • 10仓库、仓储-线性
    .icon-cangkucangchu-xianxing
  • 11中转站-线性
    .icon-zhongzhuanzhan-xianxing
  • 12库存-线性
    .icon-kucun-xianxing
  • 13末端网点-线性
    .icon-moduanwangdian-xianxing
  • 17企业、园区、物业
    .icon-qiyeyuanquwuye
  • 17企业、园区、物业-线性
    .icon-qiyeyuanquwuye-xianxing
  • 36合作、关系-线性
    .icon-hezuoguanxi-xianxing
  • 36合作、关系
    .icon-hezuoguanxi
  • 37-服务-线性
    .icon--fuwu-xianxing
  • 37-服务
    .icon--fuwu
  • 音频
    .icon-yinpin
  • 沙漏
    .icon-shalou1
  • 新增
    .icon-xinzeng
  • 导入
    .icon-icon_daoru
  • 列表展示1
    .icon-liebiaozhanshi
  • 列表展示2
    .icon-liebiaozhanshi1
  • 交通运输表
    .icon-jiaotongyunshubiao-copy
  • max
    .icon-tubiaozhizuomoban
  • 复制
    .icon-fuzhi
  • 管理
    .icon-guanli
  • 流程
    .icon-liucheng
  • 需求
    .icon-xuqiu
  • 交通运输
    .icon-jiaotongyunshu
  • 模型
    .icon-moxing1
  • 编辑
    .icon-bianji1
  • 用车
    .icon-yongche
  • 可视化
    .icon-keshihua
  • 系统
    .icon-xitong
  • 安全
    .icon-anquan1
  • 现金
    .icon-xianjin
  • 重启
    .icon-zhongqi-
  • home
    .icon-home
  • 回收
    .icon-huishou
  • 暂无数据
    .icon-zanwushuju1
  • 差异性分析
    .icon-chayixingfenxi
  • 记事本
    .icon-jishiben
  • 系统
    .icon-xitong1
  • 提醒
    .icon-tixing1
  • 公文流转-收发工作-01
    .icon-gongwenliuzhuan-shoufagongzuo-
  • 云计算云平台
    .icon-iconsheji-
  • 公开年报
    .icon-gongkainianbao
  • 调试
    .icon-tiaoshi
  • 场景管理
    .icon-changjingguanli
  • 编辑
    .icon-bianji2
  • 关联设备
    .icon-guanlianshebei
  • 官方版本
    .icon-guanfangbanben
  • 功能定义
    .icon-gongnengdingyi
  • 基础管理
    .icon-jichuguanli
  • 技术服务
    .icon-jishufuwu
  • 合作伙伴密钥管理
    .icon-hezuohuobanmiyueguanli
  • 测试申请
    .icon-ceshishenqing
  • 节点管理
    .icon-jiedianguanli
  • 警告
    .icon-jinggao
  • 配网引导
    .icon-peiwangyindao
  • 人机交互
    .icon-renjijiaohu
  • 使用文档
    .icon-shiyongwendang
  • 权限审批
    .icon-quanxianshenpi
  • 已授权
    .icon-yishouquan
  • 提案审批
    .icon-tianshenpi
  • 数据看板
    .icon-shujukanban
  • 应用管理
    .icon-yingyongguanli
  • 仪表盘
    .icon-yibiaopan
  • 账号权限管理
    .icon-zhanghaoquanxianguanli
  • 园区运维
    .icon-yuanquyunwei
  • 基站管理
    .icon-jizhanguanli
  • 大数据支持
    .icon-kujialeqiyezhan_dashujuzhichi-
  • 复合接口
    .icon-fuhejiekou
  • menu-流转监控
    .icon-menu-liuzhuanjiankong
  • 关闭
    .icon-guanbi
  • 自定义
    .icon-zidingyi
  • 暂无数据
    .icon-zanwushuju2
  • 模型
    .icon-moxing2
  • 内存
    .icon-neicun
  • icon_loading
    .icon-icon_loading
  • icon_任务进程
    .icon-icon_renwujincheng
  • icon_入口
    .icon-icon_rukou
  • icon_疑问空心
    .icon-icon_yiwenkongxin
  • icon_发布
    .icon-icon_fabu
  • icon_添加
    .icon-icon_tianjia
  • icon_预览
    .icon-icon_yulan
  • icon_账号
    .icon-icon_zhanghao
  • icon_网页
    .icon-icon_wangye
  • icon_设置
    .icon-icon_shezhi
  • icon_保存
    .icon-icon_baocun
  • icon_应用管理
    .icon-icon_yingyongguanli
  • icon_使用文档
    .icon-icon_shiyongwendang
  • icon_帮助文档
    .icon-icon_bangzhuwendang
  • 农业驱虫
    .icon-nongyequchong
  • 表单组件-输入框
    .icon-biaodanzujian-shurukuang
  • 表单组件-表格
    .icon-biaodanzujian-biaoge
  • 表单组件-下拉框
    .icon-biaodanzujian-xialakuang
  • 图表-饼图
    .icon-tubiao-bingtu
  • 表单组件-按钮
    .icon-biaodanzujian-anniu
  • 工业组件-仪表盘
    .icon-gongyezujian-yibiaopan
  • 图表-卡片
    .icon-tubiao-qiapian
  • 工业组件-指示灯
    .icon-gongyezujian-zhishideng
  • 图表-折线图
    .icon-tubiao-zhexiantu
  • 形状-矩形
    .icon-xingzhuang-juxing
  • 形状-箭形
    .icon-xingzhuang-jianxing
  • 工业组件-开关
    .icon-gongyezujian-kaiguan
  • 图表-柱状图
    .icon-tubiao-zhuzhuangtu
  • 形状-图片
    .icon-xingzhuang-tupian
  • 形状-文字
    .icon-xingzhuang-wenzi
  • 形状-椭圆形
    .icon-xingzhuang-tuoyuanxing
  • 形状-三角形
    .icon-xingzhuang-sanjiaoxing
  • 形状-星形
    .icon-xingzhuang-xingxing
  • 会议
    .icon-huiyi
  • 咖啡
    .icon-kafei
  • 出差
    .icon-newchuchai
  • 需求
    .icon-xuqiu-hui
  • 规则
    .icon-guize
  • 设备管理
    .icon-shebeiguanli
  • 功能定义
    .icon-gongnengdingyi1
  • 现金
    .icon-xianjin1
  • 抵押要素变更
    .icon-diyayaosubiangeng
  • 技术服务
    .icon-jishufuwu1
  • 运营中心
    .icon-yunyingzhongxin
  • 运营管理
    .icon-yunyingguanli
  • 组织下辖
    .icon-zuzhixiaxia
  • 组织展开
    .icon-zuzhizhankai
  • 组织群组
    .icon-zuzhiqunzu
  • 转让
    .icon-zhuanrang
  • 打开
    .icon-dakai
  • 英文
    .icon-yingwen
  • 中文
    .icon-zhongwen
  • 密文
    .icon-miwen
  • 显号
    .icon-xianhao
  • 出差
    .icon-chucha
  • 空心对勾
    .icon-kongxinduigou
  • 回形针
    .icon-huixingzhen
  • 对勾
    .icon-duigou
  • 下一步
    .icon-xiayibu
  • 上一步
    .icon-shangyibu
  • 控件未选
    .icon-kongjianweixuan
  • 控件已选
    .icon-kongjianyixuan
  • 待办
    .icon-daiban
  • 0117- 电杆
    .icon--diangan
  • 0309融雪剂溶解池*
    .icon-rongxuejirongjiechi
  • 0215路边停车场*
    .icon-lubiantingchechang
  • 0213-路名牌
    .icon--lumingpai
  • 0407街头座椅
    .icon-jietouzuoyi
  • 0601-重大危险
    .icon--zhongdaweixian
  • 0209-交通标志牌
    .icon--jiaotongbiaozhipai
  • 0303公厕指示牌
    .icon-gongcezhishipai
  • 方块+
    .icon-fangkuai
  • 方块-
    .icon-fangkuai-
  • 刷新
    .icon-shuaxin
  • 保存
    .icon-baocun
  • 发布
    .icon-fabu
  • 下一步
    .icon-xiayibu1
  • 上一步
    .icon-shangyibu1
  • 模型
    .icon-moxing3
  • 向下占行
    .icon-xiangxiazhanhang
  • 向上占行
    .icon-xiangshangzhanhang
  • 图片加载失败
    .icon-tupianjiazaishibai
  • 服务地球
    .icon-fuwudiqiu
  • 缩小
    .icon-suoxiao
  • 放大
    .icon-fangda
  • 还原画布
    .icon-huanyuanhuabu
  • 全屏
    .icon-quanping
  • 表单组件-表格
    .icon-biaodanzujian-biaoge1
  • API输出
    .icon-APIshuchu
  • API接入
    .icon-APIjieru
  • 灯泡
    .icon-dengpao
  • 文件夹
    .icon-wenjianjia
  • DOC
    .icon-DOC
  • 未知格式
    .icon-weizhigeshi
  • 更多
    .icon-gengduo
  • 详情
    .icon-xiangqing
  • unkown
    .icon-unkown
  • 云端下载
    .icon-yunduanxiazai
  • 云端上传
    .icon-yunduanshangchuan
  • .icon-dian
  • .icon-mian
  • 线
    .icon-xian
  • 复制
    .icon-fuzhi3
  • 透视
    .icon-toushi
  • setting
    .icon-setting
  • 数据
    .icon-shuju
  • 数据采集
    .icon-zhongguohangtiantubiaoheji-weizhuanlunkuo-
  • 对比
    .icon-duibi
  • 设备状态
    .icon-shebeizhuangtai
  • 分组管理
    .icon-fenzuguanli
  • 快速编排
    .icon-kuaisubianpai
  • APP开发
    .icon-APPkaifa
  • 记事本
    .icon-jishiben1
  • 问题解答
    .icon-wentijieda
  • 客服
    .icon-kefu
  • 软件开发包
    .icon-ruanjiankaifabao
  • 会议
    .icon-huiyi1
  • 公文流转
    .icon-gongwenliuzhuan
  • 审批
    .icon-shenpi
  • htb-Arrow right02
    .icon-right
  • 编辑
    .icon-bianji4
  • 公务员
    .icon-gongwuyuan
  • 复制
    .icon-fuzhi1
  • 暂停
    .icon-zanting
  • 搜索变小
    .icon-sousuobianxiao
  • 搜索放大
    .icon-sousuofangda
  • 定位
    .icon-dingwei
  • 物模型
    .icon-wumoxing
  • 告警
    .icon-gaojing
  • 任务进程
    .icon-renwujincheng
  • 消息通知
    .icon-xiaoxitongzhi
  • 优惠
    .icon-youhui
  • 告警
    .icon-gaojing1
  • 执行反馈
    .icon-zhihangfankui
  • 工单确认
    .icon-gongdanqueren
  • 广播
    .icon-guangbo
  • 工单
    .icon-gongdan
  • 区域
    .icon-quyu1
  • 模型
    .icon-moxing4
  • stop
    .icon-stop
  • 电脑
    .icon-diannao
  • 地块
    .icon-dikuai
  • 消息
    .icon-xiaoxi
  • 信号
    .icon-xinhao
  • 蓝牙
    .icon-lanya
  • Wi-Fi
    .icon-Wi-Fi
  • icon-rgb_架构智能分析-35
    .icon-icon-rgb_jiagouzhinengfenxi-
  • icon-rgb_事件智能分析-32
    .icon-icon-rgb_shijianzhinengfenxi-
  • icon-rgb_指标智能分析-31
    .icon-icon-rgb_zhibiaozhinengfenxi-
  • 暂无数据
    .icon-zanwushuju
  • 查询
    .icon-chaxun
  • 电表
    .icon-dianbiao
  • 安全
    .icon-anquan
  • 待办事项
    .icon-daibanshixiang
  • 冰箱
    .icon-bingxiang
  • 反射
    .icon-fanshe
  • 风车
    .icon-fengche
  • 管道
    .icon-guandao
  • 规则
    .icon-guize1
  • 规则引擎
    .icon-guizeyinqing
  • 货物堆
    .icon-huowudui
  • 检测器
    .icon-jianceqi
  • 井盖
    .icon-jinggai
  • 流计算
    .icon-liujisuan
  • 函数
    .icon-hanshu
  • 连接流
    .icon-lianjieliu
  • 路灯
    .icon-ludeng
  • 摄像机
    .icon-shexiangji
  • 人体检测
    .icon-rentijiance
  • 魔术棒
    .icon-moshubang
  • 数据挖掘
    .icon-shujuwajue
  • 网关
    .icon-wangguan
  • 人脑
    .icon-shenjing
  • 储存
    .icon-chucun
  • AI
    .icon-wuguan
  • 云端刷新
    .icon-yunduanshuaxin
  • 运行
    .icon-yunhang
  • 路由器
    .icon-luyouqi
  • get
    .icon-get
  • PIR
    .icon-PIR
  • 折线图
    .icon-zhexiantu
  • 水表
    .icon-shuibiao
  • js
    .icon-js
  • 自行车
    .icon-zihangche
  • 列表
    .icon-liebiao
  • 汽车定位
    .icon-qichedingwei
  • 地磁
    .icon-dici
  • mysql
    .icon-mysql
  • 汽车
    .icon-qiche
  • 神经
    .icon-shenjing1
  • 同步
    .icon-tongbu
  • 城市
    .icon-chengshi
  • 门磁
    .icon-menci
  • 插座
    .icon-chazuo
  • 燃气监测器
    .icon-ranqijianceqi
  • 开关
    .icon-kaiguan
  • 插头
    .icon-chatou
  • 洗衣机
    .icon-xiyiji
  • 一键开关
    .icon-yijiankaiguan
  • 烟雾报警器
    .icon-yanwubaojingqi
  • 无线电波
    .icon-wuxiandianbo
  • 复制
    .icon-fuzhi2
  • 审计
    .icon-shenji
  • 出租
    .icon-chuzu
  • 图表
    .icon-data_icon9
  • 公开指南
    .icon-gongkaizhinan
  • 删除
    .icon-shanchu
  • i视频失效
    .icon-ishipinshixiao
  • iframe添加
    .icon-iframetianjia
  • 图片添加
    .icon-tupiantianjia
  • 出租
    .icon-chuzu1
  • 暂无数据 反馈图标-50
    .icon-zanwushujufankuitubiao-
  • 已办
    .icon-yiban
  • 区域
    .icon-quyu2
  • 分栏
    .icon-fenlan
  • 分割线
    .icon-fengexian
  • 点赞
    .icon-dianzan
  • 插入链接
    .icon-charulianjie
  • 取消链接
    .icon-quxiaolianjie
  • 无序排列
    .icon-wuxupailie
  • 居中对齐
    .icon-juzhongduiqi
  • 引用
    .icon-yinyong
  • 有序排列
    .icon-youxupailie
  • 右对齐
    .icon-youduiqi
  • 字体代码
    .icon-zitidaima
  • 笑脸
    .icon-xiaolian
  • 字体加粗
    .icon-zitijiacu
  • 字体删除线
    .icon-zitishanchuxian
  • 字体上标
    .icon-zitishangbiao
  • 字体标题
    .icon-zitibiaoti
  • 字体下划线
    .icon-zitixiahuaxian
  • 字体斜体
    .icon-zitixieti
  • 字体颜色
    .icon-zitiyanse
  • 左对齐
    .icon-zuoduiqi
  • 字体预览
    .icon-zitiyulan
  • 字体下标
    .icon-zitixiabiao
  • 左右对齐
    .icon-zuoyouduiqi
  • 编辑
    .icon-tianxie
  • 集成打包
    .icon-huowudui1
  • 硬件
    .icon-yingjian
  • 设备开发
    .icon-shebeikaifa
  • GIS
    .icon-GIS
  • 置换
    .icon-zhihuan
  • 托管
    .icon-tuoguan
  • 公开招标
    .icon-gongkaizhaobiao
  • 暂无数据
    .icon-zanwushuju3
  • 详情
    .icon-xiangqing1
  • 对勾
    .icon-duigoux
  • 关闭
    .icon-guanbi1
  • GIS
    .icon-GIS1
  • 爱心
    .icon-aixin
  • 摄像头_关闭
    .icon-shexiangtou_guanbi
  • 摄像头
    .icon-shexiangtou
  • 声音开
    .icon-shengyinkai
  • 收藏
    .icon-shoucang1
  • 声音无
    .icon-shengyinwu
  • 声音静音
    .icon-shengyinjingyin
  • 识别
    .icon-ziyuan
  • 文件-文件流转
    .icon-wj-wjlz
  • begin
    .icon-begin
  • 准备量产
    .icon-zhunbeiliangchan
  • 设备开发
    .icon-shebeikaifa1
  • 数据库
    .icon-shujuku
  • 地图 (1)
    .icon-ditu
  • 交通运输
    .icon-jiaotongyunshu1
  • Log file upload
    .icon-Logfileupload
  • 公开线索
    .icon-gongkaixiansuo
  • 地块
    .icon-dikuai1
  • 暂无数据
    .icon-zanwushuju4
  • 智能分析
    .icon-zhinengfenxi
  • 设置
    .icon-shezhi
  • 编辑
    .icon-bianji3
  • 记事本
    .icon-jishiben2
  • 警告
    .icon-jinggao1
  • 图表
    .icon-tubiao
  • 沙漏
    .icon-shalou2
  • 应用 触发
    .icon-yingyongchufa
  • 公务
    .icon-renwu
  • 空心问号
    .icon-kongxinwenhao
  • 错误空心
    .icon-cuowukongxin
  • 方块
    .icon-fangkuai1
  • 方块+
    .icon-fangkuai2
  • 空心对勾
    .icon-kongxinduigou1
  • 信息空心
    .icon-xinxikongxin
  • 控件
    .icon-kongjian
  • 告警空心
    .icon-gaojingkongxin
  • 暂无数据
    .icon-zanwushuju5
  • 探索
    .icon-tansuo
  • 记事本
    .icon-jishiben3
  • 暂无数据
    .icon-zanwushuju6
  • 新建任务
    .icon-xinjianrenwu
  • 抵押质押
    .icon-diyazhiya
  • audit
    .icon-audit
  • delete
    .icon-delete
  • file-add
    .icon-file-add
  • file-image
    .icon-file-image
  • file-exception
    .icon-file-exception
  • file-excel
    .icon-file-excel
  • file-word
    .icon-file-word
  • file-copy
    .icon-file-copy
  • file-zip
    .icon-file-zip
  • safetycertificate
    .icon-safetycertificate
  • book
    .icon-book
  • file-pdf
    .icon-file-pdf
  • file-text
    .icon-file-text
  • file-exclamation
    .icon-file-exclamation
  • file
    .icon-file
  • propertysafety
    .icon-propertysafety
  • filesearch
    .icon-filesearch
  • fileprotect
    .icon-fileprotect
  • filesync
    .icon-filesync
  • solution
    .icon-solution
  • eye
    .icon-eye
  • message
    .icon-message
  • play-circle
    .icon-play-circle
  • right-circle
    .icon-right-circle
  • reload
    .icon-reload
  • earth
    .icon-earth
  • question-circle
    .icon-question-circle
  • smile
    .icon-smile
  • redo
    .icon-redo
  • sync
    .icon-sync
  • setting
    .icon-setting1
  • reloadtime
    .icon-reloadtime
  • time-circle
    .icon-time-circle
  • warning-circle
    .icon-warning-circle
  • up-circle
    .icon-up-circle
  • undo
    .icon-undo
  • YUAN
    .icon-YUAN
  • timeout
    .icon-timeout
  • logout
    .icon-logout
  • poweroff
    .icon-poweroff
  • adduser
    .icon-adduser
  • appstore
    .icon-appstore
  • deleteteam
    .icon-deleteteam
  • edit-square
    .icon-edit-square
  • barchart
    .icon-barchart
  • deleteuser
    .icon-deleteuser
  • Import
    .icon-Import
  • location
    .icon-location
  • addteam
    .icon-addteam
  • minus-square
    .icon-minus-square
  • plus-square
    .icon-plus-square
  • linechart
    .icon-linechart
  • mobile
    .icon-mobile
  • sever
    .icon-sever
  • wallet
    .icon-wallet
  • save
    .icon-save
  • user
    .icon-user
  • project
    .icon-project
  • team
    .icon-team
  • export
    .icon-export
  • arrawsalt
    .icon-arrawsalt
  • attachment
    .icon-attachment
  • creditcard
    .icon-creditcard
  • edit
    .icon-edit
  • error
    .icon-error
  • image
    .icon-image
  • mail
    .icon-mail
  • key
    .icon-key
  • link
    .icon-link
  • sound
    .icon-sound
  • share
    .icon-share
  • heart
    .icon-heart
  • shrink
    .icon-shrink
  • verticalleft
    .icon-verticalleft
  • wrench
    .icon-wrench
  • verticalright
    .icon-verticalright
  • tag
    .icon-tag
  • wifi
    .icon-wifi
  • disconnect
    .icon-disconnect
  • close-circle
    .icon-close-circle
  • check-circle
    .icon-check-circle
  • down-circle
    .icon-down-circle
  • info-circle
    .icon-info-circle
  • plus-circle
    .icon-plus-circle
  • frown
    .icon-frown
  • left-circle
    .icon-left-circle
  • minus-circle
    .icon-minus-circle
  • calendar
    .icon-calendar
  • bell
    .icon-bell
  • cloud-upload
    .icon-cloud-upload
  • camera
    .icon-camera
  • cloud
    .icon-cloud
  • cloud-download
    .icon-cloud-download
  • folder-open
    .icon-folder-open
  • filter
    .icon-filter
  • folder-add
    .icon-folder-add
  • home
    .icon-home1
  • folder
    .icon-folder
  • like
    .icon-like
  • lock
    .icon-lock
  • shop
    .icon-shop
  • shopping
    .icon-shopping
  • video
    .icon-video
  • unlike
    .icon-unlike
  • printer
    .icon-printer
  • arrowright
    .icon-arrowright
  • arrowleft
    .icon-arrowleft
  • arrowup
    .icon-arrowup
  • audiostatic
    .icon-audiostatic
  • check
    .icon-check
  • close
    .icon-close
  • desktop
    .icon-desktop
  • audio
    .icon-audio
  • arrowdown
    .icon-arrowdown
  • download
    .icon-download
  • fire
    .icon-fire
  • indent
    .icon-indent
  • menu
    .icon-menu
  • sort-descending
    .icon-sort-descending
  • upload
    .icon-upload
  • outdent
    .icon-outdent
  • sort-ascending
    .icon-sort-ascending
  • search
    .icon-search1
  • 暂无数据
    .icon-zanwushuju7
  • 暂无数据
    .icon-zanwushuju8

font-class 引用


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

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

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

使用步骤如下:

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

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

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

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

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

  • 首页
    #icon-shouye
  • 搜索
    #icon-search
  • 用户
    #icon-yonghuicon
  • #icon-jia
  • 扫一扫
    #icon-saoyisao
  • 后退
    #icon-houtui
  • 企业
    #icon-qiye
  • 正确
    #icon-zhengque
  • 添加
    #icon-tianjia
  • 评论
    #icon-pinglun
  • 箭头
    #icon-jiantou
  • 网络设置
    #icon-wangluoshezhi
  • 群组
    #icon-qunzu
  • zbds_沙漏
    #icon-shalou
  • 箭头
    #icon-jiantou1
  • 热点要闻
    #icon-redianyaowen
  • 语音
    #icon-yuyin
  • 收藏
    #icon-shoucang
  • 密码
    #icon-mima
  • table-dividingline
    #icon-tabledividingline
  • 分享
    #icon-fenxiang
  • 箭头
    #icon-jiantou2
  • 用户
    #icon-yonghu1
  • 模型
    #icon-moxing
  • 环境与资质
    #icon-huanjingyuzizhi
  • 04_个人
    #icon-04geren
  • 05_群组
    #icon-05qunzu
  • Open folder
    #icon-openfolder
  • 后退
    #icon-houtui1
  • 视频录制
    #icon-shipinluzhi
  • 语音
    #icon-yuyin-copy
  • 箱子
    #icon-xiangzi
  • 编辑
    #icon-bianji
  • 项目
    #icon-xiangmu
  • 视频
    #icon-shipin
  • 关注
    #icon-guanzhu
  • #icon-zan
  • 新闻
    #icon-xinwen
  • 我的
    #icon-wode-copy
  • 用户名
    #icon-yonghuming-copy
  • 语音
    #icon-yuyin-copy1
  • 地区
    #icon-diqu
  • 更多
    #icon-gengduo1
  • 应用中心
    #icon-yingyongzhongxin
  • 用户-圆
    #icon-yonghu-yuan
  • 用户
    #icon-yonghu
  • 网络系统
    #icon-wangluoxitong
  • IP
    #icon-IP
  • 登录
    #icon-denglu
  • 提醒
    #icon-tixing
  • 区域
    #icon-quyu
  • 通用
    #icon-tongyong
  • 网关
    #icon-wangguan1
  • 规章制度
    #icon-guizhangzhidu
  • 历史
    #icon-lishi
  • 重启
    #icon-zhongqi
  • 07配载、装车-线性
    #icon-peizaizhuangche-xianxing
  • 10仓库、仓储-线性
    #icon-cangkucangchu-xianxing
  • 11中转站-线性
    #icon-zhongzhuanzhan-xianxing
  • 12库存-线性
    #icon-kucun-xianxing
  • 13末端网点-线性
    #icon-moduanwangdian-xianxing
  • 17企业、园区、物业
    #icon-qiyeyuanquwuye
  • 17企业、园区、物业-线性
    #icon-qiyeyuanquwuye-xianxing
  • 36合作、关系-线性
    #icon-hezuoguanxi-xianxing
  • 36合作、关系
    #icon-hezuoguanxi
  • 37-服务-线性
    #icon--fuwu-xianxing
  • 37-服务
    #icon--fuwu
  • 音频
    #icon-yinpin
  • 沙漏
    #icon-shalou1
  • 新增
    #icon-xinzeng
  • 导入
    #icon-icon_daoru
  • 列表展示1
    #icon-liebiaozhanshi
  • 列表展示2
    #icon-liebiaozhanshi1
  • 交通运输表
    #icon-jiaotongyunshubiao-copy
  • max
    #icon-tubiaozhizuomoban
  • 复制
    #icon-fuzhi
  • 管理
    #icon-guanli
  • 流程
    #icon-liucheng
  • 需求
    #icon-xuqiu
  • 交通运输
    #icon-jiaotongyunshu
  • 模型
    #icon-moxing1
  • 编辑
    #icon-bianji1
  • 用车
    #icon-yongche
  • 可视化
    #icon-keshihua
  • 系统
    #icon-xitong
  • 安全
    #icon-anquan1
  • 现金
    #icon-xianjin
  • 重启
    #icon-zhongqi-
  • home
    #icon-home
  • 回收
    #icon-huishou
  • 暂无数据
    #icon-zanwushuju1
  • 差异性分析
    #icon-chayixingfenxi
  • 记事本
    #icon-jishiben
  • 系统
    #icon-xitong1
  • 提醒
    #icon-tixing1
  • 公文流转-收发工作-01
    #icon-gongwenliuzhuan-shoufagongzuo-
  • 云计算云平台
    #icon-iconsheji-
  • 公开年报
    #icon-gongkainianbao
  • 调试
    #icon-tiaoshi
  • 场景管理
    #icon-changjingguanli
  • 编辑
    #icon-bianji2
  • 关联设备
    #icon-guanlianshebei
  • 官方版本
    #icon-guanfangbanben
  • 功能定义
    #icon-gongnengdingyi
  • 基础管理
    #icon-jichuguanli
  • 技术服务
    #icon-jishufuwu
  • 合作伙伴密钥管理
    #icon-hezuohuobanmiyueguanli
  • 测试申请
    #icon-ceshishenqing
  • 节点管理
    #icon-jiedianguanli
  • 警告
    #icon-jinggao
  • 配网引导
    #icon-peiwangyindao
  • 人机交互
    #icon-renjijiaohu
  • 使用文档
    #icon-shiyongwendang
  • 权限审批
    #icon-quanxianshenpi
  • 已授权
    #icon-yishouquan
  • 提案审批
    #icon-tianshenpi
  • 数据看板
    #icon-shujukanban
  • 应用管理
    #icon-yingyongguanli
  • 仪表盘
    #icon-yibiaopan
  • 账号权限管理
    #icon-zhanghaoquanxianguanli
  • 园区运维
    #icon-yuanquyunwei
  • 基站管理
    #icon-jizhanguanli
  • 大数据支持
    #icon-kujialeqiyezhan_dashujuzhichi-
  • 复合接口
    #icon-fuhejiekou
  • menu-流转监控
    #icon-menu-liuzhuanjiankong
  • 关闭
    #icon-guanbi
  • 自定义
    #icon-zidingyi
  • 暂无数据
    #icon-zanwushuju2
  • 模型
    #icon-moxing2
  • 内存
    #icon-neicun
  • icon_loading
    #icon-icon_loading
  • icon_任务进程
    #icon-icon_renwujincheng
  • icon_入口
    #icon-icon_rukou
  • icon_疑问空心
    #icon-icon_yiwenkongxin
  • icon_发布
    #icon-icon_fabu
  • icon_添加
    #icon-icon_tianjia
  • icon_预览
    #icon-icon_yulan
  • icon_账号
    #icon-icon_zhanghao
  • icon_网页
    #icon-icon_wangye
  • icon_设置
    #icon-icon_shezhi
  • icon_保存
    #icon-icon_baocun
  • icon_应用管理
    #icon-icon_yingyongguanli
  • icon_使用文档
    #icon-icon_shiyongwendang
  • icon_帮助文档
    #icon-icon_bangzhuwendang
  • 农业驱虫
    #icon-nongyequchong
  • 表单组件-输入框
    #icon-biaodanzujian-shurukuang
  • 表单组件-表格
    #icon-biaodanzujian-biaoge
  • 表单组件-下拉框
    #icon-biaodanzujian-xialakuang
  • 图表-饼图
    #icon-tubiao-bingtu
  • 表单组件-按钮
    #icon-biaodanzujian-anniu
  • 工业组件-仪表盘
    #icon-gongyezujian-yibiaopan
  • 图表-卡片
    #icon-tubiao-qiapian
  • 工业组件-指示灯
    #icon-gongyezujian-zhishideng
  • 图表-折线图
    #icon-tubiao-zhexiantu
  • 形状-矩形
    #icon-xingzhuang-juxing
  • 形状-箭形
    #icon-xingzhuang-jianxing
  • 工业组件-开关
    #icon-gongyezujian-kaiguan
  • 图表-柱状图
    #icon-tubiao-zhuzhuangtu
  • 形状-图片
    #icon-xingzhuang-tupian
  • 形状-文字
    #icon-xingzhuang-wenzi
  • 形状-椭圆形
    #icon-xingzhuang-tuoyuanxing
  • 形状-三角形
    #icon-xingzhuang-sanjiaoxing
  • 形状-星形
    #icon-xingzhuang-xingxing
  • 会议
    #icon-huiyi
  • 咖啡
    #icon-kafei
  • 出差
    #icon-newchuchai
  • 需求
    #icon-xuqiu-hui
  • 规则
    #icon-guize
  • 设备管理
    #icon-shebeiguanli
  • 功能定义
    #icon-gongnengdingyi1
  • 现金
    #icon-xianjin1
  • 抵押要素变更
    #icon-diyayaosubiangeng
  • 技术服务
    #icon-jishufuwu1
  • 运营中心
    #icon-yunyingzhongxin
  • 运营管理
    #icon-yunyingguanli
  • 组织下辖
    #icon-zuzhixiaxia
  • 组织展开
    #icon-zuzhizhankai
  • 组织群组
    #icon-zuzhiqunzu
  • 转让
    #icon-zhuanrang
  • 打开
    #icon-dakai
  • 英文
    #icon-yingwen
  • 中文
    #icon-zhongwen
  • 密文
    #icon-miwen
  • 显号
    #icon-xianhao
  • 出差
    #icon-chucha
  • 空心对勾
    #icon-kongxinduigou
  • 回形针
    #icon-huixingzhen
  • 对勾
    #icon-duigou
  • 下一步
    #icon-xiayibu
  • 上一步
    #icon-shangyibu
  • 控件未选
    #icon-kongjianweixuan
  • 控件已选
    #icon-kongjianyixuan
  • 待办
    #icon-daiban
  • 0117- 电杆
    #icon--diangan
  • 0309融雪剂溶解池*
    #icon-rongxuejirongjiechi
  • 0215路边停车场*
    #icon-lubiantingchechang
  • 0213-路名牌
    #icon--lumingpai
  • 0407街头座椅
    #icon-jietouzuoyi
  • 0601-重大危险
    #icon--zhongdaweixian
  • 0209-交通标志牌
    #icon--jiaotongbiaozhipai
  • 0303公厕指示牌
    #icon-gongcezhishipai
  • 方块+
    #icon-fangkuai
  • 方块-
    #icon-fangkuai-
  • 刷新
    #icon-shuaxin
  • 保存
    #icon-baocun
  • 发布
    #icon-fabu
  • 下一步
    #icon-xiayibu1
  • 上一步
    #icon-shangyibu1
  • 模型
    #icon-moxing3
  • 向下占行
    #icon-xiangxiazhanhang
  • 向上占行
    #icon-xiangshangzhanhang
  • 图片加载失败
    #icon-tupianjiazaishibai
  • 服务地球
    #icon-fuwudiqiu
  • 缩小
    #icon-suoxiao
  • 放大
    #icon-fangda
  • 还原画布
    #icon-huanyuanhuabu
  • 全屏
    #icon-quanping
  • 表单组件-表格
    #icon-biaodanzujian-biaoge1
  • API输出
    #icon-APIshuchu
  • API接入
    #icon-APIjieru
  • 灯泡
    #icon-dengpao
  • 文件夹
    #icon-wenjianjia
  • DOC
    #icon-DOC
  • 未知格式
    #icon-weizhigeshi
  • 更多
    #icon-gengduo
  • 详情
    #icon-xiangqing
  • unkown
    #icon-unkown
  • 云端下载
    #icon-yunduanxiazai
  • 云端上传
    #icon-yunduanshangchuan
  • #icon-dian
  • #icon-mian
  • 线
    #icon-xian
  • 复制
    #icon-fuzhi3
  • 透视
    #icon-toushi
  • setting
    #icon-setting
  • 数据
    #icon-shuju
  • 数据采集
    #icon-zhongguohangtiantubiaoheji-weizhuanlunkuo-
  • 对比
    #icon-duibi
  • 设备状态
    #icon-shebeizhuangtai
  • 分组管理
    #icon-fenzuguanli
  • 快速编排
    #icon-kuaisubianpai
  • APP开发
    #icon-APPkaifa
  • 记事本
    #icon-jishiben1
  • 问题解答
    #icon-wentijieda
  • 客服
    #icon-kefu
  • 软件开发包
    #icon-ruanjiankaifabao
  • 会议
    #icon-huiyi1
  • 公文流转
    #icon-gongwenliuzhuan
  • 审批
    #icon-shenpi
  • htb-Arrow right02
    #icon-right
  • 编辑
    #icon-bianji4
  • 公务员
    #icon-gongwuyuan
  • 复制
    #icon-fuzhi1
  • 暂停
    #icon-zanting
  • 搜索变小
    #icon-sousuobianxiao
  • 搜索放大
    #icon-sousuofangda
  • 定位
    #icon-dingwei
  • 物模型
    #icon-wumoxing
  • 告警
    #icon-gaojing
  • 任务进程
    #icon-renwujincheng
  • 消息通知
    #icon-xiaoxitongzhi
  • 优惠
    #icon-youhui
  • 告警
    #icon-gaojing1
  • 执行反馈
    #icon-zhihangfankui
  • 工单确认
    #icon-gongdanqueren
  • 广播
    #icon-guangbo
  • 工单
    #icon-gongdan
  • 区域
    #icon-quyu1
  • 模型
    #icon-moxing4
  • stop
    #icon-stop
  • 电脑
    #icon-diannao
  • 地块
    #icon-dikuai
  • 消息
    #icon-xiaoxi
  • 信号
    #icon-xinhao
  • 蓝牙
    #icon-lanya
  • Wi-Fi
    #icon-Wi-Fi
  • icon-rgb_架构智能分析-35
    #icon-icon-rgb_jiagouzhinengfenxi-
  • icon-rgb_事件智能分析-32
    #icon-icon-rgb_shijianzhinengfenxi-
  • icon-rgb_指标智能分析-31
    #icon-icon-rgb_zhibiaozhinengfenxi-
  • 暂无数据
    #icon-zanwushuju
  • 查询
    #icon-chaxun
  • 电表
    #icon-dianbiao
  • 安全
    #icon-anquan
  • 待办事项
    #icon-daibanshixiang
  • 冰箱
    #icon-bingxiang
  • 反射
    #icon-fanshe
  • 风车
    #icon-fengche
  • 管道
    #icon-guandao
  • 规则
    #icon-guize1
  • 规则引擎
    #icon-guizeyinqing
  • 货物堆
    #icon-huowudui
  • 检测器
    #icon-jianceqi
  • 井盖
    #icon-jinggai
  • 流计算
    #icon-liujisuan
  • 函数
    #icon-hanshu
  • 连接流
    #icon-lianjieliu
  • 路灯
    #icon-ludeng
  • 摄像机
    #icon-shexiangji
  • 人体检测
    #icon-rentijiance
  • 魔术棒
    #icon-moshubang
  • 数据挖掘
    #icon-shujuwajue
  • 网关
    #icon-wangguan
  • 人脑
    #icon-shenjing
  • 储存
    #icon-chucun
  • AI
    #icon-wuguan
  • 云端刷新
    #icon-yunduanshuaxin
  • 运行
    #icon-yunhang
  • 路由器
    #icon-luyouqi
  • get
    #icon-get
  • PIR
    #icon-PIR
  • 折线图
    #icon-zhexiantu
  • 水表
    #icon-shuibiao
  • js
    #icon-js
  • 自行车
    #icon-zihangche
  • 列表
    #icon-liebiao
  • 汽车定位
    #icon-qichedingwei
  • 地磁
    #icon-dici
  • mysql
    #icon-mysql
  • 汽车
    #icon-qiche
  • 神经
    #icon-shenjing1
  • 同步
    #icon-tongbu
  • 城市
    #icon-chengshi
  • 门磁
    #icon-menci
  • 插座
    #icon-chazuo
  • 燃气监测器
    #icon-ranqijianceqi
  • 开关
    #icon-kaiguan
  • 插头
    #icon-chatou
  • 洗衣机
    #icon-xiyiji
  • 一键开关
    #icon-yijiankaiguan
  • 烟雾报警器
    #icon-yanwubaojingqi
  • 无线电波
    #icon-wuxiandianbo
  • 复制
    #icon-fuzhi2
  • 审计
    #icon-shenji
  • 出租
    #icon-chuzu
  • 图表
    #icon-data_icon9
  • 公开指南
    #icon-gongkaizhinan
  • 删除
    #icon-shanchu
  • i视频失效
    #icon-ishipinshixiao
  • iframe添加
    #icon-iframetianjia
  • 图片添加
    #icon-tupiantianjia
  • 出租
    #icon-chuzu1
  • 暂无数据 反馈图标-50
    #icon-zanwushujufankuitubiao-
  • 已办
    #icon-yiban
  • 区域
    #icon-quyu2
  • 分栏
    #icon-fenlan
  • 分割线
    #icon-fengexian
  • 点赞
    #icon-dianzan
  • 插入链接
    #icon-charulianjie
  • 取消链接
    #icon-quxiaolianjie
  • 无序排列
    #icon-wuxupailie
  • 居中对齐
    #icon-juzhongduiqi
  • 引用
    #icon-yinyong
  • 有序排列
    #icon-youxupailie
  • 右对齐
    #icon-youduiqi
  • 字体代码
    #icon-zitidaima
  • 笑脸
    #icon-xiaolian
  • 字体加粗
    #icon-zitijiacu
  • 字体删除线
    #icon-zitishanchuxian
  • 字体上标
    #icon-zitishangbiao
  • 字体标题
    #icon-zitibiaoti
  • 字体下划线
    #icon-zitixiahuaxian
  • 字体斜体
    #icon-zitixieti
  • 字体颜色
    #icon-zitiyanse
  • 左对齐
    #icon-zuoduiqi
  • 字体预览
    #icon-zitiyulan
  • 字体下标
    #icon-zitixiabiao
  • 左右对齐
    #icon-zuoyouduiqi
  • 编辑
    #icon-tianxie
  • 集成打包
    #icon-huowudui1
  • 硬件
    #icon-yingjian
  • 设备开发
    #icon-shebeikaifa
  • GIS
    #icon-GIS
  • 置换
    #icon-zhihuan
  • 托管
    #icon-tuoguan
  • 公开招标
    #icon-gongkaizhaobiao
  • 暂无数据
    #icon-zanwushuju3
  • 详情
    #icon-xiangqing1
  • 对勾
    #icon-duigoux
  • 关闭
    #icon-guanbi1
  • GIS
    #icon-GIS1
  • 爱心
    #icon-aixin
  • 摄像头_关闭
    #icon-shexiangtou_guanbi
  • 摄像头
    #icon-shexiangtou
  • 声音开
    #icon-shengyinkai
  • 收藏
    #icon-shoucang1
  • 声音无
    #icon-shengyinwu
  • 声音静音
    #icon-shengyinjingyin
  • 识别
    #icon-ziyuan
  • 文件-文件流转
    #icon-wj-wjlz
  • begin
    #icon-begin
  • 准备量产
    #icon-zhunbeiliangchan
  • 设备开发
    #icon-shebeikaifa1
  • 数据库
    #icon-shujuku
  • 地图 (1)
    #icon-ditu
  • 交通运输
    #icon-jiaotongyunshu1
  • Log file upload
    #icon-Logfileupload
  • 公开线索
    #icon-gongkaixiansuo
  • 地块
    #icon-dikuai1
  • 暂无数据
    #icon-zanwushuju4
  • 智能分析
    #icon-zhinengfenxi
  • 设置
    #icon-shezhi
  • 编辑
    #icon-bianji3
  • 记事本
    #icon-jishiben2
  • 警告
    #icon-jinggao1
  • 图表
    #icon-tubiao
  • 沙漏
    #icon-shalou2
  • 应用 触发
    #icon-yingyongchufa
  • 公务
    #icon-renwu
  • 空心问号
    #icon-kongxinwenhao
  • 错误空心
    #icon-cuowukongxin
  • 方块
    #icon-fangkuai1
  • 方块+
    #icon-fangkuai2
  • 空心对勾
    #icon-kongxinduigou1
  • 信息空心
    #icon-xinxikongxin
  • 控件
    #icon-kongjian
  • 告警空心
    #icon-gaojingkongxin
  • 暂无数据
    #icon-zanwushuju5
  • 探索
    #icon-tansuo
  • 记事本
    #icon-jishiben3
  • 暂无数据
    #icon-zanwushuju6
  • 新建任务
    #icon-xinjianrenwu
  • 抵押质押
    #icon-diyazhiya
  • audit
    #icon-audit
  • delete
    #icon-delete
  • file-add
    #icon-file-add
  • file-image
    #icon-file-image
  • file-exception
    #icon-file-exception
  • file-excel
    #icon-file-excel
  • file-word
    #icon-file-word
  • file-copy
    #icon-file-copy
  • file-zip
    #icon-file-zip
  • safetycertificate
    #icon-safetycertificate
  • book
    #icon-book
  • file-pdf
    #icon-file-pdf
  • file-text
    #icon-file-text
  • file-exclamation
    #icon-file-exclamation
  • file
    #icon-file
  • propertysafety
    #icon-propertysafety
  • filesearch
    #icon-filesearch
  • fileprotect
    #icon-fileprotect
  • filesync
    #icon-filesync
  • solution
    #icon-solution
  • eye
    #icon-eye
  • message
    #icon-message
  • play-circle
    #icon-play-circle
  • right-circle
    #icon-right-circle
  • reload
    #icon-reload
  • earth
    #icon-earth
  • question-circle
    #icon-question-circle
  • smile
    #icon-smile
  • redo
    #icon-redo
  • sync
    #icon-sync
  • setting
    #icon-setting1
  • reloadtime
    #icon-reloadtime
  • time-circle
    #icon-time-circle
  • warning-circle
    #icon-warning-circle
  • up-circle
    #icon-up-circle
  • undo
    #icon-undo
  • YUAN
    #icon-YUAN
  • timeout
    #icon-timeout
  • logout
    #icon-logout
  • poweroff
    #icon-poweroff
  • adduser
    #icon-adduser
  • appstore
    #icon-appstore
  • deleteteam
    #icon-deleteteam
  • edit-square
    #icon-edit-square
  • barchart
    #icon-barchart
  • deleteuser
    #icon-deleteuser
  • Import
    #icon-Import
  • location
    #icon-location
  • addteam
    #icon-addteam
  • minus-square
    #icon-minus-square
  • plus-square
    #icon-plus-square
  • linechart
    #icon-linechart
  • mobile
    #icon-mobile
  • sever
    #icon-sever
  • wallet
    #icon-wallet
  • save
    #icon-save
  • user
    #icon-user
  • project
    #icon-project
  • team
    #icon-team
  • export
    #icon-export
  • arrawsalt
    #icon-arrawsalt
  • attachment
    #icon-attachment
  • creditcard
    #icon-creditcard
  • edit
    #icon-edit
  • error
    #icon-error
  • image
    #icon-image
  • mail
    #icon-mail
  • key
    #icon-key
  • link
    #icon-link
  • sound
    #icon-sound
  • share
    #icon-share
  • heart
    #icon-heart
  • shrink
    #icon-shrink
  • verticalleft
    #icon-verticalleft
  • wrench
    #icon-wrench
  • verticalright
    #icon-verticalright
  • tag
    #icon-tag
  • wifi
    #icon-wifi
  • disconnect
    #icon-disconnect
  • close-circle
    #icon-close-circle
  • check-circle
    #icon-check-circle
  • down-circle
    #icon-down-circle
  • info-circle
    #icon-info-circle
  • plus-circle
    #icon-plus-circle
  • frown
    #icon-frown
  • left-circle
    #icon-left-circle
  • minus-circle
    #icon-minus-circle
  • calendar
    #icon-calendar
  • bell
    #icon-bell
  • cloud-upload
    #icon-cloud-upload
  • camera
    #icon-camera
  • cloud
    #icon-cloud
  • cloud-download
    #icon-cloud-download
  • folder-open
    #icon-folder-open
  • filter
    #icon-filter
  • folder-add
    #icon-folder-add
  • home
    #icon-home1
  • folder
    #icon-folder
  • like
    #icon-like
  • lock
    #icon-lock
  • shop
    #icon-shop
  • shopping
    #icon-shopping
  • video
    #icon-video
  • unlike
    #icon-unlike
  • printer
    #icon-printer
  • arrowright
    #icon-arrowright
  • arrowleft
    #icon-arrowleft
  • arrowup
    #icon-arrowup
  • audiostatic
    #icon-audiostatic
  • check
    #icon-check
  • close
    #icon-close
  • desktop
    #icon-desktop
  • audio
    #icon-audio
  • arrowdown
    #icon-arrowdown
  • download
    #icon-download
  • fire
    #icon-fire
  • indent
    #icon-indent
  • menu
    #icon-menu
  • sort-descending
    #icon-sort-descending
  • upload
    #icon-upload
  • outdent
    #icon-outdent
  • sort-ascending
    #icon-sort-ascending
  • search
    #icon-search1
  • 暂无数据
    #icon-zanwushuju7
  • 暂无数据
    #icon-zanwushuju8

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>