diff --git a/report-ui/src/assets/iconfont/demo_index.html b/report-ui/src/assets/iconfont/demo_index.html index 2712c9ae..62576652 100644 --- a/report-ui/src/assets/iconfont/demo_index.html +++ b/report-ui/src/assets/iconfont/demo_index.html @@ -1,10 +1,13 @@ + - + iconfont Demo - - + + @@ -34,2355 +37,2381 @@ } +

- - -

+ + +
- - 查看项目 - + + 查看项目 +
-
    - -
  • - -
    excel
    -
    
    -
    • - -
  • - -
    保存
    -
    
    -
    • - -
  • - -
    关 闭
    -
    
    -
    • - -
  • - -
    pdf
    -
    
    -
    • - -
  • - -
    复制
    -
    
    -
    • - -
  • - -
    020空心饼图
    -
    
    -
    • - -
  • - -
    时间
    -
    
    -
    • - -
  • - -
    保存
    -
    
    -
    • - -
  • - -
    图片
    -
    
    -
    • - -
  • - -
    柱状图
    -
    
    -
    • - -
  • - -
    超链接
    -
    
    -
    • - -
  • - -
    文本
    -
    
    -
    • - -
  • - -
    视频
    -
    
    -
    • - -
  • - -
    框架
    -
    
    -
    • - -
  • - -
    预览
    -
    
    -
    • - -
  • - -
    横向文字
    -
    
    -
    • - -
  • - -
    图表 _饼图
    -
    
    -
    • - -
  • - -
    漏斗图
    -
    
    -
    • - -
  • - -
    图表 折线图
    -
    
    -
    • - -
  • - -
    柱线图
    -
    
    -
    • - -
  • - -
    图片
    -
    
    -
    • - -
  • - -
    仪表盘
    -
    
    -
    • - -
  • - -
    返回
    -
    
    -
    • - -
  • - -
    下载
    -
    
    -
    • - -
  • - -
    下载
    -
    
    -
    • - -
  • - -
    邮箱
    -
    
    -
    • - -
  • - -
    绑定手机
    -
    
    -
    • - -
  • - -
    手机
    -
    
    -
    • - -
  • - -
    52-手机
    -
    
    -
    • - -
  • - -
    home
    -
    
    -
    • - -
  • - -
    home
    -
    
    -
    • - -
  • - -
    Kafka
    -
    
    -
    • - -
  • - -
    数据接入—Kafka集群
    -
    
    -
    • - -
  • - -
    kafka
    -
    
    -
    • - -
  • - -
    elasticsearch-Elasticsearch
    -
    
    -
    • - -
  • - -
    apachekafka
    -
    
    -
    • - -
  • - -
    elasticsearch
    -
    
    -
    • - -
  • - -
    问题反馈
    -
    
    -
    • - -
  • - -
    问题反馈
    -
    
    -
    • - -
  • - -
    问题反馈
    -
    
    -
    • - -
  • - -
    alikafka 消息队列Kafka
    -
    
    -
    • - -
  • - -
    项目查询-查看设备
    -
    
    -
    • - -
  • - -
    elasticsearch Elasticsearch
    -
    
    -
    • - -
  • - -
    511统计_树图
    -
    
    -
    • - -
  • - -
    分享
    -
    
    -
    • - -
  • - -
    分享
    -
    
    -
    • - -
  • - -
    分享
    -
    
    -
    • - -
  • - -
    告警-紧急
    -
    
    -
    • - -
  • - -
    完成安全事件
    -
    
    -
    • - -
  • - -
    eventbridge 消息事件总线
    -
    
    -
    • - -
  • - -
    树
    -
    
    -
    • - -
  • - -
    设备关机
    -
    
    -
    • - -
  • - -
    好房拓 4.0.0 iconfont_短信
    -
    
    -
    • - -
  • - -
    业务参数
    -
    
    -
    • - -
  • - -
    列表
    -
    
    -
    • - -
  • - -
    编辑
    -
    
    -
    • - -
  • - -
    邮件
    -
    
    -
    • - -
  • - -
    社交钉钉
    -
    
    -
    • - -
  • - -
    字典管理
    -
    
    -
    • - -
  • - -
    图表
    -
    
    -
    • - -
  • - -
    钉钉
    -
    
    -
    • - -
  • - -
    短信
    -
    
    -
    • - -
  • - -
    directmail 邮件推送
    -
    
    -
    • - -
  • - -
    设备设施
    -
    
    -
    • - -
  • - -
    通知
    -
    
    -
    • - -
  • - -
    日志
    -
    
    -
    • - -
  • - -
    触发器配置-灰
    -
    
    -
    • - -
  • - -
    vcs 视觉计算服务
    -
    
    -
    • - -
  • - -
    设备
    -
    
    -
    • - -
  • - -
    user-before
    -
    
    -
    • - -
  • - -
    科目维护图标
    -
    
    -
    • - -
  • - -
    会计科目维护
    -
    
    -
    • - -
  • - -
    成本查询
    -
    
    -
    • - -
  • - -
    成本数据管理
    -
    
    -
    • - -
  • - -
    基本数据
    -
    
    -
    • - -
  • - -
    B-省市区
    -
    
    -
    • - -
  • - -
    组织机构
    -
    
    -
    • - -
  • - -
    按钮
    -
    
    -
    • - -
  • - -
    菜单
    -
    
    -
    • - -
  • - -
    问号
    -
    
    -
    • - -
  • - -
    垃圾桶
    -
    
    -
    • - -
  • - -
    重置密码
    -
    
    -
    • - -
  • - -
    设置
    -
    
    -
    • - -
  • - -
    中转
    -
    
    -
    • - -
  • - -
    add
    -
    
    -
    • - -
  • - -
    minus
    -
    
    -
    • - -
  • - -
    password
    -
    
    -
    • - -
  • - -
    用户
    -
    
    -
    • - -
  • - -
    权限
    -
    
    -
    • - -
  • - -
    角色
    -
    
    -
    • - -
  • - -
    字典
    -
    
    -
    • - -
  • - -
    参数设置
    -
    
    -
    • - -
  • - -
    编辑
    -
    
    -
    • - -
  • - -
    用户权限
    -
    
    -
    • - -
  • - -
    分享
    -
    
    -
    • - -
  • - -
    授权
    -
    
    -
    • - -
  • - -
    左箭头
    -
    
    -
    • - -
  • - -
    左箭头
    -
    
    -
    • - -
-
-

Unicode 引用

-
- -

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

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

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

-
-

Unicode 使用步骤如下：

-

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

