diff --git a/web/src/assets/icon-font/demo.css b/web/src/assets/icon-font/demo.css deleted file mode 100644 index a67054a0..00000000 --- a/web/src/assets/icon-font/demo.css +++ /dev/null @@ -1,539 +0,0 @@ -/* Logo 字体 */ -@font-face { - 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'); -} - -.logo { - font-family: "iconfont logo"; - font-size: 160px; - font-style: normal; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; -} - -/* tabs */ -.nav-tabs { - position: relative; -} - -.nav-tabs .nav-more { - position: absolute; - right: 0; - bottom: 0; - height: 42px; - line-height: 42px; - color: #666; -} - -#tabs { - border-bottom: 1px solid #eee; -} - -#tabs li { - cursor: pointer; - width: 100px; - height: 40px; - line-height: 40px; - text-align: center; - font-size: 16px; - border-bottom: 2px solid transparent; - position: relative; - z-index: 1; - margin-bottom: -1px; - color: #666; -} - - -#tabs .active { - border-bottom-color: #f00; - color: #222; -} - -.tab-container .content { - display: none; -} - -/* 页面布局 */ -.main { - padding: 30px 100px; - width: 960px; - margin: 0 auto; -} - -.main .logo { - color: #333; - text-align: left; - margin-bottom: 30px; - line-height: 1; - height: 110px; - margin-top: -50px; - overflow: hidden; - *zoom: 1; -} - -.main .logo a { - font-size: 160px; - color: #333; -} - -.helps { - margin-top: 40px; -} - -.helps pre { - padding: 20px; - margin: 10px 0; - border: solid 1px #e7e1cd; - background-color: #fffdef; - overflow: auto; -} - -.icon_lists { - width: 100% !important; - overflow: hidden; - *zoom: 1; -} - -.icon_lists li { - width: 100px; - margin-bottom: 10px; - margin-right: 20px; - text-align: center; - list-style: none !important; - cursor: default; -} - -.icon_lists li .code-name { - line-height: 1.2; -} - -.icon_lists .icon { - display: block; - height: 100px; - line-height: 100px; - font-size: 42px; - margin: 10px auto; - color: #333; - -webkit-transition: font-size 0.25s linear, width 0.25s linear; - -moz-transition: font-size 0.25s linear, width 0.25s linear; - transition: font-size 0.25s linear, width 0.25s linear; -} - -.icon_lists .icon:hover { - font-size: 100px; -} - -.icon_lists .svg-icon { - /* 通过设置 font-size 来改变图标大小 */ - width: 1em; - /* 图标和文字相邻时，垂直对齐 */ - vertical-align: -0.15em; - /* 通过设置 color 来改变 SVG 的颜色/fill */ - fill: currentColor; - /* path 和 stroke 溢出 viewBox 部分在 IE 下会显示 - normalize.css 中也包含这行 */ - overflow: hidden; -} - -.icon_lists li .name, -.icon_lists li .code-name { - color: #666; -} - -/* markdown 样式 */ -.markdown { - color: #666; - font-size: 14px; - line-height: 1.8; -} - -.highlight { - line-height: 1.5; -} - -.markdown img { - vertical-align: middle; - max-width: 100%; -} - -.markdown h1 { - color: #404040; - font-weight: 500; - line-height: 40px; - margin-bottom: 24px; -} - -.markdown h2, -.markdown h3, -.markdown h4, -.markdown h5, -.markdown h6 { - color: #404040; - margin: 1.6em 0 0.6em 0; - font-weight: 500; - clear: both; -} - -.markdown h1 { - font-size: 28px; -} - -.markdown h2 { - font-size: 22px; -} - -.markdown h3 { - font-size: 16px; -} - -.markdown h4 { - font-size: 14px; -} - -.markdown h5 { - font-size: 12px; -} - -.markdown h6 { - font-size: 12px; -} - -.markdown hr { - height: 1px; - border: 0; - background: #e9e9e9; - margin: 16px 0; - clear: both; -} - -.markdown p { - margin: 1em 0; -} - -.markdown>p, -.markdown>blockquote, -.markdown>.highlight, -.markdown>ol, -.markdown>ul { - width: 80%; -} - -.markdown ul>li { - list-style: circle; -} - -.markdown>ul li, -.markdown blockquote ul>li { - margin-left: 20px; - padding-left: 4px; -} - -.markdown>ul li p, -.markdown>ol li p { - margin: 0.6em 0; -} - -.markdown ol>li { - list-style: decimal; -} - -.markdown>ol li, -.markdown blockquote ol>li { - margin-left: 20px; - padding-left: 4px; -} - -.markdown code { - margin: 0 3px; - padding: 0 5px; - background: #eee; - border-radius: 3px; -} - -.markdown strong, -.markdown b { - font-weight: 600; -} - -.markdown>table { - border-collapse: collapse; - border-spacing: 0px; - empty-cells: show; - border: 1px solid #e9e9e9; - width: 95%; - margin-bottom: 24px; -} - -.markdown>table th { - white-space: nowrap; - color: #333; - font-weight: 600; -} - -.markdown>table th, -.markdown>table td { - border: 1px solid #e9e9e9; - padding: 8px 16px; - text-align: left; -} - -.markdown>table th { - background: #F7F7F7; -} - -.markdown blockquote { - font-size: 90%; - color: #999; - border-left: 4px solid #e9e9e9; - padding-left: 0.8em; - margin: 1em 0; -} - -.markdown blockquote p { - margin: 0; -} - -.markdown .anchor { - opacity: 0; - transition: opacity 0.3s ease; - margin-left: 8px; -} - -.markdown .waiting { - color: #ccc; -} - -.markdown h1:hover .anchor, -.markdown h2:hover .anchor, -.markdown h3:hover .anchor, -.markdown h4:hover .anchor, -.markdown h5:hover .anchor, -.markdown h6:hover .anchor { - opacity: 1; - display: inline-block; -} - -.markdown>br, -.markdown>p>br { - clear: both; -} - - -.hljs { - display: block; - background: white; - padding: 0.5em; - color: #333333; - overflow-x: auto; -} - -.hljs-comment, -.hljs-meta { - color: #969896; -} - -.hljs-string, -.hljs-variable, -.hljs-template-variable, -.hljs-strong, -.hljs-emphasis, -.hljs-quote { - color: #df5000; -} - -.hljs-keyword, -.hljs-selector-tag, -.hljs-type { - color: #a71d5d; -} - -.hljs-literal, -.hljs-symbol, -.hljs-bullet, -.hljs-attribute { - color: #0086b3; -} - -.hljs-section, -.hljs-name { - color: #63a35c; -} - -.hljs-tag { - color: #333333; -} - -.hljs-title, -.hljs-attr, -.hljs-selector-id, -.hljs-selector-class, -.hljs-selector-attr, -.hljs-selector-pseudo { - color: #795da3; -} - -.hljs-addition { - color: #55a532; - background-color: #eaffea; -} - -.hljs-deletion { - color: #bd2c00; - background-color: #ffecec; -} - -.hljs-link { - text-decoration: underline; -} - -/* 代码高亮 */ -/* PrismJS 1.15.0 -https://prismjs.com/download.html#themes=prism&languages=markup+css+clike+javascript */ -/** - * prism.js default theme for JavaScript, CSS and HTML - * Based on dabblet (http://dabblet.com) - * @author Lea Verou - */ -code[class*="language-"], -pre[class*="language-"] { - color: black; - background: none; - text-shadow: 0 1px white; - font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; - text-align: left; - white-space: pre; - word-spacing: normal; - word-break: normal; - word-wrap: normal; - line-height: 1.5; - - -moz-tab-size: 4; - -o-tab-size: 4; - tab-size: 4; - - -webkit-hyphens: none; - -moz-hyphens: none; - -ms-hyphens: none; - hyphens: none; -} - -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 { - text-shadow: none; - background: #b3d4fc; -} - -@media print { - - code[class*="language-"], - pre[class*="language-"] { - text-shadow: none; - } -} - -/* Code blocks */ -pre[class*="language-"] { - padding: 1em; - margin: .5em 0; - overflow: auto; -} - -:not(pre)>code[class*="language-"], -pre[class*="language-"] { - background: #f5f2f0; -} - -/* Inline code */ -:not(pre)>code[class*="language-"] { - padding: .1em; - border-radius: .3em; - white-space: normal; -} - -.token.comment, -.token.prolog, -.token.doctype, -.token.cdata { - color: slategray; -} - -.token.punctuation { - color: #999; -} - -.namespace { - opacity: .7; -} - -.token.property, -.token.tag, -.token.boolean, -.token.number, -.token.constant, -.token.symbol, -.token.deleted { - color: #905; -} - -.token.selector, -.token.attr-name, -.token.string, -.token.char, -.token.builtin, -.token.inserted { - color: #690; -} - -.token.operator, -.token.entity, -.token.url, -.language-css .token.string, -.style .token.string { - color: #9a6e3a; - background: hsla(0, 0%, 100%, .5); -} - -.token.atrule, -.token.attr-value, -.token.keyword { - color: #07a; -} - -.token.function, -.token.class-name { - color: #DD4A68; -} - -.token.regex, -.token.important, -.token.variable { - color: #e90; -} - -.token.important, -.token.bold { - font-weight: bold; -} - -.token.italic { - font-style: italic; -} - -.token.entity { - cursor: help; -} diff --git a/web/src/assets/icon-font/demo_index.html b/web/src/assets/icon-font/demo_index.html deleted file mode 100644 index c3e0317e..00000000 --- a/web/src/assets/icon-font/demo_index.html +++ /dev/null @@ -1,1453 +0,0 @@ - - - - - iconfont Demo - - - - - - - - - - - - - -
-

- - -

-
- - - 查看项目 - -
-
-
-
    - -
  • - -
    背景颜色
    -
    
    -
    • - -
  • - -
    清除
    -
    
    -
    • - -
  • - -
    case
    -
    
    -
    • - -
  • - -
    形状-文字
    -
    
    -
    • - -
  • - -
    字体加粗
    -
    
    -
    • - -
  • - -
    字体下划线
    -
    
    -
    • - -
  • - -
    字体斜体
    -
    
    -
    • - -
  • - -
    删除线
    -
    
    -
    • - -
  • - -
    字体颜色
    -
    
    -
    • - -
  • - -
    github
    -
    
    -
    • - -
  • - -
    选择
    -
    
    -
    • - -
  • - -
    主题
    -
    
    -
    • - -
  • - -
    导出
    -
    
    -
    • - -
  • - -
    另存为
    -
    
    -
    • - -
  • - -
    export
    -
    
    -
    • - -
  • - -
    打开
    -
    
    -
    • - -
  • - -
    新建
    -
    
    -
    • - -
  • - -
    剪切
    -
    
    -
    • - -
  • - -
    整理
    -
    
    -
    • - -
  • - -
    复制
    -
    
    -
    • - -
  • - -
    粘贴
    -
    
    -
    • - -
  • - -
    上移
    -
    
    -
    • - -
  • - -
    下移
    -
    
    -
    • - -
  • - -
    概括总览
    -
    
    -
    • - -
  • - -
    全选
    -
    
    -
    • - -
  • - -
    导入
    -
    
    -
    • - -
  • - -
    后退-实
    -
    
    -
    • - -
  • - -
    前进
    -
    
    -
    • - -
  • - -
    撤回
    -
    
    -
    • - -
  • - -
    前进
    -
    
    -
    • - -
  • - -
    恢复默认
    -
    
    -
    • - -
  • - -
    换行
    -
    
    -
    • - -
  • - -
    缩小
    -
    
    -
    • - -
  • - -
    编辑
    -
    
    -
    • - -
  • - -
    放大
    -
    
    -
    • - -
  • - -
    全屏
    -
    
    -
    • - -
  • - -
    定位
    -
    
    -
    • - -
  • - -
    导航
    -
    
    -
    • - -
  • - -
    键盘
    -
    
    -
    • - -
  • - -
    全屏
    -
    
    -
    • - -
  • - -
    导出
    -
    
    -
    • - -
  • - -
    标签
    -
    
    -
    • - -
  • - -
    流程-备注
    -
    
    -
    • - -
  • - -
    超链接
    -
    
    -
    • - -
  • - -
    主题
    -
    
    -
    • - -
  • - -
    笑脸
    -
    
    -
    • - -
  • - -
    图 片
    -
    
    -
    • - -
  • - -
    结构
    -
    
    -
    • - -
  • - -
    样式
    -
    
    -
    • - -
  • - -
    符号-大纲树
    -
    
    -
    • - -
  • - -
    添加子节点
    -
    
    -
    • - -
  • - -
    节点
    -
    
    -
    • - -
  • - -
    删 除
    -
    
    -
    • - -
  • - -
    HTSCIT_展开
    -
    
    -
    • - -
  • - -
    HTSCIT_展开2
    -
    
    -
    • - -
-
-

Unicode 引用

-
- -

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

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

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

-
-

Unicode 使用步骤如下：

-

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

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

-
-
-
-
-
    - -
  • - -
    - 背景颜色 -
    -
    .iconbeijingyanse -
    -
    • - -
  • - -
    - 清除 -
    -
    .iconqingchu -
    -
    • - -
  • - -
    - case -
    -
    .iconcase -
    -
    • - -
  • - -
    - 形状-文字 -
    -
    .iconxingzhuang-wenzi -
    -
    • - -
  • - -
    - 字体加粗 -
    -
    .iconzitijiacu -
    -
    • - -
  • - -
    - 字体下划线 -
    -
    .iconzitixiahuaxian -
    -
    • - -
  • - -
    - 字体斜体 -
    -
    .iconzitixieti -
    -
    • - -
  • - -
    - 删除线 -
    -
    .iconshanchuxian -
    -
    • - -
  • - -
    - 字体颜色 -
    -
    .iconzitiyanse -
    -
    • - -
  • - -
    - github -
    -
    .icongithub -
    -
    • - -
  • - -
    - 选择 -
    -
    .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"。

-
-
-
-
-
    - -
  • - -
    背景颜色
    -
    #iconbeijingyanse
    -
    • - -
  • - -
    清除
    -
    #iconqingchu
    -
    • - -
  • - -
    case
    -
    #iconcase
    -
    • - -
  • - -
    形状-文字
    -
    #iconxingzhuang-wenzi
    -
    • - -
  • - -
    字体加粗
    -
    #iconzitijiacu
    -
    • - -
  • - -
    字体下划线
    -
    #iconzitixiahuaxian
    -
    • - -
  • - -
    字体斜体
    -
    #iconzitixieti
    -
    • - -
  • - -
    删除线
    -
    #iconshanchuxian
    -
    • - -
  • - -
    字体颜色
    -
    #iconzitiyanse
    -
    • - -
  • - -
    github
    -
    #icongithub
    -
    • - -
  • - -
    选择
    -
    #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
    -
    • - -
-
-

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>
-
-
-
- -
-
- - - diff --git a/web/src/assets/icon-font/iconfont.css b/web/src/assets/icon-font/iconfont.css index 6a6a9c7e..93d23309 100644 --- a/web/src/assets/icon-font/iconfont.css +++ b/web/src/assets/icon-font/iconfont.css @@ -1,8 +1,8 @@ @font-face { font-family: "iconfont"; /* Project id 2479351 */ - src: url('iconfont.woff2?t=1677478278322') format('woff2'), - url('iconfont.woff?t=1677478278322') format('woff'), - url('iconfont.ttf?t=1677478278322') format('truetype'); + src: url('iconfont.woff2?t=1678955183884') format('woff2'), + url('iconfont.woff?t=1678955183884') format('woff'), + url('iconfont.ttf?t=1678955183884') format('truetype'); } .iconfont { @@ -13,6 +13,54 @@ -moz-osx-font-smoothing: grayscale; } +.iconlianjiexian:before { + content: "\e75b"; +} + +.iconbangzhu:before { + content: "\e620"; +} + +.iconshezhi:before { + content: "\e8b7"; +} + +.iconwushuju:before { + content: "\e643"; +} + +.iconzuijinliulan:before { + content: "\e62f"; +} + +.icon3zuidahua-3:before { + content: "\e692"; +} + +.iconzuixiaohua:before { + content: "\e650"; +} + +.iconzuidahua:before { + content: "\e651"; +} + +.iconguanbi:before { + content: "\e652"; +} + +.icondiannao:before { + content: "\eac0"; +} + +.iconzhuye:before { + content: "\e65c"; +} + +.iconbendi1x:before { + content: "\e606"; +} + .iconbeijingyanse:before { content: "\e6f8"; } diff --git a/web/src/assets/icon-font/iconfont.js b/web/src/assets/icon-font/iconfont.js deleted file mode 100644 index 155c1ff3..00000000 --- a/web/src/assets/icon-font/iconfont.js +++ /dev/null @@ -1 +0,0 @@ -window._iconfont_svg_string_2479351='',function(l){var c=(c=document.getElementsByTagName("script"))[c.length-1],a=c.getAttribute("data-injectcss"),c=c.getAttribute("data-disable-injectsvg");if(!c){var h,i,t,o,s,z=function(c,a){a.parentNode.insertBefore(c,a)};if(a&&!l.__iconfont__svg__cssinject__){l.__iconfont__svg__cssinject__=!0;try{document.write("")}catch(c){console&&console.log(c)}}h=function(){var c,a=document.createElement("div");a.innerHTML=l._iconfont_svg_string_2479351,(a=a.getElementsByTagName("svg")[0])&&(a.setAttribute("aria-hidden","true"),a.style.position="absolute",a.style.width=0,a.style.height=0,a.style.overflow="hidden",a=a,(c=document.body).firstChild?z(a,c.firstChild):c.appendChild(a))},document.addEventListener?~["complete","loaded","interactive"].indexOf(document.readyState)?setTimeout(h,0):(i=function(){document.removeEventListener("DOMContentLoaded",i,!1),h()},document.addEventListener("DOMContentLoaded",i,!1)):document.attachEvent&&(t=h,o=l.document,s=!1,d(),o.onreadystatechange=function(){"complete"==o.readyState&&(o.onreadystatechange=null,v())})}function v(){s||(s=!0,t())}function d(){try{o.documentElement.doScroll("left")}catch(c){return void setTimeout(d,50)}v()}}(window); \ No newline at end of file diff --git a/web/src/assets/icon-font/iconfont.json b/web/src/assets/icon-font/iconfont.json deleted file mode 100644 index 069c24fb..00000000 --- a/web/src/assets/icon-font/iconfont.json +++ /dev/null @@ -1,394 +0,0 @@ -{ - "id": "2479351", - "name": "思绪", - "font_family": "iconfont", - "css_prefix_text": "icon", - "description": "思维导图", - "glyphs": [ - { - "icon_id": "1790495", - "name": "背景颜色", - "font_class": "beijingyanse", - "unicode": "e6f8", - "unicode_decimal": 59128 - }, - { - "icon_id": "11321310", - "name": "清除", - "font_class": "qingchu", - "unicode": "e605", - "unicode_decimal": 58885 - }, - { - "icon_id": "586787", - "name": "case", - "font_class": "case", - "unicode": "e6c6", - "unicode_decimal": 59078 - }, - { - "icon_id": "4354254", - "name": "形状-文字", - "font_class": "xingzhuang-wenzi", - "unicode": "eb99", - "unicode_decimal": 60313 - }, - { - "icon_id": "6337466", - "name": "字体加粗", - "font_class": "zitijiacu", - "unicode": "ec83", - "unicode_decimal": 60547 - }, - { - "icon_id": "6337470", - "name": "字体下划线", - "font_class": "zitixiahuaxian", - "unicode": "ec85", - "unicode_decimal": 60549 - }, - { - "icon_id": "6337471", - "name": "字体斜体", - "font_class": "zitixieti", - "unicode": "ec86", - "unicode_decimal": 60550 - }, - { - "icon_id": "11975179", - "name": "删除线", - "font_class": "shanchuxian", - "unicode": "e612", - "unicode_decimal": 58898 - }, - { - "icon_id": "34198316", - "name": "字体颜色", - "font_class": "zitiyanse", - "unicode": "e854", - "unicode_decimal": 59476 - }, - { - "icon_id": "8760187", - "name": "github", - "font_class": "github", - "unicode": "e64f", - "unicode_decimal": 58959 - }, - { - "icon_id": "1009019", - "name": "选择", - "font_class": "choose1", - "unicode": "e6c5", - "unicode_decimal": 59077 - }, - { - "icon_id": "493507", - "name": "主题", - "font_class": "zhuti", - "unicode": "e7aa", - "unicode_decimal": 59306 - }, - { - "icon_id": "1305460", - "name": "导出", - "font_class": "daochu1", - "unicode": "e63e", - "unicode_decimal": 58942 - }, - { - "icon_id": "4784101", - "name": "另存为", - "font_class": "lingcunwei", - "unicode": "e657", - "unicode_decimal": 58967 - }, - { - "icon_id": "9929033", - "name": "export", - "font_class": "export", - "unicode": "e642", - "unicode_decimal": 58946 - }, - { - "icon_id": "4570294", - "name": "打开", - "font_class": "dakai", - "unicode": "ebdf", - "unicode_decimal": 60383 - }, - { - "icon_id": "5086088", - "name": "新建", - "font_class": "xinjian", - "unicode": "e64e", - "unicode_decimal": 58958 - }, - { - "icon_id": "1117", - "name": "剪切", - "font_class": "jianqie", - "unicode": "e601", - "unicode_decimal": 58881 - }, - { - "icon_id": "1415523", - "name": "整理", - "font_class": "zhengli", - "unicode": "e83b", - "unicode_decimal": 59451 - }, - { - "icon_id": "2815710", - "name": "复制", - "font_class": "fuzhi", - "unicode": "e604", - "unicode_decimal": 58884 - }, - { - "icon_id": "11121506", - "name": "粘贴", - "font_class": "niantie", - "unicode": "e63f", - "unicode_decimal": 58943 - }, - { - "icon_id": "11383392", - "name": "上移", - "font_class": "shangyi", - "unicode": "e6be", - "unicode_decimal": 59070 - }, - { - "icon_id": "11383396", - "name": "下移", - "font_class": "xiayi", - "unicode": "e6bf", - "unicode_decimal": 59071 - }, - { - "icon_id": "14843439", - "name": "概括总览", - "font_class": "gaikuozonglan", - "unicode": "e609", - "unicode_decimal": 58889 - }, - { - "icon_id": "19738998", - "name": "全选", - "font_class": "quanxuan", - "unicode": "f199", - "unicode_decimal": 61849 - }, - { - "icon_id": "17606306", - "name": "导入", - "font_class": "daoru", - "unicode": "e6a3", - "unicode_decimal": 59043 - }, - { - "icon_id": "5110748", - "name": "后退-实", - "font_class": "houtui-shi", - "unicode": "e656", - "unicode_decimal": 58966 - }, - { - "icon_id": "14420971", - "name": "前进", - "font_class": "qianjin1", - "unicode": "e654", - "unicode_decimal": 58964 - }, - { - "icon_id": "1368553", - "name": "撤回", - "font_class": "withdraw", - "unicode": "e603", - "unicode_decimal": 58883 - }, - { - "icon_id": "15006636", - "name": "前进", - "font_class": "qianjin", - "unicode": "e600", - "unicode_decimal": 58880 - }, - { - "icon_id": "19980541", - "name": "恢复默认", - "font_class": "huifumoren", - "unicode": "e60e", - "unicode_decimal": 58894 - }, - { - "icon_id": "1616783", - "name": "换行", - "font_class": "huanhang", - "unicode": "e61e", - "unicode_decimal": 58910 - }, - { - "icon_id": "4777227", - "name": "缩小", - "font_class": "suoxiao", - "unicode": "ec13", - "unicode_decimal": 60435 - }, - { - "icon_id": "18811980", - "name": "编辑", - "font_class": "bianji", - "unicode": "e626", - "unicode_decimal": 58918 - }, - { - "icon_id": "21188137", - "name": "放大", - "font_class": "fangda", - "unicode": "e663", - "unicode_decimal": 58979 - }, - { - "icon_id": "21189639", - "name": "全屏", - "font_class": "quanping1", - "unicode": "e664", - "unicode_decimal": 58980 - }, - { - "icon_id": "397753", - "name": "定位", - "font_class": "dingwei", - "unicode": "e616", - "unicode_decimal": 58902 - }, - { - "icon_id": "2605158", - "name": "导航", - "font_class": "daohang", - "unicode": "e611", - "unicode_decimal": 58897 - }, - { - "icon_id": "6528451", - "name": "键盘", - "font_class": "jianpan", - "unicode": "e64d", - "unicode_decimal": 58957 - }, - { - "icon_id": "7556170", - "name": "全屏", - "font_class": "quanping", - "unicode": "e602", - "unicode_decimal": 58882 - }, - { - "icon_id": "788015", - "name": "导出", - "font_class": "daochu", - "unicode": "e63d", - "unicode_decimal": 58941 - }, - { - "icon_id": "2678575", - "name": "标签", - "font_class": "biaoqian", - "unicode": "e63c", - "unicode_decimal": 58940 - }, - { - "icon_id": "6265396", - "name": "流程-备注", - "font_class": "flow-Mark", - "unicode": "e65b", - "unicode_decimal": 58971 - }, - { - "icon_id": "1790486", - "name": "超链接", - "font_class": "chaolianjie", - "unicode": "e6f4", - "unicode_decimal": 59124 - }, - { - "icon_id": "4608986", - "name": "主题", - "font_class": "jingzi", - "unicode": "e610", - "unicode_decimal": 58896 - }, - { - "icon_id": "11903017", - "name": "笑脸", - "font_class": "xiaolian", - "unicode": "e60f", - "unicode_decimal": 58895 - }, - { - "icon_id": "19657962", - "name": "图 片", - "font_class": "image", - "unicode": "e629", - "unicode_decimal": 58921 - }, - { - "icon_id": "20784489", - "name": "结构", - "font_class": "jiegou", - "unicode": "e61d", - "unicode_decimal": 58909 - }, - { - "icon_id": "15969341", - "name": "样式", - "font_class": "yangshi", - "unicode": "e631", - "unicode_decimal": 58929 - }, - { - "icon_id": "2967176", - "name": "符号-大纲树", - "font_class": "fuhao-dagangshu", - "unicode": "e71f", - "unicode_decimal": 59167 - }, - { - "icon_id": "12316668", - "name": "添加子节点", - "font_class": "tianjiazijiedian", - "unicode": "e622", - "unicode_decimal": 58914 - }, - { - "icon_id": "14435368", - "name": "节点", - "font_class": "jiedian", - "unicode": "e655", - "unicode_decimal": 58965 - }, - { - "icon_id": "15765352", - "name": "删 除", - "font_class": "shanchu", - "unicode": "e696", - "unicode_decimal": 59030 - }, - { - "icon_id": "9592600", - "name": "HTSCIT_展开", - "font_class": "zhankai", - "unicode": "e64c", - "unicode_decimal": 58956 - }, - { - "icon_id": "9900009", - "name": "HTSCIT_展开2", - "font_class": "zhankai1", - "unicode": "e673", - "unicode_decimal": 58995 - } - ] -} diff --git a/web/src/assets/icon-font/iconfont.ttf b/web/src/assets/icon-font/iconfont.ttf index 6aa6d856..23d59ed9 100644 Binary files a/web/src/assets/icon-font/iconfont.ttf and b/web/src/assets/icon-font/iconfont.ttf differ diff --git a/web/src/assets/icon-font/iconfont.woff b/web/src/assets/icon-font/iconfont.woff index 73584438..56933fdb 100644 Binary files a/web/src/assets/icon-font/iconfont.woff and b/web/src/assets/icon-font/iconfont.woff differ diff --git a/web/src/assets/icon-font/iconfont.woff2 b/web/src/assets/icon-font/iconfont.woff2 index 24726c1c..8ab7141f 100644 Binary files a/web/src/assets/icon-font/iconfont.woff2 and b/web/src/assets/icon-font/iconfont.woff2 differ