• quxiaoquanping 1
    
  • 二维码
    
  • 手机
    
  • 切换横屏
    
  • 用户人数刷新
    
  • 分享
    
  • icon 注意
    
  • 姓名排序A-Z
    
  • 姓名排序Z-A
    
  • 属性分析
    
  • 放大镜
    
  • 缩小
    
  • 关系图
    
  • 表格模式
    
  • 提交
    
  • 更多
    
  • 文件夹
    
  • 拖拽
    
  • 圈选
    
  • 上方添加
    
  • 下方添加
    
  • 版本
    
  • quanping 1
    
  • 鸿蒙
    
  • 帮助中心
    
  • 历史记录
    
  • 小屏幕展示
    
  • 新建话题
    
  • 时间
    
  • 日历
    
  • 日历-2
    
  • 其他
    
  • 结束
    
  • 消息通知
    
  • 审批
    
  • js 2
    
  • 微信小程序
    
  • ios
    
  • android2
    
  • 服务器
    
  • 菜单-用户营销
    
  • 菜单-理财业务分析
    
  • 菜单-信用卡业务
    
  • 菜单-信用卡分期
    
  • LTV 分析
    
  • 导航二级箭头
    
  • 导航一级箭头收起
    
  • 角色交换
    
  • 导航一级箭头展开
    
  • 菜单-存款业务分析
    
  • 埋点
    
  • 分析方法论
    
  • 文档说明
    
  • 帮助
    
  • 双右箭头
    
  • 双左箭头
    
  • 产品迭代
    
  • 用户分群
    
  • 菜单-CEP
    
  • 菜单-数据看板(BI)
    
  • 菜单-数据质量
    
  • 数据看板
    
  • 业务数据
    
  • 埋点数据
    
  • 标签数据
    
  • 管理
    
  • 用户
    
  • 整体
    
  • 菜单-标签管理体系
    
  • 菜单-标签数据导入
    
  • 菜单-标签数据输出
    
  • 序号6
    
  • 序号2
    
  • 序号5
    
  • 序号1
    
  • 序号4
    
  • 序号3
    
  • html5
    
  • ios
    
  • android
    
  • 菜单-用户分群
    
  • 菜单-BI
    
  • 菜单-信用贷款分析
    
  • 菜单-智能营销(CXP)
    
  • 菜单-用户
    
  • 菜单-常用分析场景
    
  • 菜单-用户体验监控
    
  • 菜单-业务场景
    
  • 菜单-用户标签
    
  • 菜单-产品标签
    
  • 菜单-营销数据分析
    
  • 异常通知
    
  • 任务管理
    
  • 数据接入
    
  • SQL脚本
    
  • 计算列
    
  • 数据清洗
    
  • 拆分列
    
  • 合并列
    
  • 异常通知
    
  • 任务管理
    
  • Session
    
  • 收起
    
  • 添加
    
  • 盒须图
    
  • 全屏展示
    
  • 流向图
    
  • 旭日图
    
  • 桑基图
    
  • 树形图
    
  • 全屏收起
    
  • 对勾
    
  • datav
    
  • 共享
    
  • 导航箭头
    
  • 放大
    
  • 创建
    
  • 转发
    
  • 缩小
    
  • 漏斗
    
  • 折线图
    
  • 箭头上
    
  • 箭头下
    
  • 箭头右上
    
  • 标签
    
  • 箭头左上
    
  • 
  • 
  • 
  • 编辑-填充
    
  • 筛选 2
    
  • 归因
    
  • 筛选
    
  • 清除
    
  • 数据去重
    
  • 替换缺失值
    
  • 播放
    
  • 方向上
    
  • 暂停
    
  • 音量
    
  • 方向下
    
  • 链接
    
  • 眼睛 开
    
  • 展开
    
  • 收起
    
  • 工具-刷新
    
  • 菜单-设置
    
  • 菜单-退出
    
  • 复制
    
  • 移动到
    
  • 搜索
    
  • 提示
    
  • funnel-mark
    
  • emoji-非常不满意
    
  • emoji-不满意
    
  • emoji-一般
    
  • emoji-满意
    
  • emoji-非常满意
    
  • 表情
    
  • 清理
    
  • 填充颜色
    
  • 提示
    
  • 移动
    
  • 导出
    
  • 添加
    
  • 埋点管理
    
  • 埋点方案管理
    
  • 收藏-空
    
  • 排序
    
  • 下载
    
  • 复制
    
  • 字符串
    
  • 日期
    
  • 数值
    
  • 删除桶
    
  • 删除
    
  • 重新加载
    
  • 调整大小-左右
    
  • 调整大小-上下
    
  • 更多操作
    
  • 数据集业务
    
  • 重命名
    
  • 编辑
    
  • 输出
    
  • 数据拆分
    
  • 聚合
    
  • 列转列
    
  • 行转列
    
  • 字段设置
    
  • 连接
    
  • 合并
    
  • 收藏
    
  • 展开
    
  • 标签分类
    
  • 标签总览
    
  • 删除
    
  • 错误
    
  • 显示列
    
  • 返回icon
    
  • 提示icon
    
  • 饼图
    
  • 显示
    
  • 导出
    
  • 生成
    
  • 分数
    
  • 汇总图
    
  • 趋势图
    
  • 地图
    
  • 表格
    
  • 报告
    
  • 编辑
    
  • 删除
    
  • 时间
    
  • 展开
    
  • 折叠
    
  • 更多操作
    
  • 向下
    
  • 添加
    
  • 触发环境
    
  • 用户属性
    
  • 事件属性
    
  • Property 1=默认
    
  • Property 1=选中
    
  • 输入框_返回
    
  • check_filled
    