-
@font-face {
-  font-family: 'iconfont';
-  src: url('iconfont.woff2?t=1624608582557') format('woff2'),
-       url('iconfont.woff?t=1624608582557') format('woff'),
-       url('iconfont.ttf?t=1624608582557') 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"。

-
-
-
-
    - +
  • - -
    - excel -
    -
    .iconexcel -
    + +
    展 开
    +
    &#xe631;
    • - +
  • - -
    - 保存 -
    -
    .iconbaocun -
    + +
    excel
    +
    &#xe650;
    • - +
  • - -
    - 关 闭 -
    -
    .iconguanbi -
    + +
    保存
    +
    &#xe737;
    • - +
  • - -
    - pdf -
    -
    .iconpdf -
    + +
    关 闭
    +
    &#xe6c5;
    • - +
  • - -
    - 复制 -
    -
    .iconfuzhi -
    + +
    pdf
    +
    &#xe614;
    • - +
  • - -
    - 020空心饼图 -
    -
    .icon020kongxinbingtu -
    + +
    复制
    +
    &#xe61e;
    • - +
  • - -
    - 时间 -
    -
    .iconshijian -
    + +
    020空心饼图
    +
    &#xe78c;
    • - +
  • - -
    - 保存 -
    -
    .iconsave -
    + +
    时间
    +
    &#xe662;
    • - +
  • - -
    - 图片 -
    -
    .icontupian -
    + +
    保存
    +
    &#xe6f6;
    • - +
  • - -
    - 柱状图 -
    -
    .iconzhuzhuangtu -
    + +
    图片
    +
    &#xe612;
    • - +
  • - -
    - 超链接 -
    -
    .iconchaolianjie -
    + +
    柱状图
    +
    &#xe691;
    • - +
  • - -
    - 文本 -
    -
    .iconziyuan -
    + +
    超链接
    +
    &#xe65f;
    • - +
  • - -
    - 视频 -
    -
    .iconshipin -
    + +
    文本
    +
    &#xe605;
    • - +
  • - -
    - 框架 -
    -
    .iconkuangjia -
    + +
    视频
    +
    &#xecc1;
    • - +
  • - -
    - 预览 -
    -
    .iconyulan -
    + +
    框架
    +
    &#xe66a;
    • - +
  • - -
    - 横向文字 -
    -
    .iconhengxiangwenzi -
    + +
    预览
    +
    &#xe728;
    • - +
  • - -
    - 图表 _饼图 -
    -
    .iconicon_tubiao_bingtu -
    + +
    横向文字
    +
    &#xe601;
    • - +
  • - -
    - 漏斗图 -
    -
    .iconloudoutu -
    + +
    图表 _饼图
    +
    &#xe602;
    • - +
  • - -
    - 图表 折线图 -
    -
    .icontubiaozhexiantu -
    + +
    漏斗图
    +
    &#xe6d5;
    • - +
  • - -
    - 柱线图 -
    -
    .iconzhuxiantu -
    + +
    图表 折线图
    +
    &#xe630;
    • - +
  • - -
    - 图片 -
    -
    .icontupian1 -
    + +
    柱线图
    +
    &#xe607;
    • - +
  • - -
    - 仪表盘 -
    -
    .iconyibiaopan -
    + +
    图片
    +
    &#xe81d;
    • - +
  • - -
    - 返回 -
    -
    .icon1 -
    + +
    仪表盘
    +
    &#xe706;
    • - +
  • - -
    - 下载 -
    -
    .iconxiazai -
    + +
    返回
    +
    &#xe63b;
    • - +
  • - -
    - 下载 -
    -
    .icon11-04 -
    + +
    下载
    +
    &#xe639;
    • - +
  • - -
    - 邮箱 -
    -
    .iconyouxiang -
    + +
    下载
    +
    &#xe784;
    • - +
  • - -
    - 绑定手机 -
    -
    .iconbangdingshouji -
    + +
    邮箱
    +
    &#xe769;
    • - +
  • - -
    - 手机 -
    -
    .iconshouji -
    + +
    绑定手机
    +
    &#xe64d;
    • - +
  • - -
    - 52-手机 -
    -
    .icon52-shouji -
    + +
    手机
    +
    &#xe854;
    • - +
  • - -
    - home -
    -
    .iconhome -
    + +
    52-手机
    +
    &#xe871;
    • - +
  • - -
    - home -
    -
    .iconhome2 + +
    home
    +
    &#xe610;
    +
    • + +
  • + +
    home
    +
    &#xe61a;
    +
    • + +
  • + +
    Kafka
    +
    &#xe65a;
    +
    • + +
  • + +
    数据接入—Kafka集群
    +
    &#xe64f;
    +
    • + +
  • + +
    kafka
    +
    &#xe6f2;
    +
    • + +
  • + +
    elasticsearch-Elasticsearch
    +
    &#xe853;
    +
    • + +
  • + +
    apachekafka
    +
    &#xeb3f;
    +
    • + +
  • + +
    elasticsearch
    +
    &#xeb85;
    +
    • + +
  • + +
    问题反馈
    +
    &#xe8d1;
    +
    • + +
  • + +
    问题反馈
    +
    &#xe70e;
    +
    • + +
  • + +
    问题反馈
    +
    &#xe643;
    +
    • + +
  • + +
    alikafka 消息队列Kafka
    +
    &#xe8a4;
    +
    • + +
  • + +
    项目查询-查看设备
    +
    &#xe682;
    +
    • + +
  • + +
    elasticsearch Elasticsearch
    +
    &#xe6a1;
    +
    • + +
  • + +
    511统计_树图
    +
    &#xe64a;
    +
    • + +
  • + +
    分享
    +
    &#xe615;
    +
    • + +
  • + +
    分享
    +
    &#xe60f;
    +
    • + +
  • + +
    分享
    +
    &#xe600;
    +
    • + +
  • + +
    告警-紧急
    +
    &#xe628;
    +
    • + +
  • + +
    完成安全事件
    +
    &#xe68a;
    +
    • + +
  • + +
    eventbridge 消息事件总线
    +
    &#xe74d;
    +
    • + +
  • + +
    树
    +
    &#xe629;
    +
    • + +
  • + +
    设备关机
    +
    &#xe61d;
    +
    • + +
  • + +
    好房拓 4.0.0 iconfont_短信
    +
    &#xe6d8;
    +
    • + +
  • + +
    业务参数
    +
    &#xe661;
    +
    • + +
  • + +
    列表
    +
    &#xe660;
    +
    • + +
  • + +
    编辑
    +
    &#xe60c;
    +
    • + +
  • + +
    邮件
    +
    &#xe63a;
    +
    • + +
  • + +
    社交钉钉
    +
    &#xe678;
    +
    • + +
  • + +
    字典管理
    +
    &#xe624;
    +
    • + +
  • + +
    图表
    +
    &#xe73f;
    +
    • + +
  • + +
    钉钉
    +
    &#xe690;
    +
    • + +
  • + +
    短信
    +
    &#xe603;
    +
    • + +
  • + +
    directmail 邮件推送
    +
    &#xe714;
    +
    • + +
  • + +
    设备设施
    +
    &#xe61c;
    +
    • + +
  • + +
    通知
    +
    &#xe606;
    +
    • + +
  • + +
    日志
    +
    &#xe663;
    +
    • + +
  • + +
    触发器配置-灰
    +
    &#xe689;
    +
    • + +
  • + +
    vcs 视觉计算服务
    +
    &#xe759;
    +
    • + +
  • + +
    设备
    +
    &#xe60a;
    +
    • + +
  • + +
    user-before
    +
    &#xe617;
    +
    • + +
  • + +
    科目维护图标
    +
    &#xe60b;
    +
    • + +
  • + +
    会计科目维护
    +
    &#xe677;
    +
    • + +
  • + +
    成本查询
    +
    &#xe6dd;
    +
    • + +
  • + +
    成本数据管理
    +
    &#xe6c7;
    +
    • + +
  • + +
    基本数据
    +
    &#xe71d;
    +
    • + +
  • + +
    B-省市区
    +
    &#xe72d;
    +
    • + +
  • + +
    组织机构
    +
    &#xe66e;
    +
    • + +
  • + +
    按钮
    +
    &#xe8c5;
    +
    • + +
  • + +
    菜单
    +
    &#xe61b;
    +
    • + +
  • + +
    问号
    +
    &#xe67f;
    +
    • + +
  • + +
    垃圾桶
    +
    &#xe636;
    +
    • + +
  • + +
    重置密码
    +
    &#xe620;
    +
    • + +
  • + +
    设置
    +
    &#xe68f;
    +
    • + +
  • + +
    中转
    +
    &#xe69b;
    +
    • + +
  • + +
    add
    +
    &#xe6b9;
    +
    • + +
  • + +
    minus
    +
    &#xe6ba;
    +
    • + +
  • + +
    password
    +
    &#xe622;
    +
    • + +
  • + +
    用户
    +
    &#xe604;
    +
    • + +
  • + +
    权限
    +
    &#xe633;
    +
    • + +
  • + +
    角色
    +
    &#xe64c;
    +
    • + +
  • + +
    字典
    +
    &#xe716;
    +
    • + +
  • + +
    参数设置
    +
    &#xe672;
    +
    • + +
  • + +
    编辑
    +
    &#xe642;
    +
    • + +
  • + +
    用户权限
    +
    &#xe609;
    +
    • + +
  • + +
    分享
    +
    &#xe641;
    +
    • + +
  • + +
    授权
    +
    &#xe634;
    +
    • + +
  • + +
    左箭头
    +
    &#xe653;
    +
    • + +
  • + +
    左箭头
    +
    &#xe654;
    +
    • + +
+
+

Unicode 引用

+
+ +

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

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

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

+
+

Unicode 使用步骤如下：

+

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

+ 
@font-face {
+  font-family: 'iconfont';
+  src: url('iconfont.woff2?t=1624613153423') format('woff2'),
+       url('iconfont.woff?t=1624613153423') format('woff'),
+       url('iconfont.ttf?t=1624613153423') 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"。

+
+
+
+
+
    + +
  • + +
    + 展 开 +
    +
    .iconzhankai +
    +
    • + +
  • + +
    + excel +
    +
    .iconexcel +
    +
    • + +
  • + +
    + 保存 +
    +
    .iconbaocun +
    +
    • + +
  • + +
    + 关 闭 +
    +
    .iconguanbi +
    +
    • + +
  • + +
    + pdf +
    +
    .iconpdf +
    +
    • + +
  • + +
    + 复制 +
    +
    .iconfuzhi +
    +
    • + +
  • + +
    + 020空心饼图 +
    +
    .icon020kongxinbingtu +
    +
    • + +
  • + +
    + 时间 +
    +
    .iconshijian +
    +
    • + +
  • + +
    + 保存 +
    +
    .iconsave +
    +
    • + +
  • + +
    + 图片 +
    +
    .icontupian +
    +
    • + +
  • + +
    + 柱状图 +
    +
    .iconzhuzhuangtu +
    +
    • + +
  • + +
    + 超链接 +
    +
    .iconchaolianjie +
    +
    • + +
  • + +
    + 文本 +
    +
    .iconziyuan +
    +
    • + +
  • + +
    + 视频 +
    +
    .iconshipin +
    +
    • + +
  • + +
    + 框架 +
    +
    .iconkuangjia +
    +
    • + +
  • + +
    + 预览 +
    +
    .iconyulan +
    +
    • + +
  • + +
    + 横向文字 +
    +
    .iconhengxiangwenzi +
    +
    • + +
  • + +
    + 图表 _饼图 +
    +
    .iconicon_tubiao_bingtu +
    +
    • + +
  • + +
    + 漏斗图 +
    +
    .iconloudoutu +
    +
    • + +
  • + +
    + 图表 折线图 +
    +
    .icontubiaozhexiantu +
    +
    • + +
  • + +
    + 柱线图 +
    +
    .iconzhuxiantu +
    +
    • + +
  • + +
    + 图片 +
    +
    .icontupian1 +
    +
    • + +
  • + +
    + 仪表盘 +
    +
    .iconyibiaopan +
    +
    • + +
  • + +
    + 返回 +
    +
    .icon1 +
    +
    • + +
  • + +
    + 下载 +
    +
    .iconxiazai +
    +
    • + +
  • + +
    + 下载 +
    +
    .icon11-04 +
    +
    • + +
  • + +
    + 邮箱 +
    +
    .iconyouxiang +
    +
    • + +
  • + +
    + 绑定手机 +
    +
    .iconbangdingshouji +
    +
    • + +
  • + +
    + 手机 +
    +
    .iconshouji +
    +
    • + +
  • + +
    + 52-手机 +
    +
    .icon52-shouji +
    +
    • + +
  • + +
    + home +
    +
    .iconhome +
    +
    • + +
  • + +
    + home +
    +
    .iconhome2 +
    +
    • + +
  • + +
    + Kafka +
    +
    .iconKafka +
    +
    • + +
  • + +
    + 数据接入—Kafka集群 +
    +
    .iconshujujieruKafkajiqun +
    +
    • + +
  • + +
    + kafka +
    +
    .iconkafka +
    +
    • + +
  • + +
    + elasticsearch-Elasticsearch +
    +
    .iconelasticsearch-Elasticsearch +
    +
    • + +
  • + +
    + apachekafka +
    +
    .iconapachekafka +
    +
    • + +
  • + +
    + elasticsearch +
    +
    .iconelasticsearch +
    +
    • + +
  • + +
    + 问题反馈 +
    +
    .iconwentifankui +
    +
    • + +
  • + +
    + 问题反馈 +
    +
    .iconwentifankui1 +
    +
    • + +
  • + +
    + 问题反馈 +
    +
    .iconwentifankui2 +
    +
    • + +
  • + +
    + alikafka 消息队列Kafka +
    +
    .iconalikafkaxiaoxiduilieKafka +
    +
    • + +
  • + +
    + 项目查询-查看设备 +
    +
    .iconxiangmuchaxun-chakanshebei +
    +
    • + +
  • + +
    + elasticsearch Elasticsearch +
    +
    .iconelasticsearchElasticsearch +
    +
    • + +
  • + +
    + 511统计_树图 +
    +
    .icon511tongji_shutu +
    +
    • + +
  • + +
    + 分享 +
    +
    .iconfenxiang1 +
    +
    • + +
  • + +
    + 分享 +
    +
    .iconfenxiang2 +
    +
    • + +
  • + +
    + 分享 +
    +
    .iconfenxiang_2 +
    +
    • + +
  • + +
    + 告警-紧急 +
    +
    .iconNMStubiao- +
    +
    • + +
  • + +
    + 完成安全事件 +
    +
    .iconwanchenganquanshijian +
    +
    • + +
  • + +
    + eventbridge 消息事件总线 +
    +
    .iconeventbridgexiaoxishijianzongxian +
    +
    • + +
  • + +
    + 树 +
    +
    .iconshu +
    +
    • + +
  • + +
    + 设备关机 +
    +
    .iconshebeiguanji +
    +
    • + +
  • + +
    + 好房拓 4.0.0 iconfont_短信 +
    +
    .iconhaofangtuo400iconfontduanxin +
    +
    • + +
  • + +
    + 业务参数 +
    +
    .iconnavicon-ywcs +
    +
    • + +
  • + +
    + 列表 +
    +
    .iconliebiao +
    +
    • + +
  • + +
    + 编辑 +
    +
    .iconbianji +
    +
    • + +
  • + +
    + 邮件 +
    +
    .iconyoujian +
    +
    • + +
  • + +
    + 社交钉钉 +
    +
    .iconshejiaodingding +
    +
    • + +
  • + +
    + 字典管理 +
    +
    .iconzidianguanli +
    +
    • + +
  • + +
    + 图表 +
    +
    .icontubiao +
    +
    • + +
  • + +
    + 钉钉 +
    +
    .icondingding +
    +
    • + +
  • + +
    + 短信 +
    +
    .iconduanxin +
    +
    • + +
  • + +
    + directmail 邮件推送 +
    +
    .icondirectmailyoujiantuisong +
    +
    • + +
  • + +
    + 设备设施 +
    +
    .iconshebeisheshi +
    +
    • + +
  • + +
    + 通知 +
    +
    .icontongzhi +
    +
    • + +
  • + +
    + 日志 +
    +
    .iconrizhi +
    +
    • + +
  • + +
    + 触发器配置-灰 +
    +
    .iconchufaqipeizhi-hui +
    +
    • + +
  • + +
    + vcs 视觉计算服务 +
    +
    .iconvcsshijuejisuanfuwu +
    +
    • + +
  • + +
    + 设备 +
    +
    .iconbar_icon_shebei +
    +
    • + +
  • + +
    + user-before +
    +
    .iconuser-before +
    +
    • + +
  • + +
    + 科目维护图标 +
    +
    .iconkemuweihutubiao +
    +
    • + +
  • + +
    + 会计科目维护 +
    +
    .iconaccounting-subjects +
    +
    • + +
  • + +
    + 成本查询 +
    +
    .iconRectangleCopy +
    +
    • + +
  • + +
    + 成本数据管理 +
    +
    .iconchengbenshujuguanli +
    +
    • + +
  • + +
    + 基本数据 +
    +
    .iconjibenshuju +
    +
    • + +
  • + +
    + B-省市区 +
    +
    .iconB-shengshiqu +
    +
    • + +
  • + +
    + 组织机构 +
    +
    .iconzuzhijigou +
    +
    • + +
  • + +
    + 按钮 +
    +
    .iconanniu +
    +
    • + +
  • + +
    + 菜单 +
    +
    .iconcaidan2 +
    +
    • + +
  • + +
    + 问号 +
    +
    .iconwenhao +
    +
    • + +
  • + +
    + 垃圾桶 +
    +
    .iconlajitong +
    +
    • + +
  • + +
    + 重置密码 +
    +
    .iconzhongzhimima +
    +
    • + +
  • + +
    + 设置 +
    +
    .iconshezhi +
    +
    • + +
  • + +
    + 中转 +
    +
    .iconzhongzhuan +
    +
    • + +
  • + +
    + add +
    +
    .iconadd +
    +
    • + +
  • + +
    + minus +
    +
    .iconminus +
    +
    • + +
  • + +
    + password +
    +
    .iconpassword +
    +
    • + +
  • + +
    + 用户 +
    +
    .iconyonghu +
    +
    • + +
  • + +
    + 权限 +
    +
    .iconquanxian +
    +
    • + +
  • + +
    + 角色 +
    +
    .iconjiaose1 +
    +
    • + +
  • + +
    + 字典 +
    +
    .iconzidian +
    +
    • + +
  • + +
    + 参数设置 +
    +
    .iconcssz +
    +
    • + +
  • + +
    + 编辑 +
    +
    .iconbianji1 +
    +
    • + +
  • + +
    + 用户权限 +
    +
    .icondfzq- +
    +
    • + +
  • + +
    + 分享 +
    +
    .iconfenxiang +
    +
    • + +
  • + +
    + 授权 +
    +
    .iconshouquan1 +
    +
    • + +
  • + +
    + 左箭头 +
    +
    .iconjiantou +
    +
    • + +
  • + +
    + 左箭头 +
    +
    .iconjiantou-copy-copy
    • - + +
+
+

font-class 引用

+
+ +

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

+

与 Unicode 使用方式相比，具有如下特点：

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

使用步骤如下：

+

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

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

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

+ 
<span class="iconfont iconxxx"></span>
+
+
+

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

+
+
+
+
+
    + +
  • + +
    展 开
    +
    #iconzhankai
    +
    • + +
  • + +
    excel
    +
    #iconexcel
    +
    • + +
  • + +
    保存
    +
    #iconbaocun
    +
    • + +
  • + +
    关 闭
    +
    #iconguanbi
    +
    • + +
  • + +
    pdf
    +
    #iconpdf
    +
    • + +
  • + +
    复制
    +
    #iconfuzhi
    +
    • + +
  • + +
    020空心饼图
    +
    #icon020kongxinbingtu
    +
    • + +
  • + +
    时间
    +
    #iconshijian
    +
    • + +
  • + +
    保存
    +
    #iconsave
    +
    • + +
  • + +
    图片
    +
    #icontupian
    +
    • + +
  • + +
    柱状图
    +
    #iconzhuzhuangtu
    +
    • + +
  • + +
    超链接
    +
    #iconchaolianjie
    +
    • + +
  • + +
    文本
    +
    #iconziyuan
    +
    • + +
  • + +
    视频
    +
    #iconshipin
    +
    • + +
  • + +
    框架
    +
    #iconkuangjia
    +
    • + +
  • + +
    预览
    +
    #iconyulan
    +
    • + +
  • + +
    横向文字
    +
    #iconhengxiangwenzi
    +
    • + +
  • + +
    图表 _饼图
    +
    #iconicon_tubiao_bingtu
    +
    • + +
  • + +
    漏斗图
    +
    #iconloudoutu
    +
    • + +
  • + +
    图表 折线图
    +
    #icontubiaozhexiantu
    +
    • + +
  • + +
    柱线图
    +
    #iconzhuxiantu
    +
    • +
  • - -
    - Kafka -
    -
    .iconKafka -
    + +
    图片
    +
    #icontupian1
    • - +
  • - -
    - 数据接入—Kafka集群 -
    -
    .iconshujujieruKafkajiqun -
    + +
    仪表盘
    +
    #iconyibiaopan
    • - +
  • - -
    - kafka -
    -
    .iconkafka -
    + +
    返回
    +
    #icon1
    • - +
  • - -
    - elasticsearch-Elasticsearch -
    -
    .iconelasticsearch-Elasticsearch -
    + +
    下载
    +
    #iconxiazai
    • - +
  • - -
    - apachekafka -
    -
    .iconapachekafka -
    + +
    下载
    +
    #icon11-04
    • - +
  • - -
    - elasticsearch -
    -
    .iconelasticsearch -
    + +
    邮箱
    +
    #iconyouxiang
    • - +
  • - -
    - 问题反馈 -
    -
    .iconwentifankui -
    + +
    绑定手机
    +
    #iconbangdingshouji
    • - +
  • - -
    - 问题反馈 -
    -
    .iconwentifankui1 -
    + +
    手机
    +
    #iconshouji
    • - +
  • - -
    - 问题反馈 -
    -
    .iconwentifankui2 -
    + +
    52-手机
    +
    #icon52-shouji
    • - +
  • - -
    - alikafka 消息队列Kafka -
    -
    .iconalikafkaxiaoxiduilieKafka -
    + +
    home
    +
    #iconhome
    • - +
  • - -
    - 项目查询-查看设备 -
    -
    .iconxiangmuchaxun-chakanshebei -
    + +
    home
    +
    #iconhome2
    • - +
  • - -
    - elasticsearch Elasticsearch -
    -
    .iconelasticsearchElasticsearch -
    + +
    Kafka
    +
    #iconKafka
    • - +
  • - -
    - 511统计_树图 -
    -
    .icon511tongji_shutu -
    + +
    数据接入—Kafka集群
    +
    #iconshujujieruKafkajiqun
    • - +
  • - -
    - 分享 -
    -
    .iconfenxiang1 -
    + +
    kafka
    +
    #iconkafka
    • - +
  • - -
    - 分享 -
    -
    .iconfenxiang2 -
    + +
    elasticsearch-Elasticsearch
    +
    #iconelasticsearch-Elasticsearch
    • - +
  • - -
    - 分享 -
    -
    .iconfenxiang_2 -
    + +
    apachekafka
    +
    #iconapachekafka
    • - +
  • - -
    - 告警-紧急 -
    -
    .iconNMStubiao- -
    + +
    elasticsearch
    +
    #iconelasticsearch
    • - +
  • - -
    - 完成安全事件 -
    -
    .iconwanchenganquanshijian -
    + +
    问题反馈
    +
    #iconwentifankui
    +
    • + +
  • + +
    问题反馈
    +
    #iconwentifankui1
    • - +
  • - -
    - eventbridge 消息事件总线 -
    -
    .iconeventbridgexiaoxishijianzongxian -
    + +
    问题反馈
    +
    #iconwentifankui2
    • - +
  • - -
    - 树 -
    -
    .iconshu -
    + +
    alikafka 消息队列Kafka
    +
    #iconalikafkaxiaoxiduilieKafka
    • - +
  • - -
    - 设备关机 -
    -
    .iconshebeiguanji -
    + +
    项目查询-查看设备
    +
    #iconxiangmuchaxun-chakanshebei
    • - +
  • - -
    - 好房拓 4.0.0 iconfont_短信 -
    -
    .iconhaofangtuo400iconfontduanxin -
    + +
    elasticsearch Elasticsearch
    +
    #iconelasticsearchElasticsearch
    • - +
  • - -
    - 业务参数 -
    -
    .iconnavicon-ywcs -
    + +
    511统计_树图
    +
    #icon511tongji_shutu
    • - +
  • - -
    - 列表 -
    -
    .iconliebiao -
    + +
    分享
    +
    #iconfenxiang1
    • - +
  • - -
    - 编辑 -
    -
    .iconbianji -
    + +
    分享
    +
    #iconfenxiang2
    • - +
  • - -
    - 邮件 -
    -
    .iconyoujian -
    + +
    分享
    +
    #iconfenxiang_2
    • - +
  • - -
    - 社交钉钉 -
    -
    .iconshejiaodingding -
    + +
    告警-紧急
    +
    #iconNMStubiao-
    • - +
  • - -
    - 字典管理 -
    -
    .iconzidianguanli -
    + +
    完成安全事件
    +
    #iconwanchenganquanshijian
    • - +
  • - -
    - 图表 -
    -
    .icontubiao -
    + +
    eventbridge 消息事件总线
    +
    #iconeventbridgexiaoxishijianzongxian
    • - +
  • - -
    - 钉钉 -
    -
    .icondingding -
    + +
    树
    +
    #iconshu
    • - +
  • - -
    - 短信 -
    -
    .iconduanxin -
    + +
    设备关机
    +
    #iconshebeiguanji
    • - +
  • - -
    - directmail 邮件推送 -
    -
    .icondirectmailyoujiantuisong -
    + +
    好房拓 4.0.0 iconfont_短信
    +
    #iconhaofangtuo400iconfontduanxin
    +
    • + +
  • + +
    业务参数
    +
    #iconnavicon-ywcs
    +
    • + +
  • + +
    列表
    +
    #iconliebiao
    +
    • + +
  • + +
    编辑
    +
    #iconbianji
    +
    • + +
  • + +
    邮件
    +
    #iconyoujian
    +
    • + +
  • + +
    社交钉钉
    +
    #iconshejiaodingding
    +
    • + +
  • + +
    字典管理
    +
    #iconzidianguanli
    +
    • + +
  • + +
    图表
    +
    #icontubiao
    +
    • + +
  • + +
    钉钉
    +
    #icondingding
    +
    • + +
  • + +
    短信
    +
    #iconduanxin
    +
    • + +
  • + +
    directmail 邮件推送
    +
    #icondirectmailyoujiantuisong
    • - +
  • - -
    - 设备设施 -
    -
    .iconshebeisheshi -
    + +
    设备设施
    +
    #iconshebeisheshi
    • - +
  • - -
    - 通知 -
    -
    .icontongzhi -
    + +
    通知
    +
    #icontongzhi
    • - +
  • - -
    - 日志 -
    -
    .iconrizhi -
    + +
    日志
    +
    #iconrizhi
    • - +
  • - -
    - 触发器配置-灰 -
    -
    .iconchufaqipeizhi-hui -
    + +
    触发器配置-灰
    +
    #iconchufaqipeizhi-hui
    • - +
  • - -
    - vcs 视觉计算服务 -
    -
    .iconvcsshijuejisuanfuwu -
    + +
    vcs 视觉计算服务
    +
    #iconvcsshijuejisuanfuwu
    • - +
  • - -
    - 设备 -
    -
    .iconbar_icon_shebei -
    + +
    设备
    +
    #iconbar_icon_shebei
    • - +
  • - -
    - user-before -
    -
    .iconuser-before -
    + +
    user-before
    +
    #iconuser-before
    • - +
  • - -
    - 科目维护图标 -
    -
    .iconkemuweihutubiao -
    + +
    科目维护图标
    +
    #iconkemuweihutubiao
    • - +
  • - -
    - 会计科目维护 -
    -
    .iconaccounting-subjects -
    + +
    会计科目维护
    +
    #iconaccounting-subjects
    • - +
  • - -
    - 成本查询 -
    -
    .iconRectangleCopy -
    + +
    成本查询
    +
    #iconRectangleCopy
    • - +
  • - -
    - 成本数据管理 -
    -
    .iconchengbenshujuguanli -
    + +
    成本数据管理
    +
    #iconchengbenshujuguanli
    • - +
  • - -
    - 基本数据 -
    -
    .iconjibenshuju -
    + +
    基本数据
    +
    #iconjibenshuju
    • - +
  • - -
    - B-省市区 -
    -
    .iconB-shengshiqu -
    + +
    B-省市区
    +
    #iconB-shengshiqu
    • - +
  • - -
    - 组织机构 -
    -
    .iconzuzhijigou -
    + +
    组织机构
    +
    #iconzuzhijigou
    • - +
  • - -
    - 按钮 -
    -
    .iconanniu -
    + +
    按钮
    +
    #iconanniu
    • - +
  • - -
    - 菜单 -
    -
    .iconcaidan2 -
    + +
    菜单
    +
    #iconcaidan2
    • - +
  • - -
    - 问号 -
    -
    .iconwenhao -
    + +
    问号
    +
    #iconwenhao
    • - +
  • - -
    - 垃圾桶 -
    -
    .iconlajitong -
    + +
    垃圾桶
    +
    #iconlajitong
    • - +
  • - -
    - 重置密码 -
    -
    .iconzhongzhimima -
    + +
    重置密码
    +
    #iconzhongzhimima
    • - +
  • - -
    - 设置 -
    -
    .iconshezhi -
    + +
    设置
    +
    #iconshezhi
    • - +
  • - -
    - 中转 -
    -
    .iconzhongzhuan -
    + +
    中转
    +
    #iconzhongzhuan
    • - +
  • - -
    - add -
    -
    .iconadd -
    + +
    add
    +
    #iconadd
    • - +
  • - -
    - minus -
    -
    .iconminus -
    + +
    minus
    +
    #iconminus
    • - +
  • - -
    - password -
    -
    .iconpassword -
    + +
    password
    +
    #iconpassword
    • - +
  • - -
    - 用户 -
    -
    .iconyonghu -
    + +
    用户
    +
    #iconyonghu
    • - +
  • - -
    - 权限 -
    -
    .iconquanxian -
    + +
    权限
    +
    #iconquanxian
    • - +
  • - -
    - 角色 -
    -
    .iconjiaose1 -
    + +
    角色
    +
    #iconjiaose1
    • - +
  • - -
    - 字典 -
    -
    .iconzidian -
    + +
    字典
    +
    #iconzidian
    • - +
  • - -
    - 参数设置 -
    -
    .iconcssz -
    + +
    参数设置
    +
    #iconcssz
    • - +
  • - -
    - 编辑 -
    -
    .iconbianji1 -
    + +
    编辑
    +
    #iconbianji1
    • - +
  • - -
    - 用户权限 -
    -
    .icondfzq- -
    + +
    用户权限
    +
    #icondfzq-
    • - +
  • - -
    - 分享 -
    -
    .iconfenxiang -
    + +
    分享
    +
    #iconfenxiang
    • - +
  • - -
    - 授权 -
    -
    .iconshouquan1 -
    + +
    授权
    +
    #iconshouquan1
    • - +
  • - -
    - 左箭头 -
    -
    .iconjiantou -
    + +
    左箭头
    +
    #iconjiantou
    • - +
  • - -
    - 左箭头 -
    -
    .iconjiantou-copy-copy -
    + +
    左箭头
    +
    #iconjiantou-copy-copy
    • - +
-

font-class 引用

-
- -

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

-

与 Unicode 使用方式相比，具有如下特点：

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

使用步骤如下：

-

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

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

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

-
<span class="iconfont iconxxx"></span>
-
-
-

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

-
-
-
-
-
    - -
  • - -
    excel
    -
    #iconexcel
    -
    • - -
  • - -
    保存
    -
    #iconbaocun
    -
    • - -
  • - -
    关 闭
    -
    #iconguanbi
    -
    • - -
  • - -
    pdf
    -
    #iconpdf
    -
    • - -
  • - -
    复制
    -
    #iconfuzhi
    -
    • - -
  • - -
    020空心饼图
    -
    #icon020kongxinbingtu
    -
    • - -
  • - -
    时间
    -
    #iconshijian
    -
    • - -
  • - -
    保存
    -
    #iconsave
    -
    • - -
  • - -
    图片
    -
    #icontupian
    -
    • - -
  • - -
    柱状图
    -
    #iconzhuzhuangtu
    -
    • - -
  • - -
    超链接
    -
    #iconchaolianjie
    -
    • - -
  • - -
    文本
    -
    #iconziyuan
    -
    • - -
  • - -
    视频
    -
    #iconshipin
    -
    • - -
  • - -
    框架
    -
    #iconkuangjia
    -
    • - -
  • - -
    预览
    -
    #iconyulan
    -
    • - -
  • - -
    横向文字
    -
    #iconhengxiangwenzi
    -
    • - -
  • - -
    图表 _饼图
    -
    #iconicon_tubiao_bingtu
    -
    • - -
  • - -
    漏斗图
    -
    #iconloudoutu
    -
    • - -
  • - -
    图表 折线图
    -
    #icontubiaozhexiantu
    -
    • - -
  • - -
    柱线图
    -
    #iconzhuxiantu
    -
    • - -
  • - -
    图片
    -
    #icontupian1
    -
    • - -
  • - -
    仪表盘
    -
    #iconyibiaopan
    -
    • - -
  • - -
    返回
    -
    #icon1
    -
    • - -
  • - -
    下载
    -
    #iconxiazai
    -
    • - -
  • - -
    下载
    -
    #icon11-04
    -
    • - -
  • - -
    邮箱
    -
    #iconyouxiang
    -
    • - -
  • - -
    绑定手机
    -
    #iconbangdingshouji
    -
    • - -
  • - -
    手机
    -
    #iconshouji
    -
    • - -
  • - -
    52-手机
    -
    #icon52-shouji
    -
    • - -
  • - -
    home
    -
    #iconhome
    -
    • - -
  • - -
    home
    -
    #iconhome2
    -
    • - -
  • - -
    Kafka
    -
    #iconKafka
    -
    • - -
  • - -
    数据接入—Kafka集群
    -
    #iconshujujieruKafkajiqun
    -
    • - -
  • - -
    kafka
    -
    #iconkafka
    -
    • - -
  • - -
    elasticsearch-Elasticsearch
    -
    #iconelasticsearch-Elasticsearch
    -
    • - -
  • - -
    apachekafka
    -
    #iconapachekafka
    -
    • - -
  • - -
    elasticsearch
    -
    #iconelasticsearch
    -
    • - -
  • - -
    问题反馈
    -
    #iconwentifankui
    -
    • - -
  • - -
    问题反馈
    -
    #iconwentifankui1
    -
    • - -
  • - -
    问题反馈
    -
    #iconwentifankui2
    -
    • - -
  • - -
    alikafka 消息队列Kafka
    -
    #iconalikafkaxiaoxiduilieKafka
    -
    • - -
  • - -
    项目查询-查看设备
    -
    #iconxiangmuchaxun-chakanshebei
    -
    • - -
  • - -
    elasticsearch Elasticsearch
    -
    #iconelasticsearchElasticsearch
    -
    • - -
  • - -
    511统计_树图
    -
    #icon511tongji_shutu
    -
    • - -
  • - -
    分享
    -
    #iconfenxiang1
    -
    • - -
  • - -
    分享
    -
    #iconfenxiang2
    -
    • - -
  • - -
    分享
    -
    #iconfenxiang_2
    -
    • - -
  • - -
    告警-紧急
    -
    #iconNMStubiao-
    -
    • - -
  • - -
    完成安全事件
    -
    #iconwanchenganquanshijian
    -
    • - -
  • - -
    eventbridge 消息事件总线
    -
    #iconeventbridgexiaoxishijianzongxian
    -
    • - -
  • - -
    树
    -
    #iconshu
    -
    • - -
  • - -
    设备关机
    -
    #iconshebeiguanji
    -
    • - -
  • - -
    好房拓 4.0.0 iconfont_短信
    -
    #iconhaofangtuo400iconfontduanxin
    -
    • - -
  • - -
    业务参数
    -
    #iconnavicon-ywcs
    -
    • - -
  • - -
    列表
    -
    #iconliebiao
    -
    • - -
  • - -
    编辑
    -
    #iconbianji
    -
    • - -
  • - -
    邮件
    -
    #iconyoujian
    -
    • - -
  • - -
    社交钉钉
    -
    #iconshejiaodingding
    -
    • - -
  • - -
    字典管理
    -
    #iconzidianguanli
    -
    • - -
  • - -
    图表
    -
    #icontubiao
    -
    • - -
  • - -
    钉钉
    -
    #icondingding
    -
    • - -
  • - -
    短信
    -
    #iconduanxin
    -
    • - -
  • - -
    directmail 邮件推送
    -
    #icondirectmailyoujiantuisong
    -
    • - -
  • - -
    设备设施
    -
    #iconshebeisheshi
    -
    • - -
  • - -
    通知
    -
    #icontongzhi
    -
    • - -
  • - -
    日志
    -
    #iconrizhi
    -
    • - -
  • - -
    触发器配置-灰
    -
    #iconchufaqipeizhi-hui
    -
    • - -
  • - -
    vcs 视觉计算服务
    -
    #iconvcsshijuejisuanfuwu
    -
    • - -
  • - -
    设备
    -
    #iconbar_icon_shebei
    -
    • - -
  • - -
    user-before
    -
    #iconuser-before
    -
    • - -
  • - -
    科目维护图标
    -
    #iconkemuweihutubiao
    -
    • - -
  • - -
    会计科目维护
    -
    #iconaccounting-subjects
    -
    • - -
  • - -
    成本查询
    -
    #iconRectangleCopy
    -
    • - -
  • - -
    成本数据管理
    -
    #iconchengbenshujuguanli
    -
    • - -
  • - -
    基本数据
    -
    #iconjibenshuju
    -
    • - -
  • - -
    B-省市区
    -
    #iconB-shengshiqu
    -
    • - -
  • - -
    组织机构
    -
    #iconzuzhijigou
    -
    • - -
  • - -
    按钮
    -
    #iconanniu
    -
    • - -
  • - -
    菜单
    -
    #iconcaidan2
    -
    • - -
  • - -
    问号
    -
    #iconwenhao
    -
    • - -
  • - -
    垃圾桶
    -
    #iconlajitong
    -
    • - -
  • - -
    重置密码
    -
    #iconzhongzhimima
    -
    • - -
  • - -
    设置
    -
    #iconshezhi
    -
    • - -
  • - -
    中转
    -
    #iconzhongzhuan
    -
    • - -
  • - -
    add
    -
    #iconadd
    -
    • - -
  • - -
    minus
    -
    #iconminus
    -
    • - -
  • - -
    password
    -
    #iconpassword
    -
    • - -
  • - -
    用户
    -
    #iconyonghu
    -
    • - -
  • - -
    权限
    -
    #iconquanxian
    -
    • - -
  • - -
    角色
    -
    #iconjiaose1
    -
    • - -
  • - -
    字典
    -
    #iconzidian
    -
    • - -
  • - -
    参数设置
    -
    #iconcssz
    -
    • - -
  • - -
    编辑
    -
    #iconbianji1
    -
    • - -
  • - -
    用户权限
    -
    #icondfzq-
    -
    • - -
  • - -
    分享
    -
    #iconfenxiang
    -
    • - -
  • - -
    授权
    -
    #iconshouquan1
    -
    • - -
  • - -
    左箭头
    -
    #iconjiantou
    -
    • - -
  • - -
    左箭头
    -
    #iconjiantou-copy-copy
    -
    • - -
-

Symbol 引用

@@ -2396,10 +2425,10 @@

使用步骤如下：

第一步：引入项目下面生成的 symbol 代码：

-
<script src="./iconfont.js"></script>
+          
<script src="./iconfont.js"></script>
 

           
第二步：加入通用 CSS 代码（引入一次就行）：

-
<style>
+          
<style>
 .icon {
   width: 1em;
   height: 1em;
@@ -2410,17 +2439,17 @@
 </style>
 

           
第三步：挑选相应图标并获取类名，应用于页面：

-
<svg class="icon" aria-hidden="true">
+          
<svg class="icon" aria-hidden="true">
   <use xlink:href="#icon-xxx"></use>
 </svg>
 

-
+
- + + \ No newline at end of file diff --git a/report-ui/src/assets/iconfont/iconfont.css b/report-ui/src/assets/iconfont/iconfont.css index 7a608502..9f6da5da 100644 --- a/report-ui/src/assets/iconfont/iconfont.css +++ b/report-ui/src/assets/iconfont/iconfont.css @@ -1,8 +1,8 @@ @font-face { font-family: "iconfont"; /* Project id 1513211 */ - src: url('iconfont.woff2?t=1624608582557') format('woff2'), - url('iconfont.woff?t=1624608582557') format('woff'), - url('iconfont.ttf?t=1624608582557') format('truetype'); + src: url('iconfont.woff2?t=1624613153423') format('woff2'), + url('iconfont.woff?t=1624613153423') format('woff'), + url('iconfont.ttf?t=1624613153423') format('truetype'); } .iconfont { @@ -13,6 +13,10 @@ -moz-osx-font-smoothing: grayscale; } +.iconzhankai:before { + content: "\e631"; +} + .iconexcel:before { content: "\e650"; } diff --git a/report-ui/src/assets/iconfont/iconfont.js b/report-ui/src/assets/iconfont/iconfont.js index 7c9e4783..025f4e70 100644 --- a/report-ui/src/assets/iconfont/iconfont.js +++ b/report-ui/src/assets/iconfont/iconfont.js @@ -1 +1 @@ -!function(c){var l,h,a,i,z,o,m='',t=(t=document.getElementsByTagName("script"))[t.length-1].getAttribute("data-injectcss");if(t&&!c.__iconfont__svg__cssinject__){c.__iconfont__svg__cssinject__=!0;try{document.write("")}catch(c){console&&console.log(c)}}function s(){z||(z=!0,a())}l=function(){var c,l,h;(h=document.createElement("div")).innerHTML=m,m=null,(l=h.getElementsByTagName("svg")[0])&&(l.setAttribute("aria-hidden","true"),l.style.position="absolute",l.style.width=0,l.style.height=0,l.style.overflow="hidden",c=l,(h=document.body).firstChild?(l=h.firstChild).parentNode.insertBefore(c,l):h.appendChild(c))},document.addEventListener?~["complete","loaded","interactive"].indexOf(document.readyState)?setTimeout(l,0):(h=function(){document.removeEventListener("DOMContentLoaded",h,!1),l()},document.addEventListener("DOMContentLoaded",h,!1)):document.attachEvent&&(a=l,i=c.document,z=!1,(o=function(){try{i.documentElement.doScroll("left")}catch(c){return void setTimeout(o,50)}s()})(),i.onreadystatechange=function(){"complete"==i.readyState&&(i.onreadystatechange=null,s())})}(window); \ No newline at end of file +!function(c){var l,h,a,i,z,o,m='',t=(t=document.getElementsByTagName("script"))[t.length-1].getAttribute("data-injectcss");if(t&&!c.__iconfont__svg__cssinject__){c.__iconfont__svg__cssinject__=!0;try{document.write("")}catch(c){console&&console.log(c)}}function s(){z||(z=!0,a())}l=function(){var c,l,h;(h=document.createElement("div")).innerHTML=m,m=null,(l=h.getElementsByTagName("svg")[0])&&(l.setAttribute("aria-hidden","true"),l.style.position="absolute",l.style.width=0,l.style.height=0,l.style.overflow="hidden",c=l,(h=document.body).firstChild?(l=h.firstChild).parentNode.insertBefore(c,l):h.appendChild(c))},document.addEventListener?~["complete","loaded","interactive"].indexOf(document.readyState)?setTimeout(l,0):(h=function(){document.removeEventListener("DOMContentLoaded",h,!1),l()},document.addEventListener("DOMContentLoaded",h,!1)):document.attachEvent&&(a=l,i=c.document,z=!1,(o=function(){try{i.documentElement.doScroll("left")}catch(c){return void setTimeout(o,50)}s()})(),i.onreadystatechange=function(){"complete"==i.readyState&&(i.onreadystatechange=null,s())})}(window); \ No newline at end of file diff --git a/report-ui/src/assets/iconfont/iconfont.json b/report-ui/src/assets/iconfont/iconfont.json index 2438e14f..01b92a33 100644 --- a/report-ui/src/assets/iconfont/iconfont.json +++ b/report-ui/src/assets/iconfont/iconfont.json @@ -5,6 +5,13 @@ "css_prefix_text": "icon", "description": "", "glyphs": [ + { + "icon_id": "11990084", + "name": "展 开 ", + "font_class": "zhankai", + "unicode": "e631", + "unicode_decimal": 58929 + }, { "icon_id": "1990758", "name": "excel", diff --git a/report-ui/src/assets/iconfont/iconfont.ttf b/report-ui/src/assets/iconfont/iconfont.ttf index 8febfcda..0a84cbd1 100644 Binary files a/report-ui/src/assets/iconfont/iconfont.ttf and b/report-ui/src/assets/iconfont/iconfont.ttf differ diff --git a/report-ui/src/assets/iconfont/iconfont.woff b/report-ui/src/assets/iconfont/iconfont.woff index 948a2030..f0e1c3fa 100644 Binary files a/report-ui/src/assets/iconfont/iconfont.woff and b/report-ui/src/assets/iconfont/iconfont.woff differ diff --git a/report-ui/src/assets/iconfont/iconfont.woff2 b/report-ui/src/assets/iconfont/iconfont.woff2 index 8ded7e59..ac4c1685 100644 Binary files a/report-ui/src/assets/iconfont/iconfont.woff2 and b/report-ui/src/assets/iconfont/iconfont.woff2 differ diff --git a/report-ui/src/views/report/bigscreen/designer/index.vue b/report-ui/src/views/report/bigscreen/designer/index.vue index 2cb712a9..6a70d747 100644 --- a/report-ui/src/views/report/bigscreen/designer/index.vue +++ b/report-ui/src/views/report/bigscreen/designer/index.vue @@ -44,7 +44,7 @@
- +