• 上下拖拽
    
  • 大于
    
  • 解锁
    
  • 横向对齐
    
  • 编辑
    
  • 打开文件
    
  • 关闭
    
  • 等于
    
  • 居中对齐
    
  • 更多
    
  • 下拉
    
  • 日期
    
  • 文件夹
    
  • 基础
    
  • 列表
    
  • 提示
    
  • 菜单
    
  • 放大
    
  • 减小
    
  • 更多-1
    
  • 勾选
    
  • 场景
    
  • 下对齐
    
  • 上对齐
    
  • 已添加
    
  • 权限
    
  • 聚焦开
    
  • 设置
    
  • 禁止
    
  • 显示
    
  • 平铺
    
  • 搜素
    
  • 关闭-1
    
  • 文件夹-1
    
  • 顶视图
    
  • 添加
    
  • 小于
    
  • 锁定
    
  • 页面
    
  • 文本
    
  • 告警
    
  • 竖向对齐
    
  • 右对齐
    
  • 左对齐
    
  • 透视图
    
  • 聚焦关
    
  • 刷新
    
  • 项目
    
  • 控制
    
  • 向右
    
  • 整理对齐
    
  • 循环
    
  • 未选择
    
  • 三维
    
  • 向左
    
  • 删除
    
  • 主页
    
  • 目标
    
  • 位置
    
  • 收起
    
  • 永久
    
  • 新建组
    
  • 组件
    
  • 隐藏
    
  • 图层
    
  • 锁定
    
  • 解锁
    
  • kongchangjing
    
  • 三条线
    
  • 16-线性-等比缩放
    
  • 告警数据
    
  • 地面
    
  • 居中对齐
    
  • 左右对齐
    
  • 打组
    
  • 解组
    
  • 底对齐
    
  • 垂直平均
    
  • 水平平均
    
  • 右对齐
    
  • 垂直居中对齐
    
  • 顶对齐
    
  • 水平居中对齐
    
  • 左对齐
    
  • 设置为默认标签
    
  • 背景颜色
    
  • 字体颜色
    
  • 方形未选中
    
  • 云上传
    
  • shangchuan-02
    
  • function-fill
    
  • list-check
    
  • list-check-2
    
  • 定位
    
  • 02
    
  • 全屏
    
  • 窗口最小化
    
  • 检索
    
  • 列表
    
  • 菜单盒子
    
  • lauout5
    
  • 新建分组
    
  • 形状-椭圆形
    
  • 24gl-square
    
  • 画圆_0
    
  • 竖线右
    
  • 速度3
    
  • 速度1
    
  • 速度2
    
  • 晴天
    
  • 夜晚
    
  • 阴天
    
  • 白天
    
  • 送风
    
  • 制热
    
  • 除湿
    
  • 制冷
    
  • 光强
    
  • 灯光
    
  • 箭头_列表向右
    
  • 箭头_列表收起
    
  • 箭头_列表向左
    
  • 箭头_列表展开
    
  • 分割线条
    
  • 箭头_页面_向上
    
  • 箭头_页面_向下
    
  • 箭头_页面_向右
    
  • 箭头_页面_向左
    
  • 水平分割
    
  • 垂直分割
    
  • defaultLayout
    
  • layout3
    
  • layout1
    
  • layout4
    
  • layout2
    
  • no-data
    
  • 复制
    
  • 断开连接
    
  • 连接
    
  • view_2d
    
  • view_3d
    
  • 对勾带边框
    
  • 错误提示
    
  • 设备
    
  • 网关
    
  • 返回主页
    
  • 返回主页
    
  • 映射
    
  • ic_zomm_out
    
  • ic_zoom_in
    
  • 屏幕高宽比
    
  • qrcode
    
  • text
    
  • 文件
    
  • checkbox-fill
    
  • checkbox-blank-fill
    
  • 立体
    
  • 展开
    
  • 收起
    
  • 添加
    
  • 下拉
    
  • 设置
    
  • 更多
    
  • 关闭
    
  • 返回
    
  • 排序
    
  • 提示
    
  • 搜索
    
  • 文件
    
  • 文件1
    
  • 处理器
    
  • 计时
    
  • 计时1
    
  • 降序
    
  • 升序
    
  • uf_file
    
  • 设置
    
  • 复制
    
  • 显示
    
  • 移除
    
  • 隐藏
    
  • 拖动
    
  • 画矩形
    
  • 直角形
    
  • 画斜线
    
  • 错误
    
  • 折线
    
  • 发布
    
  • 主题
    
  • 加号,收起,添加
    
  • 流计算
    
  • 数据挖掘
    
  • 24gl-portraitMaleInfo
    
  • 新手引导
    
  • API文档
    
  • 联系我们
    
  • 缩小
    
  • 全屏
    
  • 使用文档
    
  • 配置-快捷键
    
  • KINGFISHER
    
  • about us
    
  • about
    
  • 清空
    
  • 保存
    
  • 选中
    
  • 导出
    
  • 打开场景
    
  • 另存为
    
  • 导入
    
  • 项目
    
  • 场景
    
  • 箭头
    
  • 箭头
    
  • 导出 1
    
  • 导入
    
  • 钢笔
    
  • 信息-copy
    
  • 信息
    
  • 解组
    
  • 批量操作
    
  • 打组
    
  • 摄像机
    
  • 编辑
    
  • 地面
    
  • 圆形未选中
    
  • 单色圆点
    
  • 无效果
    
  • 选中
    
  • 编辑
    
  • 删除
    
  • 克隆
    
  • 更 多
    
  • 暂停
    
  • 中止
    
  • 刷新
    
  • arrow-down
    
  • arrow-right
    
  • bottom
    
  • close
    
  • direction-down
    
  • direction-right
    
  • direction-up
    
  • direction-left
    
  • share
    
  • select
    
  • add-bold
    
  • arrow-left-bold
    
  • arrow-up-bold
    
  • arrow-down-bold
    
  • arrow-right-bold
    
  • 下载
    
  • 叉子
    
  • icon_预览
    
  • Vector
    
  • Vector
    
  • Vector
    
  • Vector
    
  • 加号2-fill
    
  • Vector
    
  • Vector
    
  • Vector
    
  • Vector
    
  • 组 586
    
  • 组 586
    
  • 运行
    
  • 菜单
    
  • 下跌
    
  • 全部
    
  • search
    
  • 文件
    
  • kingfisherLOGO
    