Unicode 引用


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

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

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

Unicode 使用步骤如下:

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

@font-face {
  font-family: 'bsicon';
  src: url('iconfont.woff2?t=1752487922819') format('woff2'),
       url('iconfont.woff?t=1752487922819') format('woff'),
       url('iconfont.ttf?t=1752487922819') format('truetype');
}

第二步:定义使用 iconfont 的样式

.bsicon {
  font-family: "bsicon" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

第三步:挑选相应图标并获取字体编码,应用于页面

<span class="bsicon">&#x33;</span>

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

  • quxiaoquanping 1
    .a-quxiaoquanping1
  • 二维码
    .erweima
  • 手机
    .shouji
  • 切换横屏
    .qiehuanhengping
  • 用户人数刷新
    .yonghurenshushuaxin
  • 分享
    .fenxiang
  • icon 注意
    .a-iconzhuyi
  • 姓名排序A-Z
    .xingmingpaixuA-Z
  • 姓名排序Z-A
    .xingmingpaixuZ-A
  • 属性分析
    .shuxingfenxi
  • 放大镜
    .fangdajing
  • 缩小
    .suoxiao1
  • 关系图
    .a-node-tree2
  • 表格模式
    .a-table-view1
  • 提交
    .tijiao
  • 更多
    .gengduo
  • 文件夹
    .wenjianjia
  • 拖拽
    .tuozhuai
  • 圈选
    .quanxuan
  • 上方添加
    .shangfangtianjia
  • 下方添加
    .xiafangtianjia
  • 版本
    .chanpindiedai1
  • quanping 1
    .a-quanping1
  • 鸿蒙
    .hongmeng
  • 帮助中心
    .bangzhuzhongxin
  • 历史记录
    .lishijilu
  • 小屏幕展示
    .xiaopingmuzhanshi
  • 新建话题
    .xinjianhuati
  • 时间
    .shijian
  • 日历
    .rili
  • 日历-2
    .rili-2
  • 其他
    .qita
  • 结束
    .jieshu
  • 消息通知
    .xiaoxitongzhi
  • 审批
    .shenpi
  • js 2
    .a-js2
  • 微信小程序
    .weixinxiaochengxu
  • ios
    .ios1
  • android2
    .android1
  • 服务器
    .fuwuqi
  • 菜单-用户营销
    .yonghuyingxiao
  • 菜单-理财业务分析
    .licaiyewufenxi
  • 菜单-信用卡业务
    .xinyongkayewu
  • 菜单-信用卡分期
    .xinyongkafenqi
  • LTV 分析
    .a-LTVfenxi
  • 导航二级箭头
    .daohangerjijiantou
  • 导航一级箭头收起
    .daohangyijijiantoushouqi
  • 角色交换
    .jiaosejiaohuan
  • 导航一级箭头展开
    .daohangyijijiantouzhankai
  • 菜单-存款业务分析
    .cunkuanyewu
  • 埋点
    .maidian
  • 分析方法论
    .fenxifangfalun
  • 文档说明
    .wendangshuoming
  • 帮助
    .bangzhu
  • 双右箭头
    .shuangyoujiantou
  • 双左箭头
    .shuangzuojiantou
  • 产品迭代
    .chanpindiedai
  • 用户分群
    .yonghufenqun1
  • 菜单-CEP
    .caidan-CEP
  • 菜单-数据看板(BI)
    .a-caidan-shujukanbanBI
  • 菜单-数据质量
    .caidan-shujuzhiliang
  • 数据看板
    .shujukanban
  • 业务数据
    .yewushuju
  • 埋点数据
    .maidianshuju
  • 标签数据
    .biaoqianshuju
  • 管理
    .guanli
  • 用户
    .yonghu
  • 整体
    .zhengti
  • 菜单-标签管理体系
    .caidan-biaoqianguanlitixi
  • 菜单-标签数据导入
    .caidan-biaoqianshujudaoru
  • 菜单-标签数据输出
    .caidan-biaoqianshujushuchu
  • 序号6
    .xuhao6
  • 序号2
    .xuhao2
  • 序号5
    .xuhao5
  • 序号1
    .xuhao1
  • 序号4
    .xuhao4
  • 序号3
    .xuhao3
  • html5
    .html5
  • ios
    .ios
  • android
    .android
  • 菜单-用户分群
    .yonghufenqun
  • 菜单-BI
    .BI
  • 菜单-信用贷款分析
    .xinyongdaikuanfenxi
  • 菜单-智能营销(CXP)
    .a-zhinengyingxiaoCXP
  • 菜单-用户
    .yonghu1
  • 菜单-常用分析场景
    .changyongfenxichangjing
  • 菜单-用户体验监控
    .yonghutiyanjiankong
  • 菜单-业务场景
    .yewuchangjing
  • 菜单-用户标签
    .yonghubiaoqian
  • 菜单-产品标签
    .chanpinbiaoqian
  • 菜单-营销数据分析
    .yingxiaoshujufenxi
  • 异常通知
    .yichangtongzhi1
  • 任务管理
    .renwuguanli1
  • 数据接入
    .shujujieru
  • SQL脚本
    .SQLjiaoben
  • 计算列
    .jisuanlie
  • 数据清洗
    .shujuqingxi
  • 拆分列
    .chaifenlie
  • 合并列
    .hebinglie
  • 异常通知
    .yichangtongzhi
  • 任务管理
    .renwuguanli
  • Session
    .Session
  • 收起
    .shouqi1
  • 添加
    .tianjia2
  • 盒须图
    .hexutu
  • 全屏展示
    .quanpingzhanshi
  • 流向图
    .liuxiangtu
  • 旭日图
    .xuritu
  • 桑基图
    .sangjitu
  • 树形图
    .shuxingtu
  • 全屏收起
    .quanpingshouqi
  • 对勾
    .duigou
  • datav
    .datav
  • 共享
    .gongxiang
  • 导航箭头
    .daohangjiantou
  • 放大
    .fangda
  • 创建
    .chuangjian
  • 转发
    .zhuanfa
  • 缩小
    .suoxiao
  • 漏斗
    .loudou
  • 折线图
    .zhexiantu
  • 箭头上
    .jiantoushang
  • 箭头下
    .jiantouxia
  • 箭头右上
    .jiantouyoushang
  • 标签
    .biaoqian
  • 箭头左上
    .jiantouzuoshang
  • .tianjia3
  • .chu
  • .jian
  • 编辑-填充
    .bianji-tianchong
  • 筛选 2
    .a-shaixuan2
  • 归因
    .guiyin
  • 筛选
    .shaixuan
  • 清除
    .qingchu
  • 数据去重
    .shujuquzhong
  • 替换缺失值
    .tihuanqueshizhi
  • 播放
    .bofang
  • 方向上
    .fangxiangshang
  • 暂停
    .zanting
  • 音量
    .yinliang
  • 方向下
    .fangxiangxia
  • 链接
    .lianjie1
  • 眼睛 开
    .a-yanjingkai
  • 展开
    .zhankai2
  • 收起
    .shouqi
  • 工具-刷新
    .shuaxin
  • 菜单-设置
    .caidan-shezhi
  • 菜单-退出
    .caidan-tuichu
  • 复制
    .fuzhi1
  • 移动到
    .yidongdao
  • 搜索
    .sousuo
  • 提示
    .tishi
  • funnel-mark
    .funnel-mark
  • emoji-非常不满意
    .emoji-feichangbumanyi
  • emoji-不满意
    .emoji-bumanyi
  • emoji-一般
    .emoji-yiban
  • emoji-满意
    .emoji-manyi
  • emoji-非常满意
    .emoji-feichangmanyi
  • 表情
    .biaoqing
  • 清理
    .qingli
  • 填充颜色
    .tianchongyanse
  • 提示
    .tishi1
  • 移动
    .yidong
  • 导出
    .daochu
  • 添加
    .tianjia
  • 埋点管理
    .maidianguanli
  • 埋点方案管理
    .maidianfanganguanli
  • 收藏-空
    .shoucang-kong
  • 排序
    .paixu
  • 下载
    .xiazai1
  • 复制
    .fuzhi
  • 字符串
    .zifuchuan
  • 日期
    .riqi
  • 数值
    .shuzhi
  • 删除桶
    .shanchutong
  • 删除
    .shanchu2
  • 重新加载
    .zhongxinjiazai
  • 调整大小-左右
    .tiaozhengdaxiao-zuoyou
  • 调整大小-上下
    .tiaozhengdaxiao-shangxia
  • 更多操作
    .gengduocaozuo2
  • 数据集业务
    .shujujiyewu
  • 重命名
    .zhongmingming
  • 编辑
    .bianji1
  • 输出
    .shuchu
  • 数据拆分
    .shujuchaifen
  • 聚合
    .juhe
  • 列转列
    .liezhuanlie
  • 行转列
    .hangzhuanlie
  • 字段设置
    .ziduanshezhi
  • 连接
    .lianjie
  • 合并
    .hebing
  • 收藏
    .shoucang
  • 展开
    .zhankai1
  • 标签分类
    .biaoqianfenlei
  • 标签总览
    .biaoqianzonglan
  • 删除
    .shanchu1
  • 错误
    .cuowu
  • 显示列
    .xianshilie
  • 返回icon
    .fanhuiicon
  • 提示icon
    .tishiicon
  • 饼图
    .bingtu
  • 显示
    .xianshi
  • 导出
    .daochu1
  • 生成
    .shengcheng
  • 分数
    .fenshu
  • 汇总图
    .huizongtu
  • 趋势图
    .qushitu1
  • 地图
    .ditu
  • 表格
    .biaoge
  • 报告
    .baogao
  • 编辑
    .bianji
  • 删除
    .shanchu
  • 时间
    .shijian1
  • 展开
    .zhankai
  • 折叠
    .zhedie
  • 更多操作
    .gengduocaozuo1
  • 向下
    .xiangxia
  • 添加
    .tianjia1
  • 触发环境
    .chufahuanjing
  • 用户属性
    .yonghushuxing
  • 事件属性
    .shijianshuxing1
  • Property 1=默认
    .a-Property1moren
  • Property 1=选中
    .a-Property1xuanzhong
  • 输入框_返回
    .shurukuang_fanhui
  • check_filled
    .check_filled

font-class 引用


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

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

  • 相比于 Unicode 语意明确,书写更直观。可以很容易分辨这个 icon 是什么。
  • 因为使用 class 来定义图标,所以当要替换图标时,只需要修改 class 里面的 Unicode 引用。

使用步骤如下:

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

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

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

<span class="bsicon xxx"></span>

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

  • 邮件
    #youjian
  • 短信
    #duanxin
  • inner
    #inner
  • zengjia
    #zengjia
  • shujuji_right
    #shujuji_right
  • shujuji_left
    #shujuji_left
  • paixu-shangsheng
    #paixu-shangsheng
  • file-excel
    #file-excel
  • tuozhuai1
    #tuozhuai1
  • file-add
    #file-add
  • paixu1
    #paixu1
  • all
    #all
  • tianjiawenben
    #tianjiawenben
  • shangchuantupian
    #shangchuantupian
  • tianjiatupian
    #tianjiatupian
  • tianjiabiaoti
    #tianjiabiaoti
  • charuzhibiao
    #charuzhibiao
  • user-img1
    #user-img1
  • user-img2
    #user-img2
  • 优先级
    #youxianji
  • 总量
    #zongliang
  • 素材
    #sucai
  • 权益
    #quanyi
  • 活动
    #huodong
  • 触达通道
    #chudatongdao
  • quxiaoquanping 1
    #a-quxiaoquanping1
  • 二维码
    #erweima
  • 手机
    #shouji
  • 切换横屏
    #qiehuanhengping
  • 用户人数刷新
    #yonghurenshushuaxin
  • 分享
    #fenxiang
  • icon 注意
    #a-iconzhuyi
  • 姓名排序A-Z
    #xingmingpaixuA-Z
  • 姓名排序Z-A
    #xingmingpaixuZ-A
  • 属性分析
    #shuxingfenxi
  • 放大镜
    #fangdajing
  • 缩小
    #suoxiao1
  • 关系图
    #a-node-tree2
  • 表格模式
    #a-table-view1
  • 提交
    #tijiao
  • 更多
    #gengduo
  • 文件夹
    #wenjianjia
  • 拖拽
    #tuozhuai
  • 圈选
    #quanxuan
  • 上方添加
    #shangfangtianjia
  • 下方添加
    #xiafangtianjia
  • 版本
    #chanpindiedai1
  • quanping 1
    #a-quanping1
  • 鸿蒙
    #hongmeng
  • 帮助中心
    #bangzhuzhongxin
  • 历史记录
    #lishijilu
  • 小屏幕展示
    #xiaopingmuzhanshi
  • 新建话题
    #xinjianhuati
  • 时间
    #shijian
  • 日历
    #rili
  • 日历-2
    #rili-2
  • 其他
    #qita
  • 结束
    #jieshu
  • 消息通知
    #xiaoxitongzhi
  • 审批
    #shenpi
  • js 2
    #a-js2
  • 微信小程序
    #weixinxiaochengxu
  • ios
    #ios1
  • android2
    #android1
  • 服务器
    #fuwuqi
  • 菜单-用户营销
    #yonghuyingxiao
  • 菜单-理财业务分析
    #licaiyewufenxi
  • 菜单-信用卡业务
    #xinyongkayewu
  • 菜单-信用卡分期
    #xinyongkafenqi
  • LTV 分析
    #a-LTVfenxi
  • 导航二级箭头
    #daohangerjijiantou
  • 导航一级箭头收起
    #daohangyijijiantoushouqi
  • 角色交换
    #jiaosejiaohuan
  • 导航一级箭头展开
    #daohangyijijiantouzhankai
  • 菜单-存款业务分析
    #cunkuanyewu
  • 埋点
    #maidian
  • 分析方法论
    #fenxifangfalun
  • 文档说明
    #wendangshuoming
  • 帮助
    #bangzhu
  • 双右箭头
    #shuangyoujiantou
  • 双左箭头
    #shuangzuojiantou
  • 产品迭代
    #chanpindiedai
  • 用户分群
    #yonghufenqun1
  • 菜单-CEP
    #caidan-CEP
  • 菜单-数据看板(BI)
    #a-caidan-shujukanbanBI
  • 菜单-数据质量
    #caidan-shujuzhiliang
  • 数据看板
    #shujukanban
  • 业务数据
    #yewushuju
  • 埋点数据
    #maidianshuju
  • 标签数据
    #biaoqianshuju
  • 管理
    #guanli
  • 用户
    #yonghu
  • 整体
    #zhengti
  • 菜单-标签管理体系
    #caidan-biaoqianguanlitixi
  • 菜单-标签数据导入
    #caidan-biaoqianshujudaoru
  • 菜单-标签数据输出
    #caidan-biaoqianshujushuchu
  • 序号6
    #xuhao6
  • 序号2
    #xuhao2
  • 序号5
    #xuhao5
  • 序号1
    #xuhao1
  • 序号4
    #xuhao4
  • 序号3
    #xuhao3
  • html5
    #html5
  • ios
    #ios
  • android
    #android
  • 菜单-用户分群
    #yonghufenqun
  • 菜单-BI
    #BI
  • 菜单-信用贷款分析
    #xinyongdaikuanfenxi
  • 菜单-智能营销(CXP)
    #a-zhinengyingxiaoCXP
  • 菜单-用户
    #yonghu1
  • 菜单-常用分析场景
    #changyongfenxichangjing
  • 菜单-用户体验监控
    #yonghutiyanjiankong
  • 菜单-业务场景
    #yewuchangjing
  • 菜单-用户标签
    #yonghubiaoqian
  • 菜单-产品标签
    #chanpinbiaoqian
  • 菜单-营销数据分析
    #yingxiaoshujufenxi
  • 异常通知
    #yichangtongzhi1
  • 任务管理
    #renwuguanli1
  • 数据接入
    #shujujieru
  • SQL脚本
    #SQLjiaoben
  • 计算列
    #jisuanlie
  • 数据清洗
    #shujuqingxi
  • 拆分列
    #chaifenlie
  • 合并列
    #hebinglie
  • 异常通知
    #yichangtongzhi
  • 任务管理
    #renwuguanli
  • Session
    #Session
  • 收起
    #shouqi1
  • 添加
    #tianjia2
  • 盒须图
    #hexutu
  • 全屏展示
    #quanpingzhanshi
  • 流向图
    #liuxiangtu
  • 旭日图
    #xuritu
  • 桑基图
    #sangjitu
  • 树形图
    #shuxingtu
  • 全屏收起
    #quanpingshouqi
  • 对勾
    #duigou
  • datav
    #datav
  • 共享
    #gongxiang
  • 导航箭头
    #daohangjiantou
  • 放大
    #fangda
  • 创建
    #chuangjian
  • 转发
    #zhuanfa
  • 缩小
    #suoxiao
  • 漏斗
    #loudou
  • 折线图
    #zhexiantu
  • 箭头上
    #jiantoushang
  • 箭头下
    #jiantouxia
  • 箭头右上
    #jiantouyoushang
  • 标签
    #biaoqian
  • 箭头左上
    #jiantouzuoshang
  • #tianjia3
  • #chu
  • #jian
  • 编辑-填充
    #bianji-tianchong
  • 筛选 2
    #a-shaixuan2
  • 归因
    #guiyin
  • 筛选
    #shaixuan
  • 清除
    #qingchu
  • 数据去重
    #shujuquzhong
  • 替换缺失值
    #tihuanqueshizhi
  • 播放
    #bofang
  • 方向上
    #fangxiangshang
  • 暂停
    #zanting
  • 音量
    #yinliang
  • 方向下
    #fangxiangxia
  • 链接
    #lianjie1
  • 眼睛 开
    #a-yanjingkai
  • 展开
    #zhankai2
  • 收起
    #shouqi
  • 工具-刷新
    #shuaxin
  • 菜单-设置
    #caidan-shezhi
  • 菜单-退出
    #caidan-tuichu
  • 复制
    #fuzhi1
  • 移动到
    #yidongdao
  • 搜索
    #sousuo
  • 提示
    #tishi
  • funnel-mark
    #funnel-mark
  • emoji-非常不满意
    #emoji-feichangbumanyi
  • emoji-不满意
    #emoji-bumanyi
  • emoji-一般
    #emoji-yiban
  • emoji-满意
    #emoji-manyi
  • emoji-非常满意
    #emoji-feichangmanyi
  • 表情
    #biaoqing
  • 清理
    #qingli
  • 填充颜色
    #tianchongyanse
  • 提示
    #tishi1
  • 移动
    #yidong
  • 导出
    #daochu
  • 添加
    #tianjia
  • 埋点管理
    #maidianguanli
  • 埋点方案管理
    #maidianfanganguanli
  • 收藏-空
    #shoucang-kong
  • 排序
    #paixu
  • 下载
    #xiazai1
  • 复制
    #fuzhi
  • 字符串
    #zifuchuan
  • 日期
    #riqi
  • 数值
    #shuzhi
  • 删除桶
    #shanchutong
  • 删除
    #shanchu2
  • 重新加载
    #zhongxinjiazai
  • 调整大小-左右
    #tiaozhengdaxiao-zuoyou
  • 调整大小-上下
    #tiaozhengdaxiao-shangxia
  • 更多操作
    #gengduocaozuo2
  • 数据集业务
    #shujujiyewu
  • 重命名
    #zhongmingming
  • 编辑
    #bianji1
  • 输出
    #shuchu
  • 数据拆分
    #shujuchaifen
  • 聚合
    #juhe
  • 列转列
    #liezhuanlie
  • 行转列
    #hangzhuanlie
  • 字段设置
    #ziduanshezhi
  • 连接
    #lianjie
  • 合并
    #hebing
  • 收藏
    #shoucang
  • 展开
    #zhankai1
  • 标签分类
    #biaoqianfenlei
  • 标签总览
    #biaoqianzonglan
  • 删除
    #shanchu1
  • 错误
    #cuowu
  • 显示列
    #xianshilie
  • 返回icon
    #fanhuiicon
  • 提示icon
    #tishiicon
  • 饼图
    #bingtu
  • 显示
    #xianshi
  • 导出
    #daochu1
  • 生成
    #shengcheng
  • 分数
    #fenshu
  • 汇总图
    #huizongtu
  • 趋势图
    #qushitu1
  • 地图
    #ditu
  • 表格
    #biaoge
  • 报告
    #baogao
  • 编辑
    #bianji
  • 删除
    #shanchu
  • 时间
    #shijian1
  • 展开
    #zhankai
  • 折叠
    #zhedie
  • 更多操作
    #gengduocaozuo1
  • 向下
    #xiangxia
  • 添加
    #tianjia1
  • 触发环境
    #chufahuanjing
  • 用户属性
    #yonghushuxing
  • 事件属性
    #shijianshuxing1
  • Property 1=默认
    #a-Property1moren
  • Property 1=选中
    #a-Property1xuanzhong
  • 输入框_返回
    #shurukuang_fanhui
  • check_filled
    #check_filled

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>