first commit

This commit is contained in:
2026-01-16 14:13:44 +08:00
commit 903ff8d495
34603 changed files with 8585054 additions and 0 deletions

View File

@ -0,0 +1,27 @@
@font-face {
font-family: "iconfont"; /* Project id 3288638 */
src: url('iconfont.woff2?t=1648612866190') format('woff2'),
url('iconfont.woff?t=1648612866190') format('woff'),
url('iconfont.ttf?t=1648612866190') format('truetype');
}
.iconfont {
font-family: "iconfont" !important;
font-size: 16px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.icon-baoyang:before {
content: "\e7ee";
}
.icon-weixiu:before {
content: "\e7f2";
}
.icon-xunjian:before {
content: "\e614";
}

View File

@ -0,0 +1 @@
!function(e){var t,n,c,o,i,l='<svg><symbol id="icon-baoyang" viewBox="0 0 1024 1024"><path d="M265.9 63.8c-14.7 0-26 11.3-26 26v55.3h184V89.7c0-13.5-11.3-26-26-26 0.1 0.1-132 0.1-132 0.1zM752.5 958c38.4 0 70-30.5 70-68.9V500.7c0-27.1-14.7-57.6-32.7-71.1L489.4 203.8c-11.3-9-24.8-12.4-40.6-12.4h-210c-20.3 0-37.3 15.8-37.3 36.1v663.9c0 38.4 31.6 68.9 70 68.9h481V958zM409.3 705.1c0 32.7-27.1 58.7-59.8 58.7s-59.8-26-59.8-58.7c0-26 12.4-58.7 59.8-158.1 47.3 100.5 59.8 133.2 59.8 158.1z m307.1-236c18.1 13.5 20.3 37.3 6.8 55.3-7.9 10.2-19.2 14.7-31.6 14.7-9 0-16.9-2.3-24.8-7.9L452.2 369.7c-18.1-13.5-20.3-37.3-6.8-55.3 13.5-16.9 38.4-20.3 56.5-6.8l214.5 161.5z" fill="" ></path></symbol><symbol id="icon-weixiu" viewBox="0 0 1024 1024"><path d="M872.28416 731.70944l-214.09792-211.3536c13.06624-31.72352 20.21376-66.49856 20.21376-102.85056C678.4 266.15808 554.06592 143.36 400.5888 143.36c-48.20992 0-93.51168 12.14464-133.07904 33.3824l158.55616 156.4672a26.56256 26.56256 0 0 1 0 37.92896l-72.45824 71.49568a27.4432 27.4432 0 0 1-38.44096 0l-158.45376-156.3648A269.80352 269.80352 0 0 0 122.88 417.5872c0 151.3472 124.33408 274.14528 277.8112 274.14528 42.57792 0 82.80064-9.46176 118.8864-26.33728l210.04288 207.2576c38.44096 37.94944 101.21216 37.94944 139.65312 0l3.09248-3.05152a96.95232 96.95232 0 0 0-0.08192-137.89184z" ></path></symbol><symbol id="icon-xunjian" viewBox="0 0 1024 1024"><path d="M401.92 625.152c1.536 2.56 3.584 4.608 4.608 5.632 40.448 48.64 80.896 81.408 82.944 82.432l28.16 22.528 28.16-22.528c1.536-1.536 42.496-34.304 82.432-82.944 1.536-1.536 3.072-3.584 4.608-6.144 57.344-74.752 129.024-183.296 145.408-277.504 3.072-21.504 3.072-34.304 3.072-35.84 0.512-70.144-27.648-136.192-78.848-185.856-49.664-47.616-115.712-74.24-185.344-74.24-69.632 0-135.168 26.112-184.832 74.24C280.576 175.104 252.416 241.664 252.928 312.32c0 1.024 0 14.336 3.072 34.304 17.408 100.864 98.304 217.088 145.92 278.528z m115.712-406.528c66.048 0 119.296 51.712 119.296 115.712s-53.76 115.712-119.296 115.712c-66.048 0-119.296-51.712-119.296-115.712s53.248-115.712 119.296-115.712z" ></path><path d="M884.736 779.776H139.264c-20.992 0-37.376-14.848-37.376-31.744 0-16.896 15.872-31.744 37.376-31.744H256c17.92 0 32.768-14.336 32.768-32.256s-14.848-32.768-32.768-32.256H139.264c-56.32 0-102.4 42.496-102.4 96.256s46.592 96.256 102.4 96.256h745.472c20.992 0 37.376 14.848 37.376 31.744 0 16.896-15.872 31.744-37.376 31.744H232.448c-17.92 0-32.768 14.336-32.768 32.256s14.848 32.768 32.768 32.256h652.288c56.32 0 102.4-42.496 102.4-96.256 0.512-53.76-46.08-96.256-102.4-96.256z" ></path></symbol></svg>',a=(a=document.getElementsByTagName("script"))[a.length-1].getAttribute("data-injectcss"),d=function(e,t){t.parentNode.insertBefore(e,t)};if(a&&!e.__iconfont__svg__cssinject__){e.__iconfont__svg__cssinject__=!0;try{document.write("<style>.svgfont {display: inline-block;width: 1em;height: 1em;fill: currentColor;vertical-align: -0.1em;font-size:16px;}</style>")}catch(e){console&&console.log(e)}}function s(){i||(i=!0,c())}function r(){try{o.documentElement.doScroll("left")}catch(e){return void setTimeout(r,50)}s()}t=function(){var e,t=document.createElement("div");t.innerHTML=l,l=null,(t=t.getElementsByTagName("svg")[0])&&(t.setAttribute("aria-hidden","true"),t.style.position="absolute",t.style.width=0,t.style.height=0,t.style.overflow="hidden",t=t,(e=document.body).firstChild?d(t,e.firstChild):e.appendChild(t))},document.addEventListener?~["complete","loaded","interactive"].indexOf(document.readyState)?setTimeout(t,0):(n=function(){document.removeEventListener("DOMContentLoaded",n,!1),t()},document.addEventListener("DOMContentLoaded",n,!1)):document.attachEvent&&(c=t,o=e.document,i=!1,r(),o.onreadystatechange=function(){"complete"==o.readyState&&(o.onreadystatechange=null,s())})}(window);

View File

@ -0,0 +1,30 @@
{
"id": "3288638",
"name": "ShaKou",
"font_family": "iconfont",
"css_prefix_text": "icon-",
"description": "",
"glyphs": [
{
"icon_id": "6129336",
"name": "290保养、加油",
"font_class": "baoyang",
"unicode": "e7ee",
"unicode_decimal": 59374
},
{
"icon_id": "7791034",
"name": "维修",
"font_class": "weixiu",
"unicode": "e7f2",
"unicode_decimal": 59378
},
{
"icon_id": "11435450",
"name": "巡检",
"font_class": "xunjian",
"unicode": "e614",
"unicode_decimal": 58900
}
]
}

Binary file not shown.

Binary file not shown.

Binary file not shown.

View File

@ -0,0 +1,539 @@
/* 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;
}

View File

@ -0,0 +1,441 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>iconfont Demo</title>
<link rel="shortcut icon" href="//img.alicdn.com/imgextra/i2/O1CN01ZyAlrn1MwaMhqz36G_!!6000000001499-73-tps-64-64.ico" type="image/x-icon"/>
<link rel="icon" type="image/svg+xml" href="//img.alicdn.com/imgextra/i4/O1CN01EYTRnJ297D6vehehJ_!!6000000008020-55-tps-64-64.svg"/>
<link rel="stylesheet" href="https://g.alicdn.com/thx/cube/1.3.2/cube.min.css">
<link rel="stylesheet" href="demo.css">
<link rel="stylesheet" href="iconfont.css">
<script src="iconfont.js"></script>
<!-- jQuery -->
<script src="https://a1.alicdn.com/oss/uploads/2018/12/26/7bfddb60-08e8-11e9-9b04-53e73bb6408b.js"></script>
<!-- 代码高亮 -->
<script src="https://a1.alicdn.com/oss/uploads/2018/12/26/a3f714d0-08e6-11e9-8a15-ebf944d7534c.js"></script>
<style>
.main .logo {
margin-top: 0;
height: auto;
}
.main .logo a {
display: flex;
align-items: center;
}
.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;
}
</style>
</head>
<body>
<div class="main">
<h1 class="logo"><a href="https://www.iconfont.cn/" title="iconfont 首页" target="_blank">
<img width="200" src="https://img.alicdn.com/imgextra/i3/O1CN01Mn65HV1FfSEzR6DKv_!!6000000000514-55-tps-228-59.svg">
</a></h1>
<div class="nav-tabs">
<ul id="tabs" class="dib-box">
<li class="dib active"><span>Unicode</span></li>
<li class="dib"><span>Font class</span></li>
<li class="dib"><span>Symbol</span></li>
</ul>
<a href="https://www.iconfont.cn/manage/index?manage_type=myprojects&projectId=2901530" target="_blank" class="nav-more">查看项目</a>
</div>
<div class="tab-container">
<div class="content unicode" style="display: block;">
<ul class="icon_lists dib-box">
<li class="dib">
<span class="icon iconfont">&#xe619;</span>
<div class="name">水泵</div>
<div class="code-name">&amp;#xe619;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe61a;</span>
<div class="name">巡检处理人员</div>
<div class="code-name">&amp;#xe61a;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe61b;</span>
<div class="name">消息</div>
<div class="code-name">&amp;#xe61b;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe61c;</span>
<div class="name">设备用电报表</div>
<div class="code-name">&amp;#xe61c;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe61d;</span>
<div class="name">预测</div>
<div class="code-name">&amp;#xe61d;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe613;</span>
<div class="name">报警</div>
<div class="code-name">&amp;#xe613;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe614;</span>
<div class="name">财务</div>
<div class="code-name">&amp;#xe614;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe615;</span>
<div class="name">二次供水</div>
<div class="code-name">&amp;#xe615;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe616;</span>
<div class="name">分析</div>
<div class="code-name">&amp;#xe616;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe617;</span>
<div class="name">工单报表</div>
<div class="code-name">&amp;#xe617;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe618;</span>
<div class="name">工艺分析</div>
<div class="code-name">&amp;#xe618;</div>
</li>
</ul>
<div class="article markdown">
<h2 id="unicode-">Unicode 引用</h2>
<hr>
<p>Unicode 是字体在网页端最原始的应用方式,特点是:</p>
<ul>
<li>支持按字体的方式去动态调整图标大小,颜色等等。</li>
<li>默认情况下不支持多色,直接添加多色图标会自动去色。</li>
</ul>
<blockquote>
<p>注意:新版 iconfont 支持两种方式引用多色图标SVG symbol 引用方式和彩色字体图标模式。(使用彩色字体图标需要在「编辑项目」中开启「彩色」选项后并重新生成。)</p>
</blockquote>
<p>Unicode 使用步骤如下:</p>
<h3 id="-font-face">第一步:拷贝项目下面生成的 <code>@font-face</code></h3>
<pre><code class="language-css"
>@font-face {
font-family: 'iconfont';
src: url('iconfont.woff2?t=1635494515590') format('woff2'),
url('iconfont.woff?t=1635494515590') format('woff'),
url('iconfont.ttf?t=1635494515590') format('truetype');
}
</code></pre>
<h3 id="-iconfont-">第二步:定义使用 iconfont 的样式</h3>
<pre><code class="language-css"
>.iconfont {
font-family: "iconfont" !important;
font-size: 16px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
</code></pre>
<h3 id="-">第三步:挑选相应图标并获取字体编码,应用于页面</h3>
<pre>
<code class="language-html"
>&lt;span class="iconfont"&gt;&amp;#x33;&lt;/span&gt;
</code></pre>
<blockquote>
<p>"iconfont" 是你项目下的 font-family。可以通过编辑项目查看默认是 "iconfont"。</p>
</blockquote>
</div>
</div>
<div class="content font-class">
<ul class="icon_lists dib-box">
<li class="dib">
<span class="icon iconfont icon-shuibeng"></span>
<div class="name">
水泵
</div>
<div class="code-name">.icon-shuibeng
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-xunjianchulirenyuan"></span>
<div class="name">
巡检处理人员
</div>
<div class="code-name">.icon-xunjianchulirenyuan
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-xiaoxi"></span>
<div class="name">
消息
</div>
<div class="code-name">.icon-xiaoxi
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-shebeiyongdianbaobiao"></span>
<div class="name">
设备用电报表
</div>
<div class="code-name">.icon-shebeiyongdianbaobiao
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-yuce"></span>
<div class="name">
预测
</div>
<div class="code-name">.icon-yuce
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-baojing"></span>
<div class="name">
报警
</div>
<div class="code-name">.icon-baojing
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-caiwu"></span>
<div class="name">
财务
</div>
<div class="code-name">.icon-caiwu
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-ercigongshui"></span>
<div class="name">
二次供水
</div>
<div class="code-name">.icon-ercigongshui
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-fenxi"></span>
<div class="name">
分析
</div>
<div class="code-name">.icon-fenxi
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-gongdanbaobiao"></span>
<div class="name">
工单报表
</div>
<div class="code-name">.icon-gongdanbaobiao
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-gongyifenxi"></span>
<div class="name">
工艺分析
</div>
<div class="code-name">.icon-gongyifenxi
</div>
</li>
</ul>
<div class="article markdown">
<h2 id="font-class-">font-class 引用</h2>
<hr>
<p>font-class 是 Unicode 使用方式的一种变种,主要是解决 Unicode 书写不直观,语意不明确的问题。</p>
<p>与 Unicode 使用方式相比,具有如下特点:</p>
<ul>
<li>相比于 Unicode 语意明确,书写更直观。可以很容易分辨这个 icon 是什么。</li>
<li>因为使用 class 来定义图标,所以当要替换图标时,只需要修改 class 里面的 Unicode 引用。</li>
</ul>
<p>使用步骤如下:</p>
<h3 id="-fontclass-">第一步:引入项目下面生成的 fontclass 代码:</h3>
<pre><code class="language-html">&lt;link rel="stylesheet" href="./iconfont.css"&gt;
</code></pre>
<h3 id="-">第二步:挑选相应图标并获取类名,应用于页面:</h3>
<pre><code class="language-html">&lt;span class="iconfont icon-xxx"&gt;&lt;/span&gt;
</code></pre>
<blockquote>
<p>"
iconfont" 是你项目下的 font-family。可以通过编辑项目查看默认是 "iconfont"。</p>
</blockquote>
</div>
</div>
<div class="content symbol">
<ul class="icon_lists dib-box">
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-shuibeng"></use>
</svg>
<div class="name">水泵</div>
<div class="code-name">#icon-shuibeng</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-xunjianchulirenyuan"></use>
</svg>
<div class="name">巡检处理人员</div>
<div class="code-name">#icon-xunjianchulirenyuan</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-xiaoxi"></use>
</svg>
<div class="name">消息</div>
<div class="code-name">#icon-xiaoxi</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-shebeiyongdianbaobiao"></use>
</svg>
<div class="name">设备用电报表</div>
<div class="code-name">#icon-shebeiyongdianbaobiao</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-yuce"></use>
</svg>
<div class="name">预测</div>
<div class="code-name">#icon-yuce</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-baojing"></use>
</svg>
<div class="name">报警</div>
<div class="code-name">#icon-baojing</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-caiwu"></use>
</svg>
<div class="name">财务</div>
<div class="code-name">#icon-caiwu</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-ercigongshui"></use>
</svg>
<div class="name">二次供水</div>
<div class="code-name">#icon-ercigongshui</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-fenxi"></use>
</svg>
<div class="name">分析</div>
<div class="code-name">#icon-fenxi</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-gongdanbaobiao"></use>
</svg>
<div class="name">工单报表</div>
<div class="code-name">#icon-gongdanbaobiao</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-gongyifenxi"></use>
</svg>
<div class="name">工艺分析</div>
<div class="code-name">#icon-gongyifenxi</div>
</li>
</ul>
<div class="article markdown">
<h2 id="symbol-">Symbol 引用</h2>
<hr>
<p>这是一种全新的使用方式,应该说这才是未来的主流,也是平台目前推荐的用法。相关介绍可以参考这篇<a href="">文章</a>
这种用法其实是做了一个 SVG 的集合,与另外两种相比具有如下特点:</p>
<ul>
<li>支持多色图标了,不再受单色限制。</li>
<li>通过一些技巧,支持像字体那样,通过 <code>font-size</code>, <code>color</code> 来调整样式。</li>
<li>兼容性较差,支持 IE9+,及现代浏览器。</li>
<li>浏览器渲染 SVG 的性能一般,还不如 png。</li>
</ul>
<p>使用步骤如下:</p>
<h3 id="-symbol-">第一步:引入项目下面生成的 symbol 代码:</h3>
<pre><code class="language-html">&lt;script src="./iconfont.js"&gt;&lt;/script&gt;
</code></pre>
<h3 id="-css-">第二步:加入通用 CSS 代码(引入一次就行):</h3>
<pre><code class="language-html">&lt;style&gt;
.icon {
width: 1em;
height: 1em;
vertical-align: -0.15em;
fill: currentColor;
overflow: hidden;
}
&lt;/style&gt;
</code></pre>
<h3 id="-">第三步:挑选相应图标并获取类名,应用于页面:</h3>
<pre><code class="language-html">&lt;svg class="icon" aria-hidden="true"&gt;
&lt;use xlink:href="#icon-xxx"&gt;&lt;/use&gt;
&lt;/svg&gt;
</code></pre>
</div>
</div>
</div>
</div>
<script>
$(document).ready(function () {
$('.tab-container .content:first').show()
$('#tabs li').click(function (e) {
var tabContent = $('.tab-container .content')
var index = $(this).index()
if ($(this).hasClass('active')) {
return
} else {
$('#tabs li').removeClass('active')
$(this).addClass('active')
tabContent.hide().eq(index).fadeIn()
}
})
})
</script>
</body>
</html>

View File

@ -0,0 +1,59 @@
@font-face {
font-family: "iconfont"; /* Project id 2901530 */
src: url('iconfont.woff2?t=1635494515590') format('woff2'),
url('iconfont.woff?t=1635494515590') format('woff'),
url('iconfont.ttf?t=1635494515590') format('truetype');
}
.iconfont {
font-family: "iconfont" !important;
font-size: 16px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.icon-shuibeng:before {
content: "\e619";
}
.icon-xunjianchulirenyuan:before {
content: "\e61a";
}
.icon-xiaoxi:before {
content: "\e61b";
}
.icon-shebeiyongdianbaobiao:before {
content: "\e61c";
}
.icon-yuce:before {
content: "\e61d";
}
.icon-baojing:before {
content: "\e613";
}
.icon-caiwu:before {
content: "\e614";
}
.icon-ercigongshui:before {
content: "\e615";
}
.icon-fenxi:before {
content: "\e616";
}
.icon-gongdanbaobiao:before {
content: "\e617";
}
.icon-gongyifenxi:before {
content: "\e618";
}

File diff suppressed because one or more lines are too long

View File

@ -0,0 +1,86 @@
{
"id": "2901530",
"name": "ZengCheng",
"font_family": "iconfont",
"css_prefix_text": "icon-",
"description": "增城首页",
"glyphs": [
{
"icon_id": "25288042",
"name": "水泵",
"font_class": "shuibeng",
"unicode": "e619",
"unicode_decimal": 58905
},
{
"icon_id": "25288044",
"name": "巡检处理人员",
"font_class": "xunjianchulirenyuan",
"unicode": "e61a",
"unicode_decimal": 58906
},
{
"icon_id": "25288045",
"name": "消息",
"font_class": "xiaoxi",
"unicode": "e61b",
"unicode_decimal": 58907
},
{
"icon_id": "25288046",
"name": "设备用电报表",
"font_class": "shebeiyongdianbaobiao",
"unicode": "e61c",
"unicode_decimal": 58908
},
{
"icon_id": "25288047",
"name": "预测",
"font_class": "yuce",
"unicode": "e61d",
"unicode_decimal": 58909
},
{
"icon_id": "25288025",
"name": "报警",
"font_class": "baojing",
"unicode": "e613",
"unicode_decimal": 58899
},
{
"icon_id": "25288026",
"name": "财务",
"font_class": "caiwu",
"unicode": "e614",
"unicode_decimal": 58900
},
{
"icon_id": "25288027",
"name": "二次供水",
"font_class": "ercigongshui",
"unicode": "e615",
"unicode_decimal": 58901
},
{
"icon_id": "25288028",
"name": "分析",
"font_class": "fenxi",
"unicode": "e616",
"unicode_decimal": 58902
},
{
"icon_id": "25288029",
"name": "工单报表",
"font_class": "gongdanbaobiao",
"unicode": "e617",
"unicode_decimal": 58903
},
{
"icon_id": "25288036",
"name": "工艺分析",
"font_class": "gongyifenxi",
"unicode": "e618",
"unicode_decimal": 58904
}
]
}

Binary file not shown.

Binary file not shown.

Binary file not shown.

View File

@ -0,0 +1,19 @@
@font-face {
font-family: "iconfont"; /* Project id 4203559 */
src: url('iconfont.woff2?t=1691561277743') format('woff2'),
url('iconfont.woff?t=1691561277743') format('woff'),
url('iconfont.ttf?t=1691561277743') format('truetype');
}
.iconfont {
font-family: "iconfont" !important;
font-size: 16px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.icon-pump:before {
content: "\e606";
}

View File

@ -0,0 +1 @@
window._iconfont_svg_string_4203559='<svg><symbol id="icon-pump" viewBox="0 0 1024 1024"><path d="M315.733333 51.2C261.688889 82.488889 187.733333 150.755556 150.755556 204.8 105.244444 267.377778 85.333333 338.488889 85.333333 418.133333c0 68.266667 14.222222 150.755556 31.288889 184.888889 17.066667 36.977778 59.733333 93.866667 93.866667 130.844445 56.888889 62.577778 56.888889 68.266667 11.377778 147.911111-28.444444 48.355556-51.2 99.555556-51.2 113.777778 0 17.066667 133.688889 28.444444 341.333333 28.444444s341.333333-11.377778 341.333333-28.444444c0-14.222222-22.755556-65.422222-51.2-113.777778-45.511111-79.644444-45.511111-85.333333 11.377778-147.911111 34.133333-36.977778 76.8-93.866667 93.866667-128 17.066667-36.977778 31.288889-110.933333 31.288889-164.977778s-17.066667-142.222222-36.977778-193.422222C881.777778 199.111111 819.2 125.155556 765.155556 85.333333 708.266667 45.511111 617.244444 14.222222 540.444444 5.688889c-91.022222-5.688889-156.444444 8.533333-224.711111 45.511111z" ></path></symbol></svg>',function(n){var t=(t=document.getElementsByTagName("script"))[t.length-1],e=t.getAttribute("data-injectcss"),t=t.getAttribute("data-disable-injectsvg");if(!t){var o,i,c,d,s,a=function(t,e){e.parentNode.insertBefore(t,e)};if(e&&!n.__iconfont__svg__cssinject__){n.__iconfont__svg__cssinject__=!0;try{document.write("<style>.svgfont {display: inline-block;width: 1em;height: 1em;fill: currentColor;vertical-align: -0.1em;font-size:16px;}</style>")}catch(t){console&&console.log(t)}}o=function(){var t,e=document.createElement("div");e.innerHTML=n._iconfont_svg_string_4203559,(e=e.getElementsByTagName("svg")[0])&&(e.setAttribute("aria-hidden","true"),e.style.position="absolute",e.style.width=0,e.style.height=0,e.style.overflow="hidden",e=e,(t=document.body).firstChild?a(e,t.firstChild):t.appendChild(e))},document.addEventListener?~["complete","loaded","interactive"].indexOf(document.readyState)?setTimeout(o,0):(i=function(){document.removeEventListener("DOMContentLoaded",i,!1),o()},document.addEventListener("DOMContentLoaded",i,!1)):document.attachEvent&&(c=o,d=n.document,s=!1,r(),d.onreadystatechange=function(){"complete"==d.readyState&&(d.onreadystatechange=null,l())})}function l(){s||(s=!0,c())}function r(){try{d.documentElement.doScroll("left")}catch(t){return void setTimeout(r,50)}l()}}(window);

View File

@ -0,0 +1,16 @@
{
"id": "4203559",
"name": "HQAQ",
"font_family": "iconfont",
"css_prefix_text": "icon-",
"description": "",
"glyphs": [
{
"icon_id": "36839632",
"name": "pump",
"font_class": "pump",
"unicode": "e606",
"unicode_decimal": 58886
}
]
}

Binary file not shown.

Binary file not shown.

Binary file not shown.