Unicode 引用


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

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

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

Unicode 使用步骤如下:

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

@font-face {
  font-family: 'iconfont';
  src: url('iconfont.woff2?t=1718783040885') format('woff2'),
       url('iconfont.woff?t=1718783040885') format('woff'),
       url('iconfont.ttf?t=1718783040885') 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-shangxiatuozhuai1
  • 大于
    .icon-dayu
  • 解锁
    .icon-jiesuo1
  • 横向对齐
    .icon-hengxiangduiqi
  • 编辑
    .icon-bianji1
  • 打开文件
    .icon-dakaiwenjian
  • 关闭
    .icon-guanbi
  • 等于
    .icon-dengyu
  • 居中对齐
    .icon-juzhongduiqi1
  • 更多
    .icon-gengduo1
  • 下拉
    .icon-xiala
  • 日期
    .icon-riqi
  • 文件夹
    .icon-wenjianjia
  • 基础
    .icon-jichu
  • 列表
    .icon-liebiao
  • 提示
    .icon-tishi
  • 菜单
    .icon-caidan1
  • 放大
    .icon-fangda
  • 减小
    .icon-jianxiao
  • 更多-1
    .icon-gengduo-1
  • 勾选
    .icon-gouxuan
  • 场景
    .icon-changjing1
  • 下对齐
    .icon-xiaduiqi
  • 上对齐
    .icon-shangduiqi
  • 已添加
    .icon-yitianjia
  • 权限
    .icon-quanxian
  • 聚焦开
    .icon-jujiaokai
  • 设置
    .icon-shezhi1
  • 禁止
    .icon-jinzhi
  • 显示
    .icon-xianshi1
  • 平铺
    .icon-pingpu
  • 搜素
    .icon-sousu
  • 关闭-1
    .icon-guanbi-1
  • 文件夹-1
    .icon-wenjianjia-1
  • 顶视图
    .icon-dingshitu
  • 添加
    .icon-tianjia
  • 小于
    .icon-xiaoyu
  • 锁定
    .icon-suoding1
  • 页面
    .icon-yemian
  • 文本
    .icon-wenben
  • 告警
    .icon-gaojing
  • 竖向对齐
    .icon-shuxiangduiqi
  • 右对齐
    .icon-youduiqi
  • 左对齐
    .icon-zuoduiqi
  • 透视图
    .icon-toushitu
  • 聚焦关
    .icon-jujiaoguan
  • 刷新
    .icon-shuaxin1
  • 项目
    .icon-xiangmu1
  • 控制
    .icon-kongzhi
  • 向右
    .icon-xiangyou
  • 整理对齐
    .icon-zhengliduiqi
  • 循环
    .icon-xunhuan
  • 未选择
    .icon-weixuanze
  • 三维
    .icon-sanwei
  • 向左
    .icon-xiangzuo
  • 删除
    .icon-shanchu1
  • 主页
    .icon-zhuye
  • 目标
    .icon-mubiao
  • 位置
    .icon-weizhi
  • 收起
    .icon-shouqi
  • 永久
    .icon-yongjiu
  • 新建组
    .icon-xinjianzu
  • 组件
    .icon-zujian
  • 隐藏
    .icon-yincang1
  • 图层
    .icon-tuceng
  • 锁定
    .icon-suoding
  • 解锁
    .icon-jiesuo
  • kongchangjing
    .icon-kongchangjing
  • 三条线
    .icon-santiaoxian
  • 16-线性-等比缩放
    .icon-dengbisuofang
  • 告警数据
    .icon-ziyuanxhdpi
  • 地面
    .icon-dimian1
  • 居中对齐
    .icon-juzhongduiqi
  • 左右对齐
    .icon-zuoyouduiqi
  • 打组
    .icon-dazu1
  • 解组
    .icon-jiezu1
  • 底对齐
    .icon-diduiqi2
  • 垂直平均
    .icon-chuizhipingjun
  • 水平平均
    .icon-shuipingpingjun
  • 右对齐
    .icon-youduiqi2
  • 垂直居中对齐
    .icon-chuizhijuzhongduiqi
  • 顶对齐
    .icon-dingduiqi2
  • 水平居中对齐
    .icon-shuipingjuzhongduiqi1
  • 左对齐
    .icon-zuoduiqi2
  • 设置为默认标签
    .icon-shezhiweimorenbiaoqian
  • 背景颜色
    .icon-beijingyanse
  • 字体颜色
    .icon-zitiyanse
  • 方形未选中
    .icon-fangxingweixuanzhong
  • 云上传
    .icon-yunshangchuan
  • shangchuan-02
    .icon-shangchuan-
  • function-fill
    .icon-function-fill
  • list-check
    .icon-list-check
  • list-check-2
    .icon-list-check-2
  • 定位
    .icon-dingwei
  • 02
    .icon-a-02
  • 全屏
    .icon-quanping1
  • 窗口最小化
    .icon-CZ_027
  • 检索
    .icon-jiansuo
  • 列表
    .icon-liebiao1
  • 菜单盒子
    .icon-caidanhezi
  • lauout5
    .icon-lauout5
  • 新建分组
    .icon-xinjianfenzu
  • 形状-椭圆形
    .icon-xingzhuang-tuoyuanxing
  • 24gl-square
    .icon-24gl-square
  • 画圆_0
    .icon-huayuan_0
  • 竖线右
    .icon-shuxianyou
  • 速度3
    .icon-sudu3
  • 速度1
    .icon-sudu1
  • 速度2
    .icon-sudu2
  • 晴天
    .icon-qingtian
  • 夜晚
    .icon-yewan
  • 阴天
    .icon-yintian
  • 白天
    .icon-baitian
  • 送风
    .icon-songfeng
  • 制热
    .icon-zhire
  • 除湿
    .icon-chushi
  • 制冷
    .icon-zhileng
  • 光强
    .icon-guangqiang
  • 灯光
    .icon-ai251
  • 箭头_列表向右
    .icon-jiantou_liebiaoxiangyou
  • 箭头_列表收起
    .icon-jiantou_liebiaoshouqi
  • 箭头_列表向左
    .icon-jiantou_liebiaoxiangzuo
  • 箭头_列表展开
    .icon-jiantou_liebiaozhankai
  • 分割线条
    .icon-fengexiantiao
  • 箭头_页面_向上
    .icon-jiantou_yemian_xiangshang
  • 箭头_页面_向下
    .icon-jiantou_yemian_xiangxia
  • 箭头_页面_向右
    .icon-jiantou_yemian_xiangyou
  • 箭头_页面_向左
    .icon-jiantou_yemian_xiangzuo
  • 水平分割
    .icon-shuipingfenge
  • 垂直分割
    .icon-chuizhifenge
  • defaultLayout
    .icon-defaultLayout
  • layout3
    .icon-layout3
  • layout1
    .icon-layout1
  • layout4
    .icon-layout4
  • layout2
    .icon-layout2
  • no-data
    .icon-no-data
  • 复制
    .icon-fuzhi1
  • 断开连接
    .icon-duankailianjie
  • 连接
    .icon-lianjie
  • view_2d
    .icon-view_d
  • view_3d
    .icon-view_d1
  • 对勾带边框
    .icon-duigoudaibiankuang
  • 错误提示
    .icon-cuowutishi
  • 设备
    .icon-shebei
  • 网关
    .icon-wangguan
  • 返回主页
    .icon-fanhuizhuye
  • 返回主页
    .icon-fanhuizhuye1
  • 映射
    .icon-yingshe
  • ic_zomm_out
    .icon-iczommout
  • ic_zoom_in
    .icon-iczoomout
  • 屏幕高宽比
    .icon-pingmugaokuanbi
  • qrcode
    .icon-qrcode
  • text
    .icon-text
  • 文件
    .icon-wenjian2
  • checkbox-fill
    .icon-checkbox-fill
  • checkbox-blank-fill
    .icon-checkbox-blank-fill
  • 立体
    .icon-liti
  • 展开
    .icon-checkbox-indeterminate-fill
  • 收起
    .icon-add-box-fill
  • 添加
    .icon-add-fill
  • 下拉
    .icon-arrow-down-s-fill
  • 设置
    .icon-settings-fill
  • 更多
    .icon-more-fill
  • 关闭
    .icon-close-fill
  • 返回
    .icon-arrow-left-line
  • 排序
    .icon-arrow-up-down-line
  • 提示
    .icon-spam-2-line
  • 搜索
    .icon-search-line
  • 文件
    .icon-folder-2-fill
  • 文件1
    .icon-wenjian1
  • 处理器
    .icon-chuliqi
  • 计时
    .icon-jishi
  • 计时1
    .icon-jishi1
  • 降序
    .icon-jiangxu
  • 升序
    .icon-shengxu
  • uf_file
    .icon-uf_file
  • 设置
    .icon-shezhi
  • 复制
    .icon-fuzhi
  • 显示
    .icon-xianshi
  • 移除
    .icon-yichu
  • 隐藏
    .icon-yincang
  • 拖动
    .icon-tuodong
  • 画矩形
    .icon-huajuxing
  • 直角形
    .icon-zhijiaoxing
  • 画斜线
    .icon-huaxiexian
  • 错误
    .icon-cuowu
  • 折线
    .icon-zhexian
  • 发布
    .icon-fabu
  • 主题
    .icon-zhuti
  • 加号,收起,添加
    .icon-checkbox-plus-full
  • 流计算
    .icon-liujisuan
  • 数据挖掘
    .icon-shujuwajue
  • 24gl-portraitMaleInfo
    .icon-gs_user
  • 新手引导
    .icon-xinshouyindao
  • API文档
    .icon-APIwendang
  • 联系我们
    .icon-lianxiwomen
  • 缩小
    .icon-suoxiao
  • 全屏
    .icon-quanping
  • 使用文档
    .icon-shiyongwendang
  • 配置-快捷键
    .icon-peizhi-kuaijiejian
  • KINGFISHER
    .icon-Vector12
  • about us
    .icon-aboutus
  • about
    .icon-about
  • 清空
    .icon-qingkong
  • 保存
    .icon-baocun
  • 选中
    .icon-xuanzhong
  • 导出
    .icon-daochu1
  • 打开场景
    .icon-dakaichangjing
  • 另存为
    .icon-lingcunwei
  • 导入
    .icon-daoru1
  • 项目
    .icon-xiangmu
  • 场景
    .icon-changjing
  • 箭头
    .icon-jiantou9-copy
  • 箭头
    .icon-jiantou9-copy-copy
  • 导出 1
    .icon-daochu
  • 导入
    .icon-daoru
  • 钢笔
    .icon-gangbi
  • 信息-copy
    .icon-warning-copy
  • 信息
    .icon-xinxi
  • 解组
    .icon-jiezu
  • 批量操作
    .icon-batch
  • 打组
    .icon-dazu
  • 摄像机
    .icon-video
  • 编辑
    .icon-bian-ji
  • 地面
    .icon-dimian
  • 圆形未选中
    .icon-yuanxingweixuanzhong
  • 单色圆点
    .icon-danseyuandian
  • 无效果
    .icon-wuxiaoguo
  • 选中
    .icon-selected-copy
  • 编辑
    .icon-bianji
  • 删除
    .icon-shanchu
  • 克隆
    .icon-kelong
  • 更 多
    .icon-gengduo
  • 暂停
    .icon-zanting
  • 中止
    .icon-lianxi2hebing-15
  • 刷新
    .icon-shuaxin
  • arrow-down
    .icon-arrow-down-kf
  • arrow-right
    .icon-arrow-right
  • bottom
    .icon-bottom
  • close
    .icon-close
  • direction-down
    .icon-direction-down
  • direction-right
    .icon-direction-right
  • direction-up
    .icon-direction-up
  • direction-left
    .icon-direction-left
  • share
    .icon-share
  • select
    .icon-select
  • add-bold
    .icon-add-bold
  • arrow-left-bold
    .icon-arrow-left-bold
  • arrow-up-bold
    .icon-arrow-up-bold
  • arrow-down-bold
    .icon-arrow-down-bold
  • arrow-right-bold
    .icon-arrow-right-bold
  • 下载
    .icon-xiazai1
  • 叉子
    .icon-chazi
  • icon_预览
    .icon-icon_yulan
  • Vector
    .icon-Vector5
  • Vector
    .icon-Vector6
  • Vector
    .icon-Vector7
  • Vector
    .icon-Vector4
  • 加号2-fill
    .icon-jiahao2fill
  • Vector
    .icon-Vector2
  • Vector
    .icon-Vector3
  • Vector
    .icon-Vector1
  • Vector
    .icon-Vector
  • 组 586
    .icon-a-zu586
  • 组 586
    .icon-a-zu5861
  • 运行
    .icon-yunhang
  • 菜单
    .icon-caidan
  • 下跌
    .icon-xiadie2
  • 全部
    .icon-quanbu
  • search
    .icon-search
  • 文件
    .icon-wenjian
  • kingfisherLOGO
    .icon-kingfisherLOGO-copy

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-shangxiatuozhuai1
  • 大于
    #icon-dayu
  • 解锁
    #icon-jiesuo1
  • 横向对齐
    #icon-hengxiangduiqi
  • 编辑
    #icon-bianji1
  • 打开文件
    #icon-dakaiwenjian
  • 关闭
    #icon-guanbi
  • 等于
    #icon-dengyu
  • 居中对齐
    #icon-juzhongduiqi1
  • 更多
    #icon-gengduo1
  • 下拉
    #icon-xiala
  • 日期
    #icon-riqi
  • 文件夹
    #icon-wenjianjia
  • 基础
    #icon-jichu
  • 列表
    #icon-liebiao
  • 提示
    #icon-tishi
  • 菜单
    #icon-caidan1
  • 放大
    #icon-fangda
  • 减小
    #icon-jianxiao
  • 更多-1
    #icon-gengduo-1
  • 勾选
    #icon-gouxuan
  • 场景
    #icon-changjing1
  • 下对齐
    #icon-xiaduiqi
  • 上对齐
    #icon-shangduiqi
  • 已添加
    #icon-yitianjia
  • 权限
    #icon-quanxian
  • 聚焦开
    #icon-jujiaokai
  • 设置
    #icon-shezhi1
  • 禁止
    #icon-jinzhi
  • 显示
    #icon-xianshi1
  • 平铺
    #icon-pingpu
  • 搜素
    #icon-sousu
  • 关闭-1
    #icon-guanbi-1
  • 文件夹-1
    #icon-wenjianjia-1
  • 顶视图
    #icon-dingshitu
  • 添加
    #icon-tianjia
  • 小于
    #icon-xiaoyu
  • 锁定
    #icon-suoding1
  • 页面
    #icon-yemian
  • 文本
    #icon-wenben
  • 告警
    #icon-gaojing
  • 竖向对齐
    #icon-shuxiangduiqi
  • 右对齐
    #icon-youduiqi
  • 左对齐
    #icon-zuoduiqi
  • 透视图
    #icon-toushitu
  • 聚焦关
    #icon-jujiaoguan
  • 刷新
    #icon-shuaxin1
  • 项目
    #icon-xiangmu1
  • 控制
    #icon-kongzhi
  • 向右
    #icon-xiangyou
  • 整理对齐
    #icon-zhengliduiqi
  • 循环
    #icon-xunhuan
  • 未选择
    #icon-weixuanze
  • 三维
    #icon-sanwei
  • 向左
    #icon-xiangzuo
  • 删除
    #icon-shanchu1
  • 主页
    #icon-zhuye
  • 目标
    #icon-mubiao
  • 位置
    #icon-weizhi
  • 收起
    #icon-shouqi
  • 永久
    #icon-yongjiu
  • 新建组
    #icon-xinjianzu
  • 组件
    #icon-zujian
  • 隐藏
    #icon-yincang1
  • 图层
    #icon-tuceng
  • 锁定
    #icon-suoding
  • 解锁
    #icon-jiesuo
  • kongchangjing
    #icon-kongchangjing
  • 三条线
    #icon-santiaoxian
  • 16-线性-等比缩放
    #icon-dengbisuofang
  • 告警数据
    #icon-ziyuanxhdpi
  • 地面
    #icon-dimian1
  • 居中对齐
    #icon-juzhongduiqi
  • 左右对齐
    #icon-zuoyouduiqi
  • 打组
    #icon-dazu1
  • 解组
    #icon-jiezu1
  • 底对齐
    #icon-diduiqi2
  • 垂直平均
    #icon-chuizhipingjun
  • 水平平均
    #icon-shuipingpingjun
  • 右对齐
    #icon-youduiqi2
  • 垂直居中对齐
    #icon-chuizhijuzhongduiqi
  • 顶对齐
    #icon-dingduiqi2
  • 水平居中对齐
    #icon-shuipingjuzhongduiqi1
  • 左对齐
    #icon-zuoduiqi2
  • 设置为默认标签
    #icon-shezhiweimorenbiaoqian
  • 背景颜色
    #icon-beijingyanse
  • 字体颜色
    #icon-zitiyanse
  • 方形未选中
    #icon-fangxingweixuanzhong
  • 云上传
    #icon-yunshangchuan
  • shangchuan-02
    #icon-shangchuan-
  • function-fill
    #icon-function-fill
  • list-check
    #icon-list-check
  • list-check-2
    #icon-list-check-2
  • 定位
    #icon-dingwei
  • 02
    #icon-a-02
  • 全屏
    #icon-quanping1
  • 窗口最小化
    #icon-CZ_027
  • 检索
    #icon-jiansuo
  • 列表
    #icon-liebiao1
  • 菜单盒子
    #icon-caidanhezi
  • lauout5
    #icon-lauout5
  • 新建分组
    #icon-xinjianfenzu
  • 形状-椭圆形
    #icon-xingzhuang-tuoyuanxing
  • 24gl-square
    #icon-24gl-square
  • 画圆_0
    #icon-huayuan_0
  • 竖线右
    #icon-shuxianyou
  • 速度3
    #icon-sudu3
  • 速度1
    #icon-sudu1
  • 速度2
    #icon-sudu2
  • 晴天
    #icon-qingtian
  • 夜晚
    #icon-yewan
  • 阴天
    #icon-yintian
  • 白天
    #icon-baitian
  • 送风
    #icon-songfeng
  • 制热
    #icon-zhire
  • 除湿
    #icon-chushi
  • 制冷
    #icon-zhileng
  • 光强
    #icon-guangqiang
  • 灯光
    #icon-ai251
  • 箭头_列表向右
    #icon-jiantou_liebiaoxiangyou
  • 箭头_列表收起
    #icon-jiantou_liebiaoshouqi
  • 箭头_列表向左
    #icon-jiantou_liebiaoxiangzuo
  • 箭头_列表展开
    #icon-jiantou_liebiaozhankai
  • 分割线条
    #icon-fengexiantiao
  • 箭头_页面_向上
    #icon-jiantou_yemian_xiangshang
  • 箭头_页面_向下
    #icon-jiantou_yemian_xiangxia
  • 箭头_页面_向右
    #icon-jiantou_yemian_xiangyou
  • 箭头_页面_向左
    #icon-jiantou_yemian_xiangzuo
  • 水平分割
    #icon-shuipingfenge
  • 垂直分割
    #icon-chuizhifenge
  • defaultLayout
    #icon-defaultLayout
  • layout3
    #icon-layout3
  • layout1
    #icon-layout1
  • layout4
    #icon-layout4
  • layout2
    #icon-layout2
  • no-data
    #icon-no-data
  • 复制
    #icon-fuzhi1
  • 断开连接
    #icon-duankailianjie
  • 连接
    #icon-lianjie
  • view_2d
    #icon-view_d
  • view_3d
    #icon-view_d1
  • 对勾带边框
    #icon-duigoudaibiankuang
  • 错误提示
    #icon-cuowutishi
  • 设备
    #icon-shebei
  • 网关
    #icon-wangguan
  • 返回主页
    #icon-fanhuizhuye
  • 返回主页
    #icon-fanhuizhuye1
  • 映射
    #icon-yingshe
  • ic_zomm_out
    #icon-iczommout
  • ic_zoom_in
    #icon-iczoomout
  • 屏幕高宽比
    #icon-pingmugaokuanbi
  • qrcode
    #icon-qrcode
  • text
    #icon-text
  • 文件
    #icon-wenjian2
  • checkbox-fill
    #icon-checkbox-fill
  • checkbox-blank-fill
    #icon-checkbox-blank-fill
  • 立体
    #icon-liti
  • 展开
    #icon-checkbox-indeterminate-fill
  • 收起
    #icon-add-box-fill
  • 添加
    #icon-add-fill
  • 下拉
    #icon-arrow-down-s-fill
  • 设置
    #icon-settings-fill
  • 更多
    #icon-more-fill
  • 关闭
    #icon-close-fill
  • 返回
    #icon-arrow-left-line
  • 排序
    #icon-arrow-up-down-line
  • 提示
    #icon-spam-2-line
  • 搜索
    #icon-search-line
  • 文件
    #icon-folder-2-fill
  • 文件1
    #icon-wenjian1
  • 处理器
    #icon-chuliqi
  • 计时
    #icon-jishi
  • 计时1
    #icon-jishi1
  • 降序
    #icon-jiangxu
  • 升序
    #icon-shengxu
  • uf_file
    #icon-uf_file
  • 设置
    #icon-shezhi
  • 复制
    #icon-fuzhi
  • 显示
    #icon-xianshi
  • 移除
    #icon-yichu
  • 隐藏
    #icon-yincang
  • 拖动
    #icon-tuodong
  • 画矩形
    #icon-huajuxing
  • 直角形
    #icon-zhijiaoxing
  • 画斜线
    #icon-huaxiexian
  • 错误
    #icon-cuowu
  • 折线
    #icon-zhexian
  • 发布
    #icon-fabu
  • 主题
    #icon-zhuti
  • 加号,收起,添加
    #icon-checkbox-plus-full
  • 流计算
    #icon-liujisuan
  • 数据挖掘
    #icon-shujuwajue
  • 24gl-portraitMaleInfo
    #icon-gs_user
  • 新手引导
    #icon-xinshouyindao
  • API文档
    #icon-APIwendang
  • 联系我们
    #icon-lianxiwomen
  • 缩小
    #icon-suoxiao
  • 全屏
    #icon-quanping
  • 使用文档
    #icon-shiyongwendang
  • 配置-快捷键
    #icon-peizhi-kuaijiejian
  • KINGFISHER
    #icon-Vector12
  • about us
    #icon-aboutus
  • about
    #icon-about
  • 清空
    #icon-qingkong
  • 保存
    #icon-baocun
  • 选中
    #icon-xuanzhong
  • 导出
    #icon-daochu1
  • 打开场景
    #icon-dakaichangjing
  • 另存为
    #icon-lingcunwei
  • 导入
    #icon-daoru1
  • 项目
    #icon-xiangmu
  • 场景
    #icon-changjing
  • 箭头
    #icon-jiantou9-copy
  • 箭头
    #icon-jiantou9-copy-copy
  • 导出 1
    #icon-daochu
  • 导入
    #icon-daoru
  • 钢笔
    #icon-gangbi
  • 信息-copy
    #icon-warning-copy
  • 信息
    #icon-xinxi
  • 解组
    #icon-jiezu
  • 批量操作
    #icon-batch
  • 打组
    #icon-dazu
  • 摄像机
    #icon-video
  • 编辑
    #icon-bian-ji
  • 地面
    #icon-dimian
  • 圆形未选中
    #icon-yuanxingweixuanzhong
  • 单色圆点
    #icon-danseyuandian
  • 无效果
    #icon-wuxiaoguo
  • 选中
    #icon-selected-copy
  • 编辑
    #icon-bianji
  • 删除
    #icon-shanchu
  • 克隆
    #icon-kelong
  • 更 多
    #icon-gengduo
  • 暂停
    #icon-zanting
  • 中止
    #icon-lianxi2hebing-15
  • 刷新
    #icon-shuaxin
  • arrow-down
    #icon-arrow-down-kf
  • arrow-right
    #icon-arrow-right
  • bottom
    #icon-bottom
  • close
    #icon-close
  • direction-down
    #icon-direction-down
  • direction-right
    #icon-direction-right
  • direction-up
    #icon-direction-up
  • direction-left
    #icon-direction-left
  • share
    #icon-share
  • select
    #icon-select
  • add-bold
    #icon-add-bold
  • arrow-left-bold
    #icon-arrow-left-bold
  • arrow-up-bold
    #icon-arrow-up-bold
  • arrow-down-bold
    #icon-arrow-down-bold
  • arrow-right-bold
    #icon-arrow-right-bold
  • 下载
    #icon-xiazai1
  • 叉子
    #icon-chazi
  • icon_预览
    #icon-icon_yulan
  • Vector
    #icon-Vector5
  • Vector
    #icon-Vector6
  • Vector
    #icon-Vector7
  • Vector
    #icon-Vector4
  • 加号2-fill
    #icon-jiahao2fill
  • Vector
    #icon-Vector2
  • Vector
    #icon-Vector3
  • Vector
    #icon-Vector1
  • Vector
    #icon-Vector
  • 组 586
    #icon-a-zu586
  • 组 586
    #icon-a-zu5861
  • 运行
    #icon-yunhang
  • 菜单
    #icon-caidan
  • 下跌
    #icon-xiadie2
  • 全部
    #icon-quanbu
  • search
    #icon-search
  • 文件
    #icon-wenjian
  • kingfisherLOGO
    #icon-kingfisherLOGO-copy

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>