diff --git a/web/src/assets/icon-font/demo.css b/web/src/assets/icon-font/demo.css
index 54f3c06c..a67054a0 100644
--- a/web/src/assets/icon-font/demo.css
+++ b/web/src/assets/icon-font/demo.css
@@ -1,19 +1,15 @@
/* Logo 字体 */
@font-face {
- font-family: 'iconfont logo';
+ font-family: "iconfont logo";
src: url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834');
- src: url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834#iefix')
- format('embedded-opentype'),
- url('https://at.alicdn.com/t/font_985780_km7mi63cihi.woff?t=1545807318834')
- format('woff'),
- url('https://at.alicdn.com/t/font_985780_km7mi63cihi.ttf?t=1545807318834')
- format('truetype'),
- url('https://at.alicdn.com/t/font_985780_km7mi63cihi.svg?t=1545807318834#iconfont')
- format('svg');
+ src: url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834#iefix') format('embedded-opentype'),
+ url('https://at.alicdn.com/t/font_985780_km7mi63cihi.woff?t=1545807318834') format('woff'),
+ url('https://at.alicdn.com/t/font_985780_km7mi63cihi.ttf?t=1545807318834') format('truetype'),
+ url('https://at.alicdn.com/t/font_985780_km7mi63cihi.svg?t=1545807318834#iconfont') format('svg');
}
.logo {
- font-family: 'iconfont logo';
+ font-family: "iconfont logo";
font-size: 160px;
font-style: normal;
-webkit-font-smoothing: antialiased;
@@ -52,6 +48,7 @@
color: #666;
}
+
#tabs .active {
border-bottom-color: #f00;
color: #222;
@@ -218,35 +215,35 @@
margin: 1em 0;
}
-.markdown > p,
-.markdown > blockquote,
-.markdown > .highlight,
-.markdown > ol,
-.markdown > ul {
+.markdown>p,
+.markdown>blockquote,
+.markdown>.highlight,
+.markdown>ol,
+.markdown>ul {
width: 80%;
}
-.markdown ul > li {
+.markdown ul>li {
list-style: circle;
}
-.markdown > ul li,
-.markdown blockquote ul > li {
+.markdown>ul li,
+.markdown blockquote ul>li {
margin-left: 20px;
padding-left: 4px;
}
-.markdown > ul li p,
-.markdown > ol li p {
+.markdown>ul li p,
+.markdown>ol li p {
margin: 0.6em 0;
}
-.markdown ol > li {
+.markdown ol>li {
list-style: decimal;
}
-.markdown > ol li,
-.markdown blockquote ol > li {
+.markdown>ol li,
+.markdown blockquote ol>li {
margin-left: 20px;
padding-left: 4px;
}
@@ -263,7 +260,7 @@
font-weight: 600;
}
-.markdown > table {
+.markdown>table {
border-collapse: collapse;
border-spacing: 0px;
empty-cells: show;
@@ -272,21 +269,21 @@
margin-bottom: 24px;
}
-.markdown > table th {
+.markdown>table th {
white-space: nowrap;
color: #333;
font-weight: 600;
}
-.markdown > table th,
-.markdown > table td {
+.markdown>table th,
+.markdown>table td {
border: 1px solid #e9e9e9;
padding: 8px 16px;
text-align: left;
}
-.markdown > table th {
- background: #f7f7f7;
+.markdown>table th {
+ background: #F7F7F7;
}
.markdown blockquote {
@@ -321,11 +318,12 @@
display: inline-block;
}
-.markdown > br,
-.markdown > p > br {
+.markdown>br,
+.markdown>p>br {
clear: both;
}
+
.hljs {
display: block;
background: white;
@@ -401,8 +399,8 @@ https://prismjs.com/download.html#themes=prism&languages=markup+css+clike+javasc
* Based on dabblet (http://dabblet.com)
* @author Lea Verou
*/
-code[class*='language-'],
-pre[class*='language-'] {
+code[class*="language-"],
+pre[class*="language-"] {
color: black;
background: none;
text-shadow: 0 1px white;
@@ -424,45 +422,46 @@ pre[class*='language-'] {
hyphens: none;
}
-pre[class*='language-']::-moz-selection,
-pre[class*='language-'] ::-moz-selection,
-code[class*='language-']::-moz-selection,
-code[class*='language-'] ::-moz-selection {
+pre[class*="language-"]::-moz-selection,
+pre[class*="language-"] ::-moz-selection,
+code[class*="language-"]::-moz-selection,
+code[class*="language-"] ::-moz-selection {
text-shadow: none;
background: #b3d4fc;
}
-pre[class*='language-']::selection,
-pre[class*='language-'] ::selection,
-code[class*='language-']::selection,
-code[class*='language-'] ::selection {
+pre[class*="language-"]::selection,
+pre[class*="language-"] ::selection,
+code[class*="language-"]::selection,
+code[class*="language-"] ::selection {
text-shadow: none;
background: #b3d4fc;
}
@media print {
- code[class*='language-'],
- pre[class*='language-'] {
+
+ code[class*="language-"],
+ pre[class*="language-"] {
text-shadow: none;
}
}
/* Code blocks */
-pre[class*='language-'] {
+pre[class*="language-"] {
padding: 1em;
- margin: 0.5em 0;
+ margin: .5em 0;
overflow: auto;
}
-:not(pre) > code[class*='language-'],
-pre[class*='language-'] {
+:not(pre)>code[class*="language-"],
+pre[class*="language-"] {
background: #f5f2f0;
}
/* Inline code */
-:not(pre) > code[class*='language-'] {
- padding: 0.1em;
- border-radius: 0.3em;
+:not(pre)>code[class*="language-"] {
+ padding: .1em;
+ border-radius: .3em;
white-space: normal;
}
@@ -478,7 +477,7 @@ pre[class*='language-'] {
}
.namespace {
- opacity: 0.7;
+ opacity: .7;
}
.token.property,
@@ -506,7 +505,7 @@ pre[class*='language-'] {
.language-css .token.string,
.style .token.string {
color: #9a6e3a;
- background: hsla(0, 0%, 100%, 0.5);
+ background: hsla(0, 0%, 100%, .5);
}
.token.atrule,
@@ -517,7 +516,7 @@ pre[class*='language-'] {
.token.function,
.token.class-name {
- color: #dd4a68;
+ color: #DD4A68;
}
.token.regex,
diff --git a/web/src/assets/icon-font/demo_index.html b/web/src/assets/icon-font/demo_index.html
index d1d52fef..90c0ab8d 100644
--- a/web/src/assets/icon-font/demo_index.html
+++ b/web/src/assets/icon-font/demo_index.html
@@ -1,368 +1,354 @@
-
-
- iconfont Demo
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - Unicode
- - Font class
- - Symbol
-
-
-
查看项目
-
-
-
+ .main .logo .sub-title {
+ margin-left: 0.5em;
+ font-size: 22px;
+ color: #fff;
+ background: linear-gradient(-45deg, #3967FF, #B500FE);
+ -webkit-background-clip: text;
+ -webkit-text-fill-color: transparent;
+ }
+
+
+
+
+
+
+
+ - Unicode
+ - Font class
+ - Symbol
+
+
+
查看项目
+
+
+
+
+
+ -
+
+
选择
+ 
+
+
+ -
+
+
主题
+ 
+
+
-
-
导出
- 
-
-
+ 导出
+ 
+
+
-
-
另存为
- 
-
-
+ 另存为
+ 
+
+
-
-
export
- 
-
-
+ export
+ 
+
+
-
-
打开
- 
-
-
+ 打开
+ 
+
+
-
-
新建
- 
-
-
+ 新建
+ 
+
+
-
-
剪切
- 
-
-
+ 剪切
+ 
+
+
-
-
整理
- 
-
-
+ 整理
+ 
+
+
-
-
复制
- 
-
-
+ 复制
+ 
+
+
-
-
粘贴
- 
-
-
+ 粘贴
+ 
+
+
-
-
上移
- 
-
-
+ 上移
+ 
+
+
-
-
下移
- 
-
-
+ 下移
+ 
+
+
-
-
概括总览
- 
-
-
+ 概括总览
+ 
+
+
-
-
全选
- 
-
-
+ 全选
+ 
+
+
-
-
导入
- 
-
-
+ 导入
+ 
+
+
-
-
后退-实
- 
-
-
+ 后退-实
+ 
+
+
-
-
前进
- 
-
-
+ 前进
+ 
+
+
-
-
撤回
- 
-
-
+ 撤回
+ 
+
+
-
-
前进
- 
-
-
+ 前进
+ 
+
+
-
-
恢复默认
- 
-
-
+ 恢复默认
+ 
+
+
-
-
换行
- 
-
-
+ 换行
+ 
+
+
-
-
缩小
- 
-
-
+ 缩小
+ 
+
+
-
-
编辑
- 
-
-
+ 编辑
+ 
+
+
-
-
放大
- 
-
-
+ 放大
+ 
+
+
-
-
全屏
- 
-
-
+ 全屏
+ 
+
+
-
-
定位
- 
-
-
+ 定位
+ 
+
+
-
-
导航
- 
-
-
+ 导航
+ 
+
+
-
-
键盘
- 
-
-
+ 键盘
+ 
+
+
-
-
全屏
- 
-
-
+ 全屏
+ 
+
+
-
-
导出
- 
-
-
+ 导出
+ 
+
+
-
-
标签
- 
-
-
+ 标签
+ 
+
+
-
-
流程-备注
- 
-
-
+ 流程-备注
+ 
+
+
-
-
超链接
- 
-
-
+ 超链接
+ 
+
+
-
-
主题
- 
-
-
+ 主题
+ 
+
+
-
-
笑脸
- 
-
-
+ 笑脸
+ 
+
+
-
-
图 片
- 
-
-
+ 图 片
+ 
+
+
-
-
结构
- 
-
-
+ 结构
+ 
+
+
-
-
样式
- 
-
-
+ 样式
+ 
+
+
-
-
符号-大纲树
- 
-
-
+ 符号-大纲树
+ 
+
+
-
-
添加子节点
- 
-
-
+ 添加子节点
+ 
+
+
-
-
节点
- 
-
-
+ 节点
+ 
+
+
-
-
删 除
- 
-
-
+ 删 除
+ 
+
+
-
-
HTSCIT_展开
- 
-
-
+ HTSCIT_展开
+ 
+
+
-
-
HTSCIT_展开2
- 
-
+ HTSCIT_展开2
+ 
+
+
-
Unicode 引用
-
+
Unicode 引用
+
-
Unicode 是字体在网页端最原始的应用方式,特点是:
-
- - 支持按字体的方式去动态调整图标大小,颜色等等。
- - 默认情况下不支持多色,直接添加多色图标会自动去色。
-
-
-
- 注意:新版 iconfont 支持两种方式引用多色图标:SVG symbol
- 引用方式和彩色字体图标模式。(使用彩色字体图标需要在「编辑项目」中开启「彩色」选项后并重新生成。)
-
-
-
Unicode 使用步骤如下:
-
- 第一步:拷贝项目下面生成的 @font-face
-
-
Unicode 是字体在网页端最原始的应用方式,特点是:
+
+ - 支持按字体的方式去动态调整图标大小,颜色等等。
+ - 默认情况下不支持多色,直接添加多色图标会自动去色。
+
+
+ 注意:新版 iconfont 支持两种方式引用多色图标:SVG symbol 引用方式和彩色字体图标模式。(使用彩色字体图标需要在「编辑项目」中开启「彩色」选项后并重新生成。)
+
+ Unicode 使用步骤如下:
+ 第一步:拷贝项目下面生成的 @font-face
+@font-face {
font-family: 'iconfont';
- src: url('iconfont.woff2?t=1664005697217') format('woff2'),
- url('iconfont.woff?t=1664005697217') format('woff'),
- url('iconfont.ttf?t=1664005697217') format('truetype');
+ src: url('iconfont.woff2?t=1668512547595') format('woff2'),
+ url('iconfont.woff?t=1668512547595') format('woff'),
+ url('iconfont.ttf?t=1668512547595') format('truetype');
}
- 第二步:定义使用 iconfont 的样式
- 第二步:定义使用 iconfont 的样式
+.iconfont {
font-family: "iconfont" !important;
font-size: 16px;
@@ -371,773 +357,830 @@
-moz-osx-font-smoothing: grayscale;
}
- 第三步:挑选相应图标并获取字体编码,应用于页面
-
+ 第三步:挑选相应图标并获取字体编码,应用于页面
+
<span class="iconfont">3</span>
-
-
- "iconfont" 是你项目下的
- font-family。可以通过编辑项目查看,默认是 "iconfont"。
-
-
+
+ "iconfont" 是你项目下的 font-family。可以通过编辑项目查看,默认是 "iconfont"。
+
-
-
+
+
+
+
+ -
+
+
+ 选择
+
+ .iconchoose1
+
+
+
+ -
+
+
+ 主题
+
+ .iconzhuti
+
+
+
+ -
+
+
+ 导出
+
+ .icondaochu1
+
+
+
+ -
+
+
+ 另存为
+
+ .iconlingcunwei
+
+
+
+ -
+
+
+ export
+
+ .iconexport
+
+
+
+ -
+
+
+ 打开
+
+ .icondakai
+
+
+
+ -
+
+
+ 新建
+
+ .iconxinjian
+
+
+
+ -
+
+
+ 剪切
+
+ .iconjianqie
+
+
+
+ -
+
+
+ 整理
+
+ .iconzhengli
+
+
+
+ -
+
+
+ 复制
+
+ .iconfuzhi
+
+
+
+ -
+
+
+ 粘贴
+
+ .iconniantie
+
+
+
+ -
+
+
+ 上移
+
+ .iconshangyi
+
+
+
+ -
+
+
+ 下移
+
+ .iconxiayi
+
+
+
+ -
+
+
+ 概括总览
+
+ .icongaikuozonglan
+
+
+
+ -
+
+
+ 全选
+
+ .iconquanxuan
+
+
+
+ -
+
+
+ 导入
+
+ .icondaoru
+
+
+
+ -
+
+
+ 后退-实
+
+ .iconhoutui-shi
+
+
+
+ -
+
+
+ 前进
+
+ .iconqianjin1
+
+
+
+ -
+
+
+ 撤回
+
+ .iconwithdraw
+
+
+
+ -
+
+
+ 前进
+
+ .iconqianjin
+
+
+
+ -
+
+
+ 恢复默认
+
+ .iconhuifumoren
+
+
+
+ -
+
+
+ 换行
+
+ .iconhuanhang
+
+
+
+ -
+
+
+ 缩小
+
+ .iconsuoxiao
+
+
+
+ -
+
+
+ 编辑
+
+ .iconbianji
+
+
+
+ -
+
+
+ 放大
+
+ .iconfangda
+
+
+
+ -
+
+
+ 全屏
+
+ .iconquanping1
+
+
+
+ -
+
+
+ 定位
+
+ .icondingwei
+
+
+
+ -
+
+
+ 导航
+
+ .icondaohang
+
+
+
+ -
+
+
+ 键盘
+
+ .iconjianpan
+
+
+
+ -
+
+
+ 全屏
+
+ .iconquanping
+
+
+
+ -
+
+
+ 导出
+
+ .icondaochu
+
+
+
+ -
+
+
+ 标签
+
+ .iconbiaoqian
+
+
+
+ -
+
+
+ 流程-备注
+
+ .iconflow-Mark
+
+
+
+ -
+
+
+ 超链接
+
+ .iconchaolianjie
+
+
+
+ -
+
+
+ 主题
+
+ .iconjingzi
+
+
+
+ -
+
+
+ 笑脸
+
+ .iconxiaolian
+
+
+
+ -
+
+
+ 图 片
+
+ .iconimage
+
+
+
+ -
+
+
+ 结构
+
+ .iconjiegou
+
+
+
+ -
+
+
+ 样式
+
+ .iconyangshi
+
+
+
+ -
+
+
+ 符号-大纲树
+
+ .iconfuhao-dagangshu
+
+
+
+ -
+
+
+ 添加子节点
+
+ .icontianjiazijiedian
+
+
+
+ -
+
+
+ 节点
+
+ .iconjiedian
+
+
+
+ -
+
+
+ 删 除
+
+ .iconshanchu
+
+
+
+ -
+
+
+ HTSCIT_展开
+
+ .iconzhankai
+
+
+
+ -
+
+
+ HTSCIT_展开2
+
+ .iconzhankai1
+
+
+
+
+
+
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"。
+
+
+
+
+
-
-
-
- 导出
-
- .icondaochu1
+
+ 选择
+ #iconchoose1
-
+
-
-
-
- 另存为
-
- .iconlingcunwei
+
+ 主题
+ #iconzhuti
-
+
-
-
-
- export
-
- .iconexport
+
+ 导出
+ #icondaochu1
-
+
-
-
-
- 打开
-
- .icondakai
+
+ 另存为
+ #iconlingcunwei
-
+
-
-
-
- 新建
-
- .iconxinjian
+
+ export
+ #iconexport
-
+
-
-
-
- 剪切
-
- .iconjianqie
+
+ 打开
+ #icondakai
-
+
-
-
-
- 整理
-
- .iconzhengli
+
+ 新建
+ #iconxinjian
-
+
-
-
-
- 复制
-
- .iconfuzhi
+
+ 剪切
+ #iconjianqie
-
+
-
-
-
- 粘贴
-
- .iconniantie
+
+ 整理
+ #iconzhengli
-
+
-
-
-
- 上移
-
- .iconshangyi
+
+ 复制
+ #iconfuzhi
-
+
-
-
-
- 下移
-
- .iconxiayi
+
+ 粘贴
+ #iconniantie
-
+
-
-
-
- 概括总览
-
- .icongaikuozonglan
+
+ 上移
+ #iconshangyi
-
+
-
-
-
- 全选
-
- .iconquanxuan
+
+ 下移
+ #iconxiayi
-
+
-
-
-
- 导入
-
- .icondaoru
+
+ 概括总览
+ #icongaikuozonglan
-
+
-
-
-
- 后退-实
-
- .iconhoutui-shi
+
+ 全选
+ #iconquanxuan
-
+
-
-
-
- 前进
-
- .iconqianjin1
+
+ 导入
+ #icondaoru
-
+
-
-
-
- 撤回
-
- .iconwithdraw
+
+ 后退-实
+ #iconhoutui-shi
-
+
-
-
-
- 前进
-
- .iconqianjin
+
+ 前进
+ #iconqianjin1
-
+
-
-
-
- 恢复默认
-
- .iconhuifumoren
+
+ 撤回
+ #iconwithdraw
-
+
-
-
-
- 换行
-
- .iconhuanhang
+
+ 前进
+ #iconqianjin
-
+
-
-
-
- 缩小
-
- .iconsuoxiao
+
+ 恢复默认
+ #iconhuifumoren
-
+
-
-
-
- 编辑
-
- .iconbianji
+
+ 换行
+ #iconhuanhang
-
+
-
-
-
- 放大
-
- .iconfangda
+
+ 缩小
+ #iconsuoxiao
-
+
-
-
-
- 全屏
-
- .iconquanping1
+
+ 编辑
+ #iconbianji
-
+
-
-
-
- 定位
-
- .icondingwei
+
+ 放大
+ #iconfangda
-
+
-
-
-
- 导航
-
- .icondaohang
+
+ 全屏
+ #iconquanping1
-
+
-
-
-
- 键盘
-
- .iconjianpan
+
+ 定位
+ #icondingwei
-
+
-
-
-
- 全屏
-
- .iconquanping
+
+ 导航
+ #icondaohang
-
+
-
-
-
- 导出
-
- .icondaochu
+
+ 键盘
+ #iconjianpan
-
+
-
-
-
- 标签
-
- .iconbiaoqian
+
+ 全屏
+ #iconquanping
-
+
-
-
-
- 流程-备注
-
- .iconflow-Mark
+
+ 导出
+ #icondaochu
-
+
-
-
-
- 超链接
-
- .iconchaolianjie
+
+ 标签
+ #iconbiaoqian
-
+
-
-
-
- 主题
-
- .iconjingzi
+
+ 流程-备注
+ #iconflow-Mark
-
+
-
-
-
- 笑脸
-
- .iconxiaolian
+
+ 超链接
+ #iconchaolianjie
-
+
-
-
-
- 图 片
-
- .iconimage
+
+ 主题
+ #iconjingzi
-
+
-
-
-
- 结构
-
- .iconjiegou
+
+ 笑脸
+ #iconxiaolian
-
+
-
-
-
- 样式
-
- .iconyangshi
+
+ 图 片
+ #iconimage
-
+
-
-
-
- 符号-大纲树
-
- .iconfuhao-dagangshu
+
+ 结构
+ #iconjiegou
-
+
-
-
-
- 添加子节点
-
- .icontianjiazijiedian
+
+ 样式
+ #iconyangshi
-
+
-
-
-
- 节点
-
- .iconjiedian
+
+ 符号-大纲树
+ #iconfuhao-dagangshu
-
+
-
-
-
- 删 除
-
- .iconshanchu
+
+ 添加子节点
+ #icontianjiazijiedian
-
+
-
-
-
- HTSCIT_展开
-
- .iconzhankai
+
+ 节点
+ #iconjiedian
-
+
-
-
-
- HTSCIT_展开2
-
- .iconzhankai1
+
+ 删 除
+ #iconshanchu
+
+ -
+
+
HTSCIT_展开
+ #iconzhankai
+
+
+ -
+
+
HTSCIT_展开2
+ #iconzhankai1
+
+
-
font-class 引用
-
+
Symbol 引用
+
-
- 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"。
-
-
-
-
-
-
- -
-
-
导出
- #icondaochu1
-
-
- -
-
-
另存为
- #iconlingcunwei
-
-
- -
-
-
export
- #iconexport
-
-
- -
-
-
打开
- #icondakai
-
-
- -
-
-
新建
- #iconxinjian
-
-
- -
-
-
剪切
- #iconjianqie
-
-
- -
-
-
整理
- #iconzhengli
-
-
- -
-
-
复制
- #iconfuzhi
-
-
- -
-
-
粘贴
- #iconniantie
-
-
- -
-
-
上移
- #iconshangyi
-
-
- -
-
-
下移
- #iconxiayi
-
-
- -
-
-
概括总览
- #icongaikuozonglan
-
-
- -
-
-
全选
- #iconquanxuan
-
-
- -
-
-
导入
- #icondaoru
-
-
- -
-
-
后退-实
- #iconhoutui-shi
-
-
- -
-
-
前进
- #iconqianjin1
-
-
- -
-
-
撤回
- #iconwithdraw
-
-
- -
-
-
前进
- #iconqianjin
-
-
- -
-
-
恢复默认
- #iconhuifumoren
-
-
- -
-
-
换行
- #iconhuanhang
-
-
- -
-
-
缩小
- #iconsuoxiao
-
-
- -
-
-
编辑
- #iconbianji
-
-
- -
-
-
放大
- #iconfangda
-
-
- -
-
-
全屏
- #iconquanping1
-
-
- -
-
-
定位
- #icondingwei
-
-
- -
-
-
导航
- #icondaohang
-
-
- -
-
-
键盘
- #iconjianpan
-
-
- -
-
-
全屏
- #iconquanping
-
-
- -
-
-
导出
- #icondaochu
-
-
- -
-
-
标签
- #iconbiaoqian
-
-
- -
-
-
流程-备注
- #iconflow-Mark
-
-
- -
-
-
超链接
- #iconchaolianjie
-
-
- -
-
-
主题
- #iconjingzi
-
-
- -
-
-
笑脸
- #iconxiaolian
-
-
- -
-
-
图 片
- #iconimage
-
-
- -
-
-
结构
- #iconjiegou
-
-
- -
-
-
样式
- #iconyangshi
-
-
- -
-
-
符号-大纲树
- #iconfuhao-dagangshu
-
-
- -
-
-
添加子节点
- #icontianjiazijiedian
-
-
- -
-
-
节点
- #iconjiedian
-
-
- -
-
-
删 除
- #iconshanchu
-
-
- -
-
-
HTSCIT_展开
- #iconzhankai
-
-
- -
-
-
HTSCIT_展开2
- #iconzhankai1
-
+ 这是一种全新的使用方式,应该说这才是未来的主流,也是平台目前推荐的用法。相关介绍可以参考这篇文章
+ 这种用法其实是做了一个 SVG 的集合,与另外两种相比具有如下特点:
+
+ - 支持多色图标了,不再受单色限制。
+ - 通过一些技巧,支持像字体那样,通过
font-size, color 来调整样式。
+ - 兼容性较差,支持 IE9+,及现代浏览器。
+ - 浏览器渲染 SVG 的性能一般,还不如 png。
-
-
Symbol 引用
-
-
-
- 这是一种全新的使用方式,应该说这才是未来的主流,也是平台目前推荐的用法。相关介绍可以参考这篇文章
- 这种用法其实是做了一个 SVG 的集合,与另外两种相比具有如下特点:
-
-
- - 支持多色图标了,不再受单色限制。
- -
- 通过一些技巧,支持像字体那样,通过
font-size,
- color 来调整样式。
-
- - 兼容性较差,支持 IE9+,及现代浏览器。
- - 浏览器渲染 SVG 的性能一般,还不如 png。
-
-
使用步骤如下:
-
第一步:引入项目下面生成的 symbol 代码:
-
<script src="./iconfont.js"></script>
+ 使用步骤如下:
+ 第一步:引入项目下面生成的 symbol 代码:
+<script src="./iconfont.js"></script>
- 第二步:加入通用 CSS 代码(引入一次就行):
- <style>
+ 第二步:加入通用 CSS 代码(引入一次就行):
+<style>
.icon {
width: 1em;
height: 1em;
@@ -1147,36 +1190,34 @@
}
</style>
- 第三步:挑选相应图标并获取类名,应用于页面:
- <svg class="icon" aria-hidden="true">
+ 第三步:挑选相应图标并获取类名,应用于页面:
+<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-xxx"></use>
</svg>
-
+
-
-
+ })
+
+