mirror of https://gitee.com/godoos/godoos.git
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
2718 lines
90 KiB
2718 lines
90 KiB
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8"/>
|
|
<title>iconfont Demo</title>
|
|
<link rel="shortcut icon" href="//img.alicdn.com/imgextra/i4/O1CN01Z5paLz1O0zuCC7osS_!!6000000001644-55-tps-83-82.svg" type="image/x-icon"/>
|
|
<link rel="icon" type="image/svg+xml" href="//img.alicdn.com/imgextra/i4/O1CN01Z5paLz1O0zuCC7osS_!!6000000001644-55-tps-83-82.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=4412427" 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"></span>
|
|
<div class="name">微信</div>
|
|
<div class="code-name">&#xe626;</div>
|
|
</li>
|
|
|
|
<li class="dib">
|
|
<span class="icon iconfont"></span>
|
|
<div class="name">QQ</div>
|
|
<div class="code-name">&#xe6af;</div>
|
|
</li>
|
|
|
|
<li class="dib">
|
|
<span class="icon iconfont"></span>
|
|
<div class="name">logout</div>
|
|
<div class="code-name">&#xe634;</div>
|
|
</li>
|
|
|
|
<li class="dib">
|
|
<span class="icon iconfont"></span>
|
|
<div class="name">恢复</div>
|
|
<div class="code-name">&#xe676;</div>
|
|
</li>
|
|
|
|
<li class="dib">
|
|
<span class="icon iconfont">𐃂</span>
|
|
<div class="name">workchat</div>
|
|
<div class="code-name">&#x100c2;</div>
|
|
</li>
|
|
|
|
<li class="dib">
|
|
<span class="icon iconfont"></span>
|
|
<div class="name">progress</div>
|
|
<div class="code-name">&#xe625;</div>
|
|
</li>
|
|
|
|
<li class="dib">
|
|
<span class="icon iconfont"></span>
|
|
<div class="name">zip</div>
|
|
<div class="code-name">&#xe623;</div>
|
|
</li>
|
|
|
|
<li class="dib">
|
|
<span class="icon iconfont"></span>
|
|
<div class="name">gz</div>
|
|
<div class="code-name">&#xe8b0;</div>
|
|
</li>
|
|
|
|
<li class="dib">
|
|
<span class="icon iconfont"></span>
|
|
<div class="name">tar</div>
|
|
<div class="code-name">&#xe620;</div>
|
|
</li>
|
|
|
|
<li class="dib">
|
|
<span class="icon iconfont"></span>
|
|
<div class="name">bz2</div>
|
|
<div class="code-name">&#xe65e;</div>
|
|
</li>
|
|
|
|
<li class="dib">
|
|
<span class="icon iconfont"></span>
|
|
<div class="name">chat</div>
|
|
<div class="code-name">&#xe65f;</div>
|
|
</li>
|
|
|
|
<li class="dib">
|
|
<span class="icon iconfont"></span>
|
|
<div class="name">aiassistant</div>
|
|
<div class="code-name">&#xe631;</div>
|
|
</li>
|
|
|
|
<li class="dib">
|
|
<span class="icon iconfont"></span>
|
|
<div class="name">aichat</div>
|
|
<div class="code-name">&#xe780;</div>
|
|
</li>
|
|
|
|
<li class="dib">
|
|
<span class="icon iconfont"></span>
|
|
<div class="name">aitrans</div>
|
|
<div class="code-name">&#xe646;</div>
|
|
</li>
|
|
|
|
<li class="dib">
|
|
<span class="icon iconfont"></span>
|
|
<div class="name">aiknow</div>
|
|
<div class="code-name">&#xe652;</div>
|
|
</li>
|
|
|
|
<li class="dib">
|
|
<span class="icon iconfont"></span>
|
|
<div class="name">airecording</div>
|
|
<div class="code-name">&#xe78c;</div>
|
|
</li>
|
|
|
|
<li class="dib">
|
|
<span class="icon iconfont"></span>
|
|
<div class="name">aispoken</div>
|
|
<div class="code-name">&#xe65d;</div>
|
|
</li>
|
|
|
|
<li class="dib">
|
|
<span class="icon iconfont"></span>
|
|
<div class="name">aisetting</div>
|
|
<div class="code-name">&#xe6ea;</div>
|
|
</li>
|
|
|
|
<li class="dib">
|
|
<span class="icon iconfont"></span>
|
|
<div class="name">aidown</div>
|
|
<div class="code-name">&#xe636;</div>
|
|
</li>
|
|
|
|
<li class="dib">
|
|
<span class="icon iconfont">𐃁</span>
|
|
<div class="name">aicreation</div>
|
|
<div class="code-name">&#x100c1;</div>
|
|
</li>
|
|
|
|
<li class="dib">
|
|
<span class="icon iconfont"></span>
|
|
<div class="name">aisd</div>
|
|
<div class="code-name">&#xe6a3;</div>
|
|
</li>
|
|
|
|
<li class="dib">
|
|
<span class="icon iconfont"></span>
|
|
<div class="name">mp4</div>
|
|
<div class="code-name">&#xe7ac;</div>
|
|
</li>
|
|
|
|
<li class="dib">
|
|
<span class="icon iconfont"></span>
|
|
<div class="name">mp3</div>
|
|
<div class="code-name">&#xe685;</div>
|
|
</li>
|
|
|
|
<li class="dib">
|
|
<span class="icon iconfont"></span>
|
|
<div class="name">link</div>
|
|
<div class="code-name">&#xe668;</div>
|
|
</li>
|
|
|
|
<li class="dib">
|
|
<span class="icon iconfont"></span>
|
|
<div class="name">url</div>
|
|
<div class="code-name">&#xe662;</div>
|
|
</li>
|
|
|
|
<li class="dib">
|
|
<span class="icon iconfont"></span>
|
|
<div class="name">error</div>
|
|
<div class="code-name">&#xe6c7;</div>
|
|
</li>
|
|
|
|
<li class="dib">
|
|
<span class="icon iconfont"></span>
|
|
<div class="name">question</div>
|
|
<div class="code-name">&#xe7b2;</div>
|
|
</li>
|
|
|
|
<li class="dib">
|
|
<span class="icon iconfont"></span>
|
|
<div class="name">warning</div>
|
|
<div class="code-name">&#xe63f;</div>
|
|
</li>
|
|
|
|
<li class="dib">
|
|
<span class="icon iconfont"></span>
|
|
<div class="name">account</div>
|
|
<div class="code-name">&#xe61e;</div>
|
|
</li>
|
|
|
|
<li class="dib">
|
|
<span class="icon iconfont"></span>
|
|
<div class="name">language</div>
|
|
<div class="code-name">&#xe756;</div>
|
|
</li>
|
|
|
|
<li class="dib">
|
|
<span class="icon iconfont"></span>
|
|
<div class="name">system</div>
|
|
<div class="code-name">&#xe62f;</div>
|
|
</li>
|
|
|
|
<li class="dib">
|
|
<span class="icon iconfont"></span>
|
|
<div class="name">personal</div>
|
|
<div class="code-name">&#xe679;</div>
|
|
</li>
|
|
|
|
<li class="dib">
|
|
<span class="icon iconfont"></span>
|
|
<div class="name">image</div>
|
|
<div class="code-name">&#xe70e;</div>
|
|
</li>
|
|
|
|
<li class="dib">
|
|
<span class="icon iconfont"></span>
|
|
<div class="name">video</div>
|
|
<div class="code-name">&#xe758;</div>
|
|
</li>
|
|
|
|
<li class="dib">
|
|
<span class="icon iconfont"></span>
|
|
<div class="name">java</div>
|
|
<div class="code-name">&#xe61c;</div>
|
|
</li>
|
|
|
|
<li class="dib">
|
|
<span class="icon iconfont"></span>
|
|
<div class="name">tsx</div>
|
|
<div class="code-name">&#xe665;</div>
|
|
</li>
|
|
|
|
<li class="dib">
|
|
<span class="icon iconfont"></span>
|
|
<div class="name">py</div>
|
|
<div class="code-name">&#xe80a;</div>
|
|
</li>
|
|
|
|
<li class="dib">
|
|
<span class="icon iconfont"></span>
|
|
<div class="name">vue</div>
|
|
<div class="code-name">&#xe61d;</div>
|
|
</li>
|
|
|
|
<li class="dib">
|
|
<span class="icon iconfont"></span>
|
|
<div class="name">tiff</div>
|
|
<div class="code-name">&#xe6a4;</div>
|
|
</li>
|
|
|
|
<li class="dib">
|
|
<span class="icon iconfont"></span>
|
|
<div class="name">bmp</div>
|
|
<div class="code-name">&#xe61b;</div>
|
|
</li>
|
|
|
|
<li class="dib">
|
|
<span class="icon iconfont"></span>
|
|
<div class="name">bb</div>
|
|
<div class="code-name">&#xe67c;</div>
|
|
</li>
|
|
|
|
<li class="dib">
|
|
<span class="icon iconfont"></span>
|
|
<div class="name">html</div>
|
|
<div class="code-name">&#xe68a;</div>
|
|
</li>
|
|
|
|
<li class="dib">
|
|
<span class="icon iconfont"></span>
|
|
<div class="name">css</div>
|
|
<div class="code-name">&#xe618;</div>
|
|
</li>
|
|
|
|
<li class="dib">
|
|
<span class="icon iconfont"></span>
|
|
<div class="name">xml文件</div>
|
|
<div class="code-name">&#xe619;</div>
|
|
</li>
|
|
|
|
<li class="dib">
|
|
<span class="icon iconfont"></span>
|
|
<div class="name">flow</div>
|
|
<div class="code-name">&#xe61a;</div>
|
|
</li>
|
|
|
|
<li class="dib">
|
|
<span class="icon iconfont"></span>
|
|
<div class="name">unknow</div>
|
|
<div class="code-name">&#xe6a6;</div>
|
|
</li>
|
|
|
|
<li class="dib">
|
|
<span class="icon iconfont"></span>
|
|
<div class="name">js</div>
|
|
<div class="code-name">&#xe639;</div>
|
|
</li>
|
|
|
|
<li class="dib">
|
|
<span class="icon iconfont"></span>
|
|
<div class="name">json</div>
|
|
<div class="code-name">&#xe63b;</div>
|
|
</li>
|
|
|
|
<li class="dib">
|
|
<span class="icon iconfont"></span>
|
|
<div class="name">doc</div>
|
|
<div class="code-name">&#xe614;</div>
|
|
</li>
|
|
|
|
<li class="dib">
|
|
<span class="icon iconfont"></span>
|
|
<div class="name">txt</div>
|
|
<div class="code-name">&#xe615;</div>
|
|
</li>
|
|
|
|
<li class="dib">
|
|
<span class="icon iconfont"></span>
|
|
<div class="name">docx</div>
|
|
<div class="code-name">&#xe617;</div>
|
|
</li>
|
|
|
|
<li class="dib">
|
|
<span class="icon iconfont"></span>
|
|
<div class="name">disk</div>
|
|
<div class="code-name">&#xe7a5;</div>
|
|
</li>
|
|
|
|
<li class="dib">
|
|
<span class="icon iconfont"></span>
|
|
<div class="name">disket</div>
|
|
<div class="code-name">&#xe613;</div>
|
|
</li>
|
|
|
|
<li class="dib">
|
|
<span class="icon iconfont"></span>
|
|
<div class="name">pdf</div>
|
|
<div class="code-name">&#xe622;</div>
|
|
</li>
|
|
|
|
<li class="dib">
|
|
<span class="icon iconfont"></span>
|
|
<div class="name">notices</div>
|
|
<div class="code-name">&#xe709;</div>
|
|
</li>
|
|
|
|
<li class="dib">
|
|
<span class="icon iconfont"></span>
|
|
<div class="name">wifi</div>
|
|
<div class="code-name">&#xeda9;</div>
|
|
</li>
|
|
|
|
<li class="dib">
|
|
<span class="icon iconfont"></span>
|
|
<div class="name">battery</div>
|
|
<div class="code-name">&#xe996;</div>
|
|
</li>
|
|
|
|
<li class="dib">
|
|
<span class="icon iconfont"></span>
|
|
<div class="name">ink</div>
|
|
<div class="code-name">&#xe612;</div>
|
|
</li>
|
|
|
|
<li class="dib">
|
|
<span class="icon iconfont"></span>
|
|
<div class="name">info</div>
|
|
<div class="code-name">&#xe645;</div>
|
|
</li>
|
|
|
|
<li class="dib">
|
|
<span class="icon iconfont"></span>
|
|
<div class="name">calculator</div>
|
|
<div class="code-name">&#xe66b;</div>
|
|
</li>
|
|
|
|
<li class="dib">
|
|
<span class="icon iconfont"></span>
|
|
<div class="name">todo</div>
|
|
<div class="code-name">&#xe610;</div>
|
|
</li>
|
|
|
|
<li class="dib">
|
|
<span class="icon iconfont"></span>
|
|
<div class="name">gant</div>
|
|
<div class="code-name">&#xe616;</div>
|
|
</li>
|
|
|
|
<li class="dib">
|
|
<span class="icon iconfont"></span>
|
|
<div class="name">draw</div>
|
|
<div class="code-name">&#xe701;</div>
|
|
</li>
|
|
|
|
<li class="dib">
|
|
<span class="icon iconfont"></span>
|
|
<div class="name">music</div>
|
|
<div class="code-name">&#xe99b;</div>
|
|
</li>
|
|
|
|
<li class="dib">
|
|
<span class="icon iconfont"></span>
|
|
<div class="name">brower</div>
|
|
<div class="code-name">&#xe611;</div>
|
|
</li>
|
|
|
|
<li class="dib">
|
|
<span class="icon iconfont"></span>
|
|
<div class="name">calendar</div>
|
|
<div class="code-name">&#xe621;</div>
|
|
</li>
|
|
|
|
<li class="dib">
|
|
<span class="icon iconfont"></span>
|
|
<div class="name">gallery</div>
|
|
<div class="code-name">&#xe635;</div>
|
|
</li>
|
|
|
|
<li class="dib">
|
|
<span class="icon iconfont"></span>
|
|
<div class="name">terminal</div>
|
|
<div class="code-name">&#xe62e;</div>
|
|
</li>
|
|
|
|
<li class="dib">
|
|
<span class="icon iconfont"></span>
|
|
<div class="name">noteapp</div>
|
|
<div class="code-name">&#xe60f;</div>
|
|
</li>
|
|
|
|
<li class="dib">
|
|
<span class="icon iconfont"></span>
|
|
<div class="name">note</div>
|
|
<div class="code-name">&#xe669;</div>
|
|
</li>
|
|
|
|
<li class="dib">
|
|
<span class="icon iconfont"></span>
|
|
<div class="name">editorapp</div>
|
|
<div class="code-name">&#xe6c6;</div>
|
|
</li>
|
|
|
|
<li class="dib">
|
|
<span class="icon iconfont"></span>
|
|
<div class="name">kanban</div>
|
|
<div class="code-name">&#xe62a;</div>
|
|
</li>
|
|
|
|
<li class="dib">
|
|
<span class="icon iconfont"></span>
|
|
<div class="name">mindext</div>
|
|
<div class="code-name">&#xe686;</div>
|
|
</li>
|
|
|
|
<li class="dib">
|
|
<span class="icon iconfont"></span>
|
|
<div class="name">kb</div>
|
|
<div class="code-name">&#xe657;</div>
|
|
</li>
|
|
|
|
<li class="dib">
|
|
<span class="icon iconfont"></span>
|
|
<div class="name">backup</div>
|
|
<div class="code-name">&#xe62d;</div>
|
|
</li>
|
|
|
|
<li class="dib">
|
|
<span class="icon iconfont"></span>
|
|
<div class="name">computer</div>
|
|
<div class="code-name">&#xe60d;</div>
|
|
</li>
|
|
|
|
<li class="dib">
|
|
<span class="icon iconfont"></span>
|
|
<div class="name">computer2</div>
|
|
<div class="code-name">&#xe60e;</div>
|
|
</li>
|
|
|
|
<li class="dib">
|
|
<span class="icon iconfont"></span>
|
|
<div class="name">unknow</div>
|
|
<div class="code-name">&#xe656;</div>
|
|
</li>
|
|
|
|
<li class="dib">
|
|
<span class="icon iconfont"></span>
|
|
<div class="name">picedit</div>
|
|
<div class="code-name">&#xe60b;</div>
|
|
</li>
|
|
|
|
<li class="dib">
|
|
<span class="icon iconfont"></span>
|
|
<div class="name">psd</div>
|
|
<div class="code-name">&#xe61f;</div>
|
|
</li>
|
|
|
|
<li class="dib">
|
|
<span class="icon iconfont"></span>
|
|
<div class="name">photo</div>
|
|
<div class="code-name">&#xe6a5;</div>
|
|
</li>
|
|
|
|
<li class="dib">
|
|
<span class="icon iconfont"></span>
|
|
<div class="name">noteexe</div>
|
|
<div class="code-name">&#xe643;</div>
|
|
</li>
|
|
|
|
<li class="dib">
|
|
<span class="icon iconfont"></span>
|
|
<div class="name">markdown</div>
|
|
<div class="code-name">&#xe624;</div>
|
|
</li>
|
|
|
|
<li class="dib">
|
|
<span class="icon iconfont"></span>
|
|
<div class="name">jpg</div>
|
|
<div class="code-name">&#xe604;</div>
|
|
</li>
|
|
|
|
<li class="dib">
|
|
<span class="icon iconfont"></span>
|
|
<div class="name">gif</div>
|
|
<div class="code-name">&#xe601;</div>
|
|
</li>
|
|
|
|
<li class="dib">
|
|
<span class="icon iconfont"></span>
|
|
<div class="name">png</div>
|
|
<div class="code-name">&#xe605;</div>
|
|
</li>
|
|
|
|
<li class="dib">
|
|
<span class="icon iconfont"></span>
|
|
<div class="name">svg</div>
|
|
<div class="code-name">&#xe606;</div>
|
|
</li>
|
|
|
|
<li class="dib">
|
|
<span class="icon iconfont"></span>
|
|
<div class="name">ttf</div>
|
|
<div class="code-name">&#xe608;</div>
|
|
</li>
|
|
|
|
<li class="dib">
|
|
<span class="icon iconfont"></span>
|
|
<div class="name">webp</div>
|
|
<div class="code-name">&#xe633;</div>
|
|
</li>
|
|
|
|
<li class="dib">
|
|
<span class="icon iconfont"></span>
|
|
<div class="name">md</div>
|
|
<div class="code-name">&#xe6b6;</div>
|
|
</li>
|
|
|
|
<li class="dib">
|
|
<span class="icon iconfont"></span>
|
|
<div class="name">word</div>
|
|
<div class="code-name">&#xe640;</div>
|
|
</li>
|
|
|
|
<li class="dib">
|
|
<span class="icon iconfont"></span>
|
|
<div class="name">pptexe</div>
|
|
<div class="code-name">&#xe642;</div>
|
|
</li>
|
|
|
|
<li class="dib">
|
|
<span class="icon iconfont"></span>
|
|
<div class="name">pptx</div>
|
|
<div class="code-name">&#xe664;</div>
|
|
</li>
|
|
|
|
<li class="dib">
|
|
<span class="icon iconfont"></span>
|
|
<div class="name">note</div>
|
|
<div class="code-name">&#xe603;</div>
|
|
</li>
|
|
|
|
<li class="dib">
|
|
<span class="icon iconfont"></span>
|
|
<div class="name">xlsx</div>
|
|
<div class="code-name">&#xe60a;</div>
|
|
</li>
|
|
|
|
<li class="dib">
|
|
<span class="icon iconfont"></span>
|
|
<div class="name">excel</div>
|
|
<div class="code-name">&#xe678;</div>
|
|
</li>
|
|
|
|
<li class="dib">
|
|
<span class="icon iconfont"></span>
|
|
<div class="name">xls</div>
|
|
<div class="code-name">&#xe607;</div>
|
|
</li>
|
|
|
|
<li class="dib">
|
|
<span class="icon iconfont"></span>
|
|
<div class="name">ppt</div>
|
|
<div class="code-name">&#xe60c;</div>
|
|
</li>
|
|
|
|
<li class="dib">
|
|
<span class="icon iconfont"></span>
|
|
<div class="name">store</div>
|
|
<div class="code-name">&#xe600;</div>
|
|
</li>
|
|
|
|
<li class="dib">
|
|
<span class="icon iconfont"></span>
|
|
<div class="name">mind</div>
|
|
<div class="code-name">&#xe609;</div>
|
|
</li>
|
|
|
|
<li class="dib">
|
|
<span class="icon iconfont"></span>
|
|
<div class="name">mindexe</div>
|
|
<div class="code-name">&#xe764;</div>
|
|
</li>
|
|
|
|
<li class="dib">
|
|
<span class="icon iconfont"></span>
|
|
<div class="name">setup</div>
|
|
<div class="code-name">&#xe644;</div>
|
|
</li>
|
|
|
|
<li class="dib">
|
|
<span class="icon iconfont"></span>
|
|
<div class="name">setting</div>
|
|
<div class="code-name">&#xe770;</div>
|
|
</li>
|
|
|
|
<li class="dib">
|
|
<span class="icon iconfont"></span>
|
|
<div class="name">folder</div>
|
|
<div class="code-name">&#xe898;</div>
|
|
</li>
|
|
|
|
<li class="dib">
|
|
<span class="icon iconfont"></span>
|
|
<div class="name">favorite</div>
|
|
<div class="code-name">&#xe602;</div>
|
|
</li>
|
|
|
|
<li class="dib">
|
|
<span class="icon iconfont"></span>
|
|
<div class="name">cut</div>
|
|
<div class="code-name">&#xe648;</div>
|
|
</li>
|
|
|
|
<li class="dib">
|
|
<span class="icon iconfont"></span>
|
|
<div class="name">baiban</div>
|
|
<div class="code-name">&#xe688;</div>
|
|
</li>
|
|
|
|
<li class="dib">
|
|
<span class="icon iconfont"></span>
|
|
<div class="name">notice</div>
|
|
<div class="code-name">&#xe63a;</div>
|
|
</li>
|
|
|
|
<li class="dib">
|
|
<span class="icon iconfont"></span>
|
|
<div class="name">windows</div>
|
|
<div class="code-name">&#xea06;</div>
|
|
</li>
|
|
|
|
<li class="dib">
|
|
<span class="icon iconfont"></span>
|
|
<div class="name">file</div>
|
|
<div class="code-name">&#xe671;</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=1733206776617') format('woff2'),
|
|
url('iconfont.woff?t=1733206776617') format('woff'),
|
|
url('iconfont.ttf?t=1733206776617') 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"
|
|
><span class="iconfont">&#x33;</span>
|
|
</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-weixin"></span>
|
|
<div class="name">
|
|
微信
|
|
</div>
|
|
<div class="code-name">.icon-weixin
|
|
</div>
|
|
</li>
|
|
|
|
<li class="dib">
|
|
<span class="icon iconfont icon-qq"></span>
|
|
<div class="name">
|
|
QQ
|
|
</div>
|
|
<div class="code-name">.icon-qq
|
|
</div>
|
|
</li>
|
|
|
|
<li class="dib">
|
|
<span class="icon iconfont icon-logout"></span>
|
|
<div class="name">
|
|
logout
|
|
</div>
|
|
<div class="code-name">.icon-logout
|
|
</div>
|
|
</li>
|
|
|
|
<li class="dib">
|
|
<span class="icon iconfont icon-huifu"></span>
|
|
<div class="name">
|
|
恢复
|
|
</div>
|
|
<div class="code-name">.icon-huifu
|
|
</div>
|
|
</li>
|
|
|
|
<li class="dib">
|
|
<span class="icon iconfont icon-workchat"></span>
|
|
<div class="name">
|
|
workchat
|
|
</div>
|
|
<div class="code-name">.icon-workchat
|
|
</div>
|
|
</li>
|
|
|
|
<li class="dib">
|
|
<span class="icon iconfont icon-progress"></span>
|
|
<div class="name">
|
|
progress
|
|
</div>
|
|
<div class="code-name">.icon-progress
|
|
</div>
|
|
</li>
|
|
|
|
<li class="dib">
|
|
<span class="icon iconfont icon-zip"></span>
|
|
<div class="name">
|
|
zip
|
|
</div>
|
|
<div class="code-name">.icon-zip
|
|
</div>
|
|
</li>
|
|
|
|
<li class="dib">
|
|
<span class="icon iconfont icon-gz"></span>
|
|
<div class="name">
|
|
gz
|
|
</div>
|
|
<div class="code-name">.icon-gz
|
|
</div>
|
|
</li>
|
|
|
|
<li class="dib">
|
|
<span class="icon iconfont icon-tar"></span>
|
|
<div class="name">
|
|
tar
|
|
</div>
|
|
<div class="code-name">.icon-tar
|
|
</div>
|
|
</li>
|
|
|
|
<li class="dib">
|
|
<span class="icon iconfont icon-bz2"></span>
|
|
<div class="name">
|
|
bz2
|
|
</div>
|
|
<div class="code-name">.icon-bz2
|
|
</div>
|
|
</li>
|
|
|
|
<li class="dib">
|
|
<span class="icon iconfont icon-chat"></span>
|
|
<div class="name">
|
|
chat
|
|
</div>
|
|
<div class="code-name">.icon-chat
|
|
</div>
|
|
</li>
|
|
|
|
<li class="dib">
|
|
<span class="icon iconfont icon-aiassistant"></span>
|
|
<div class="name">
|
|
aiassistant
|
|
</div>
|
|
<div class="code-name">.icon-aiassistant
|
|
</div>
|
|
</li>
|
|
|
|
<li class="dib">
|
|
<span class="icon iconfont icon-aichat"></span>
|
|
<div class="name">
|
|
aichat
|
|
</div>
|
|
<div class="code-name">.icon-aichat
|
|
</div>
|
|
</li>
|
|
|
|
<li class="dib">
|
|
<span class="icon iconfont icon-aitrans"></span>
|
|
<div class="name">
|
|
aitrans
|
|
</div>
|
|
<div class="code-name">.icon-aitrans
|
|
</div>
|
|
</li>
|
|
|
|
<li class="dib">
|
|
<span class="icon iconfont icon-aiknow"></span>
|
|
<div class="name">
|
|
aiknow
|
|
</div>
|
|
<div class="code-name">.icon-aiknow
|
|
</div>
|
|
</li>
|
|
|
|
<li class="dib">
|
|
<span class="icon iconfont icon-airecording"></span>
|
|
<div class="name">
|
|
airecording
|
|
</div>
|
|
<div class="code-name">.icon-airecording
|
|
</div>
|
|
</li>
|
|
|
|
<li class="dib">
|
|
<span class="icon iconfont icon-aispoken"></span>
|
|
<div class="name">
|
|
aispoken
|
|
</div>
|
|
<div class="code-name">.icon-aispoken
|
|
</div>
|
|
</li>
|
|
|
|
<li class="dib">
|
|
<span class="icon iconfont icon-aisetting"></span>
|
|
<div class="name">
|
|
aisetting
|
|
</div>
|
|
<div class="code-name">.icon-aisetting
|
|
</div>
|
|
</li>
|
|
|
|
<li class="dib">
|
|
<span class="icon iconfont icon-aidown"></span>
|
|
<div class="name">
|
|
aidown
|
|
</div>
|
|
<div class="code-name">.icon-aidown
|
|
</div>
|
|
</li>
|
|
|
|
<li class="dib">
|
|
<span class="icon iconfont icon-aicreation"></span>
|
|
<div class="name">
|
|
aicreation
|
|
</div>
|
|
<div class="code-name">.icon-aicreation
|
|
</div>
|
|
</li>
|
|
|
|
<li class="dib">
|
|
<span class="icon iconfont icon-aisd"></span>
|
|
<div class="name">
|
|
aisd
|
|
</div>
|
|
<div class="code-name">.icon-aisd
|
|
</div>
|
|
</li>
|
|
|
|
<li class="dib">
|
|
<span class="icon iconfont icon-mp4"></span>
|
|
<div class="name">
|
|
mp4
|
|
</div>
|
|
<div class="code-name">.icon-mp4
|
|
</div>
|
|
</li>
|
|
|
|
<li class="dib">
|
|
<span class="icon iconfont icon-mp3"></span>
|
|
<div class="name">
|
|
mp3
|
|
</div>
|
|
<div class="code-name">.icon-mp3
|
|
</div>
|
|
</li>
|
|
|
|
<li class="dib">
|
|
<span class="icon iconfont icon-link"></span>
|
|
<div class="name">
|
|
link
|
|
</div>
|
|
<div class="code-name">.icon-link
|
|
</div>
|
|
</li>
|
|
|
|
<li class="dib">
|
|
<span class="icon iconfont icon-url"></span>
|
|
<div class="name">
|
|
url
|
|
</div>
|
|
<div class="code-name">.icon-url
|
|
</div>
|
|
</li>
|
|
|
|
<li class="dib">
|
|
<span class="icon iconfont icon-error"></span>
|
|
<div class="name">
|
|
error
|
|
</div>
|
|
<div class="code-name">.icon-error
|
|
</div>
|
|
</li>
|
|
|
|
<li class="dib">
|
|
<span class="icon iconfont icon-question"></span>
|
|
<div class="name">
|
|
question
|
|
</div>
|
|
<div class="code-name">.icon-question
|
|
</div>
|
|
</li>
|
|
|
|
<li class="dib">
|
|
<span class="icon iconfont icon-warning"></span>
|
|
<div class="name">
|
|
warning
|
|
</div>
|
|
<div class="code-name">.icon-warning
|
|
</div>
|
|
</li>
|
|
|
|
<li class="dib">
|
|
<span class="icon iconfont icon-account"></span>
|
|
<div class="name">
|
|
account
|
|
</div>
|
|
<div class="code-name">.icon-account
|
|
</div>
|
|
</li>
|
|
|
|
<li class="dib">
|
|
<span class="icon iconfont icon-language"></span>
|
|
<div class="name">
|
|
language
|
|
</div>
|
|
<div class="code-name">.icon-language
|
|
</div>
|
|
</li>
|
|
|
|
<li class="dib">
|
|
<span class="icon iconfont icon-system"></span>
|
|
<div class="name">
|
|
system
|
|
</div>
|
|
<div class="code-name">.icon-system
|
|
</div>
|
|
</li>
|
|
|
|
<li class="dib">
|
|
<span class="icon iconfont icon-personal"></span>
|
|
<div class="name">
|
|
personal
|
|
</div>
|
|
<div class="code-name">.icon-personal
|
|
</div>
|
|
</li>
|
|
|
|
<li class="dib">
|
|
<span class="icon iconfont icon-image"></span>
|
|
<div class="name">
|
|
image
|
|
</div>
|
|
<div class="code-name">.icon-image
|
|
</div>
|
|
</li>
|
|
|
|
<li class="dib">
|
|
<span class="icon iconfont icon-video"></span>
|
|
<div class="name">
|
|
video
|
|
</div>
|
|
<div class="code-name">.icon-video
|
|
</div>
|
|
</li>
|
|
|
|
<li class="dib">
|
|
<span class="icon iconfont icon-java"></span>
|
|
<div class="name">
|
|
java
|
|
</div>
|
|
<div class="code-name">.icon-java
|
|
</div>
|
|
</li>
|
|
|
|
<li class="dib">
|
|
<span class="icon iconfont icon-tsx"></span>
|
|
<div class="name">
|
|
tsx
|
|
</div>
|
|
<div class="code-name">.icon-tsx
|
|
</div>
|
|
</li>
|
|
|
|
<li class="dib">
|
|
<span class="icon iconfont icon-py"></span>
|
|
<div class="name">
|
|
py
|
|
</div>
|
|
<div class="code-name">.icon-py
|
|
</div>
|
|
</li>
|
|
|
|
<li class="dib">
|
|
<span class="icon iconfont icon-vue"></span>
|
|
<div class="name">
|
|
vue
|
|
</div>
|
|
<div class="code-name">.icon-vue
|
|
</div>
|
|
</li>
|
|
|
|
<li class="dib">
|
|
<span class="icon iconfont icon-tiff"></span>
|
|
<div class="name">
|
|
tiff
|
|
</div>
|
|
<div class="code-name">.icon-tiff
|
|
</div>
|
|
</li>
|
|
|
|
<li class="dib">
|
|
<span class="icon iconfont icon-bmp"></span>
|
|
<div class="name">
|
|
bmp
|
|
</div>
|
|
<div class="code-name">.icon-bmp
|
|
</div>
|
|
</li>
|
|
|
|
<li class="dib">
|
|
<span class="icon iconfont icon-bb"></span>
|
|
<div class="name">
|
|
bb
|
|
</div>
|
|
<div class="code-name">.icon-bb
|
|
</div>
|
|
</li>
|
|
|
|
<li class="dib">
|
|
<span class="icon iconfont icon-html"></span>
|
|
<div class="name">
|
|
html
|
|
</div>
|
|
<div class="code-name">.icon-html
|
|
</div>
|
|
</li>
|
|
|
|
<li class="dib">
|
|
<span class="icon iconfont icon-css"></span>
|
|
<div class="name">
|
|
css
|
|
</div>
|
|
<div class="code-name">.icon-css
|
|
</div>
|
|
</li>
|
|
|
|
<li class="dib">
|
|
<span class="icon iconfont icon-xmlwenjian"></span>
|
|
<div class="name">
|
|
xml文件
|
|
</div>
|
|
<div class="code-name">.icon-xmlwenjian
|
|
</div>
|
|
</li>
|
|
|
|
<li class="dib">
|
|
<span class="icon iconfont icon-flow"></span>
|
|
<div class="name">
|
|
flow
|
|
</div>
|
|
<div class="code-name">.icon-flow
|
|
</div>
|
|
</li>
|
|
|
|
<li class="dib">
|
|
<span class="icon iconfont icon-unknow1"></span>
|
|
<div class="name">
|
|
unknow
|
|
</div>
|
|
<div class="code-name">.icon-unknow1
|
|
</div>
|
|
</li>
|
|
|
|
<li class="dib">
|
|
<span class="icon iconfont icon-js"></span>
|
|
<div class="name">
|
|
js
|
|
</div>
|
|
<div class="code-name">.icon-js
|
|
</div>
|
|
</li>
|
|
|
|
<li class="dib">
|
|
<span class="icon iconfont icon-json"></span>
|
|
<div class="name">
|
|
json
|
|
</div>
|
|
<div class="code-name">.icon-json
|
|
</div>
|
|
</li>
|
|
|
|
<li class="dib">
|
|
<span class="icon iconfont icon-doc"></span>
|
|
<div class="name">
|
|
doc
|
|
</div>
|
|
<div class="code-name">.icon-doc
|
|
</div>
|
|
</li>
|
|
|
|
<li class="dib">
|
|
<span class="icon iconfont icon-txt"></span>
|
|
<div class="name">
|
|
txt
|
|
</div>
|
|
<div class="code-name">.icon-txt
|
|
</div>
|
|
</li>
|
|
|
|
<li class="dib">
|
|
<span class="icon iconfont icon-docx"></span>
|
|
<div class="name">
|
|
docx
|
|
</div>
|
|
<div class="code-name">.icon-docx
|
|
</div>
|
|
</li>
|
|
|
|
<li class="dib">
|
|
<span class="icon iconfont icon-disk"></span>
|
|
<div class="name">
|
|
disk
|
|
</div>
|
|
<div class="code-name">.icon-disk
|
|
</div>
|
|
</li>
|
|
|
|
<li class="dib">
|
|
<span class="icon iconfont icon-disknet"></span>
|
|
<div class="name">
|
|
disket
|
|
</div>
|
|
<div class="code-name">.icon-disknet
|
|
</div>
|
|
</li>
|
|
|
|
<li class="dib">
|
|
<span class="icon iconfont icon-pdf"></span>
|
|
<div class="name">
|
|
pdf
|
|
</div>
|
|
<div class="code-name">.icon-pdf
|
|
</div>
|
|
</li>
|
|
|
|
<li class="dib">
|
|
<span class="icon iconfont icon-notices"></span>
|
|
<div class="name">
|
|
notices
|
|
</div>
|
|
<div class="code-name">.icon-notices
|
|
</div>
|
|
</li>
|
|
|
|
<li class="dib">
|
|
<span class="icon iconfont icon-wifi"></span>
|
|
<div class="name">
|
|
wifi
|
|
</div>
|
|
<div class="code-name">.icon-wifi
|
|
</div>
|
|
</li>
|
|
|
|
<li class="dib">
|
|
<span class="icon iconfont icon-battery"></span>
|
|
<div class="name">
|
|
battery
|
|
</div>
|
|
<div class="code-name">.icon-battery
|
|
</div>
|
|
</li>
|
|
|
|
<li class="dib">
|
|
<span class="icon iconfont icon-ink"></span>
|
|
<div class="name">
|
|
ink
|
|
</div>
|
|
<div class="code-name">.icon-ink
|
|
</div>
|
|
</li>
|
|
|
|
<li class="dib">
|
|
<span class="icon iconfont icon-info"></span>
|
|
<div class="name">
|
|
info
|
|
</div>
|
|
<div class="code-name">.icon-info
|
|
</div>
|
|
</li>
|
|
|
|
<li class="dib">
|
|
<span class="icon iconfont icon-calculator"></span>
|
|
<div class="name">
|
|
calculator
|
|
</div>
|
|
<div class="code-name">.icon-calculator
|
|
</div>
|
|
</li>
|
|
|
|
<li class="dib">
|
|
<span class="icon iconfont icon-todo"></span>
|
|
<div class="name">
|
|
todo
|
|
</div>
|
|
<div class="code-name">.icon-todo
|
|
</div>
|
|
</li>
|
|
|
|
<li class="dib">
|
|
<span class="icon iconfont icon-gant"></span>
|
|
<div class="name">
|
|
gant
|
|
</div>
|
|
<div class="code-name">.icon-gant
|
|
</div>
|
|
</li>
|
|
|
|
<li class="dib">
|
|
<span class="icon iconfont icon-draw"></span>
|
|
<div class="name">
|
|
draw
|
|
</div>
|
|
<div class="code-name">.icon-draw
|
|
</div>
|
|
</li>
|
|
|
|
<li class="dib">
|
|
<span class="icon iconfont icon-music"></span>
|
|
<div class="name">
|
|
music
|
|
</div>
|
|
<div class="code-name">.icon-music
|
|
</div>
|
|
</li>
|
|
|
|
<li class="dib">
|
|
<span class="icon iconfont icon-brower"></span>
|
|
<div class="name">
|
|
brower
|
|
</div>
|
|
<div class="code-name">.icon-brower
|
|
</div>
|
|
</li>
|
|
|
|
<li class="dib">
|
|
<span class="icon iconfont icon-calendar"></span>
|
|
<div class="name">
|
|
calendar
|
|
</div>
|
|
<div class="code-name">.icon-calendar
|
|
</div>
|
|
</li>
|
|
|
|
<li class="dib">
|
|
<span class="icon iconfont icon-gallery"></span>
|
|
<div class="name">
|
|
gallery
|
|
</div>
|
|
<div class="code-name">.icon-gallery
|
|
</div>
|
|
</li>
|
|
|
|
<li class="dib">
|
|
<span class="icon iconfont icon-terminal"></span>
|
|
<div class="name">
|
|
terminal
|
|
</div>
|
|
<div class="code-name">.icon-terminal
|
|
</div>
|
|
</li>
|
|
|
|
<li class="dib">
|
|
<span class="icon iconfont icon-noteapp"></span>
|
|
<div class="name">
|
|
noteapp
|
|
</div>
|
|
<div class="code-name">.icon-noteapp
|
|
</div>
|
|
</li>
|
|
|
|
<li class="dib">
|
|
<span class="icon iconfont icon-biji"></span>
|
|
<div class="name">
|
|
note
|
|
</div>
|
|
<div class="code-name">.icon-biji
|
|
</div>
|
|
</li>
|
|
|
|
<li class="dib">
|
|
<span class="icon iconfont icon-editorbt"></span>
|
|
<div class="name">
|
|
editorapp
|
|
</div>
|
|
<div class="code-name">.icon-editorbt
|
|
</div>
|
|
</li>
|
|
|
|
<li class="dib">
|
|
<span class="icon iconfont icon-kanban"></span>
|
|
<div class="name">
|
|
kanban
|
|
</div>
|
|
<div class="code-name">.icon-kanban
|
|
</div>
|
|
</li>
|
|
|
|
<li class="dib">
|
|
<span class="icon iconfont icon-mindext"></span>
|
|
<div class="name">
|
|
mindext
|
|
</div>
|
|
<div class="code-name">.icon-mindext
|
|
</div>
|
|
</li>
|
|
|
|
<li class="dib">
|
|
<span class="icon iconfont icon-kb"></span>
|
|
<div class="name">
|
|
kb
|
|
</div>
|
|
<div class="code-name">.icon-kb
|
|
</div>
|
|
</li>
|
|
|
|
<li class="dib">
|
|
<span class="icon iconfont icon-backup"></span>
|
|
<div class="name">
|
|
backup
|
|
</div>
|
|
<div class="code-name">.icon-backup
|
|
</div>
|
|
</li>
|
|
|
|
<li class="dib">
|
|
<span class="icon iconfont icon-diannao"></span>
|
|
<div class="name">
|
|
computer
|
|
</div>
|
|
<div class="code-name">.icon-diannao
|
|
</div>
|
|
</li>
|
|
|
|
<li class="dib">
|
|
<span class="icon iconfont icon-computer2"></span>
|
|
<div class="name">
|
|
computer2
|
|
</div>
|
|
<div class="code-name">.icon-computer2
|
|
</div>
|
|
</li>
|
|
|
|
<li class="dib">
|
|
<span class="icon iconfont icon-unknow"></span>
|
|
<div class="name">
|
|
unknow
|
|
</div>
|
|
<div class="code-name">.icon-unknow
|
|
</div>
|
|
</li>
|
|
|
|
<li class="dib">
|
|
<span class="icon iconfont icon-picedit"></span>
|
|
<div class="name">
|
|
picedit
|
|
</div>
|
|
<div class="code-name">.icon-picedit
|
|
</div>
|
|
</li>
|
|
|
|
<li class="dib">
|
|
<span class="icon iconfont icon-psd"></span>
|
|
<div class="name">
|
|
psd
|
|
</div>
|
|
<div class="code-name">.icon-psd
|
|
</div>
|
|
</li>
|
|
|
|
<li class="dib">
|
|
<span class="icon iconfont icon-photo"></span>
|
|
<div class="name">
|
|
photo
|
|
</div>
|
|
<div class="code-name">.icon-photo
|
|
</div>
|
|
</li>
|
|
|
|
<li class="dib">
|
|
<span class="icon iconfont icon-noteexe"></span>
|
|
<div class="name">
|
|
noteexe
|
|
</div>
|
|
<div class="code-name">.icon-noteexe
|
|
</div>
|
|
</li>
|
|
|
|
<li class="dib">
|
|
<span class="icon iconfont icon-markdown"></span>
|
|
<div class="name">
|
|
markdown
|
|
</div>
|
|
<div class="code-name">.icon-markdown
|
|
</div>
|
|
</li>
|
|
|
|
<li class="dib">
|
|
<span class="icon iconfont icon-jpg"></span>
|
|
<div class="name">
|
|
jpg
|
|
</div>
|
|
<div class="code-name">.icon-jpg
|
|
</div>
|
|
</li>
|
|
|
|
<li class="dib">
|
|
<span class="icon iconfont icon-gif"></span>
|
|
<div class="name">
|
|
gif
|
|
</div>
|
|
<div class="code-name">.icon-gif
|
|
</div>
|
|
</li>
|
|
|
|
<li class="dib">
|
|
<span class="icon iconfont icon-png"></span>
|
|
<div class="name">
|
|
png
|
|
</div>
|
|
<div class="code-name">.icon-png
|
|
</div>
|
|
</li>
|
|
|
|
<li class="dib">
|
|
<span class="icon iconfont icon-svg"></span>
|
|
<div class="name">
|
|
svg
|
|
</div>
|
|
<div class="code-name">.icon-svg
|
|
</div>
|
|
</li>
|
|
|
|
<li class="dib">
|
|
<span class="icon iconfont icon-ttf"></span>
|
|
<div class="name">
|
|
ttf
|
|
</div>
|
|
<div class="code-name">.icon-ttf
|
|
</div>
|
|
</li>
|
|
|
|
<li class="dib">
|
|
<span class="icon iconfont icon-webp"></span>
|
|
<div class="name">
|
|
webp
|
|
</div>
|
|
<div class="code-name">.icon-webp
|
|
</div>
|
|
</li>
|
|
|
|
<li class="dib">
|
|
<span class="icon iconfont icon-md"></span>
|
|
<div class="name">
|
|
md
|
|
</div>
|
|
<div class="code-name">.icon-md
|
|
</div>
|
|
</li>
|
|
|
|
<li class="dib">
|
|
<span class="icon iconfont icon-word"></span>
|
|
<div class="name">
|
|
word
|
|
</div>
|
|
<div class="code-name">.icon-word
|
|
</div>
|
|
</li>
|
|
|
|
<li class="dib">
|
|
<span class="icon iconfont icon-pptexe"></span>
|
|
<div class="name">
|
|
pptexe
|
|
</div>
|
|
<div class="code-name">.icon-pptexe
|
|
</div>
|
|
</li>
|
|
|
|
<li class="dib">
|
|
<span class="icon iconfont icon-pptx"></span>
|
|
<div class="name">
|
|
pptx
|
|
</div>
|
|
<div class="code-name">.icon-pptx
|
|
</div>
|
|
</li>
|
|
|
|
<li class="dib">
|
|
<span class="icon iconfont icon-note"></span>
|
|
<div class="name">
|
|
note
|
|
</div>
|
|
<div class="code-name">.icon-note
|
|
</div>
|
|
</li>
|
|
|
|
<li class="dib">
|
|
<span class="icon iconfont icon-xlsx"></span>
|
|
<div class="name">
|
|
xlsx
|
|
</div>
|
|
<div class="code-name">.icon-xlsx
|
|
</div>
|
|
</li>
|
|
|
|
<li class="dib">
|
|
<span class="icon iconfont icon-excel"></span>
|
|
<div class="name">
|
|
excel
|
|
</div>
|
|
<div class="code-name">.icon-excel
|
|
</div>
|
|
</li>
|
|
|
|
<li class="dib">
|
|
<span class="icon iconfont icon-xls1"></span>
|
|
<div class="name">
|
|
xls
|
|
</div>
|
|
<div class="code-name">.icon-xls1
|
|
</div>
|
|
</li>
|
|
|
|
<li class="dib">
|
|
<span class="icon iconfont icon-ppt"></span>
|
|
<div class="name">
|
|
ppt
|
|
</div>
|
|
<div class="code-name">.icon-ppt
|
|
</div>
|
|
</li>
|
|
|
|
<li class="dib">
|
|
<span class="icon iconfont icon-store"></span>
|
|
<div class="name">
|
|
store
|
|
</div>
|
|
<div class="code-name">.icon-store
|
|
</div>
|
|
</li>
|
|
|
|
<li class="dib">
|
|
<span class="icon iconfont icon-mind"></span>
|
|
<div class="name">
|
|
mind
|
|
</div>
|
|
<div class="code-name">.icon-mind
|
|
</div>
|
|
</li>
|
|
|
|
<li class="dib">
|
|
<span class="icon iconfont icon-mindexe"></span>
|
|
<div class="name">
|
|
mindexe
|
|
</div>
|
|
<div class="code-name">.icon-mindexe
|
|
</div>
|
|
</li>
|
|
|
|
<li class="dib">
|
|
<span class="icon iconfont icon-setup"></span>
|
|
<div class="name">
|
|
setup
|
|
</div>
|
|
<div class="code-name">.icon-setup
|
|
</div>
|
|
</li>
|
|
|
|
<li class="dib">
|
|
<span class="icon iconfont icon-setting"></span>
|
|
<div class="name">
|
|
setting
|
|
</div>
|
|
<div class="code-name">.icon-setting
|
|
</div>
|
|
</li>
|
|
|
|
<li class="dib">
|
|
<span class="icon iconfont icon-folder"></span>
|
|
<div class="name">
|
|
folder
|
|
</div>
|
|
<div class="code-name">.icon-folder
|
|
</div>
|
|
</li>
|
|
|
|
<li class="dib">
|
|
<span class="icon iconfont icon-favorite"></span>
|
|
<div class="name">
|
|
favorite
|
|
</div>
|
|
<div class="code-name">.icon-favorite
|
|
</div>
|
|
</li>
|
|
|
|
<li class="dib">
|
|
<span class="icon iconfont icon-cut"></span>
|
|
<div class="name">
|
|
cut
|
|
</div>
|
|
<div class="code-name">.icon-cut
|
|
</div>
|
|
</li>
|
|
|
|
<li class="dib">
|
|
<span class="icon iconfont icon-baiban"></span>
|
|
<div class="name">
|
|
baiban
|
|
</div>
|
|
<div class="code-name">.icon-baiban
|
|
</div>
|
|
</li>
|
|
|
|
<li class="dib">
|
|
<span class="icon iconfont icon-notice"></span>
|
|
<div class="name">
|
|
notice
|
|
</div>
|
|
<div class="code-name">.icon-notice
|
|
</div>
|
|
</li>
|
|
|
|
<li class="dib">
|
|
<span class="icon iconfont icon-windows"></span>
|
|
<div class="name">
|
|
windows
|
|
</div>
|
|
<div class="code-name">.icon-windows
|
|
</div>
|
|
</li>
|
|
|
|
<li class="dib">
|
|
<span class="icon iconfont icon-file"></span>
|
|
<div class="name">
|
|
file
|
|
</div>
|
|
<div class="code-name">.icon-file
|
|
</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"><link rel="stylesheet" href="./iconfont.css">
|
|
</code></pre>
|
|
<h3 id="-">第二步:挑选相应图标并获取类名,应用于页面:</h3>
|
|
<pre><code class="language-html"><span class="iconfont icon-xxx"></span>
|
|
</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-weixin"></use>
|
|
</svg>
|
|
<div class="name">微信</div>
|
|
<div class="code-name">#icon-weixin</div>
|
|
</li>
|
|
|
|
<li class="dib">
|
|
<svg class="icon svg-icon" aria-hidden="true">
|
|
<use xlink:href="#icon-qq"></use>
|
|
</svg>
|
|
<div class="name">QQ</div>
|
|
<div class="code-name">#icon-qq</div>
|
|
</li>
|
|
|
|
<li class="dib">
|
|
<svg class="icon svg-icon" aria-hidden="true">
|
|
<use xlink:href="#icon-logout"></use>
|
|
</svg>
|
|
<div class="name">logout</div>
|
|
<div class="code-name">#icon-logout</div>
|
|
</li>
|
|
|
|
<li class="dib">
|
|
<svg class="icon svg-icon" aria-hidden="true">
|
|
<use xlink:href="#icon-huifu"></use>
|
|
</svg>
|
|
<div class="name">恢复</div>
|
|
<div class="code-name">#icon-huifu</div>
|
|
</li>
|
|
|
|
<li class="dib">
|
|
<svg class="icon svg-icon" aria-hidden="true">
|
|
<use xlink:href="#icon-workchat"></use>
|
|
</svg>
|
|
<div class="name">workchat</div>
|
|
<div class="code-name">#icon-workchat</div>
|
|
</li>
|
|
|
|
<li class="dib">
|
|
<svg class="icon svg-icon" aria-hidden="true">
|
|
<use xlink:href="#icon-progress"></use>
|
|
</svg>
|
|
<div class="name">progress</div>
|
|
<div class="code-name">#icon-progress</div>
|
|
</li>
|
|
|
|
<li class="dib">
|
|
<svg class="icon svg-icon" aria-hidden="true">
|
|
<use xlink:href="#icon-zip"></use>
|
|
</svg>
|
|
<div class="name">zip</div>
|
|
<div class="code-name">#icon-zip</div>
|
|
</li>
|
|
|
|
<li class="dib">
|
|
<svg class="icon svg-icon" aria-hidden="true">
|
|
<use xlink:href="#icon-gz"></use>
|
|
</svg>
|
|
<div class="name">gz</div>
|
|
<div class="code-name">#icon-gz</div>
|
|
</li>
|
|
|
|
<li class="dib">
|
|
<svg class="icon svg-icon" aria-hidden="true">
|
|
<use xlink:href="#icon-tar"></use>
|
|
</svg>
|
|
<div class="name">tar</div>
|
|
<div class="code-name">#icon-tar</div>
|
|
</li>
|
|
|
|
<li class="dib">
|
|
<svg class="icon svg-icon" aria-hidden="true">
|
|
<use xlink:href="#icon-bz2"></use>
|
|
</svg>
|
|
<div class="name">bz2</div>
|
|
<div class="code-name">#icon-bz2</div>
|
|
</li>
|
|
|
|
<li class="dib">
|
|
<svg class="icon svg-icon" aria-hidden="true">
|
|
<use xlink:href="#icon-chat"></use>
|
|
</svg>
|
|
<div class="name">chat</div>
|
|
<div class="code-name">#icon-chat</div>
|
|
</li>
|
|
|
|
<li class="dib">
|
|
<svg class="icon svg-icon" aria-hidden="true">
|
|
<use xlink:href="#icon-aiassistant"></use>
|
|
</svg>
|
|
<div class="name">aiassistant</div>
|
|
<div class="code-name">#icon-aiassistant</div>
|
|
</li>
|
|
|
|
<li class="dib">
|
|
<svg class="icon svg-icon" aria-hidden="true">
|
|
<use xlink:href="#icon-aichat"></use>
|
|
</svg>
|
|
<div class="name">aichat</div>
|
|
<div class="code-name">#icon-aichat</div>
|
|
</li>
|
|
|
|
<li class="dib">
|
|
<svg class="icon svg-icon" aria-hidden="true">
|
|
<use xlink:href="#icon-aitrans"></use>
|
|
</svg>
|
|
<div class="name">aitrans</div>
|
|
<div class="code-name">#icon-aitrans</div>
|
|
</li>
|
|
|
|
<li class="dib">
|
|
<svg class="icon svg-icon" aria-hidden="true">
|
|
<use xlink:href="#icon-aiknow"></use>
|
|
</svg>
|
|
<div class="name">aiknow</div>
|
|
<div class="code-name">#icon-aiknow</div>
|
|
</li>
|
|
|
|
<li class="dib">
|
|
<svg class="icon svg-icon" aria-hidden="true">
|
|
<use xlink:href="#icon-airecording"></use>
|
|
</svg>
|
|
<div class="name">airecording</div>
|
|
<div class="code-name">#icon-airecording</div>
|
|
</li>
|
|
|
|
<li class="dib">
|
|
<svg class="icon svg-icon" aria-hidden="true">
|
|
<use xlink:href="#icon-aispoken"></use>
|
|
</svg>
|
|
<div class="name">aispoken</div>
|
|
<div class="code-name">#icon-aispoken</div>
|
|
</li>
|
|
|
|
<li class="dib">
|
|
<svg class="icon svg-icon" aria-hidden="true">
|
|
<use xlink:href="#icon-aisetting"></use>
|
|
</svg>
|
|
<div class="name">aisetting</div>
|
|
<div class="code-name">#icon-aisetting</div>
|
|
</li>
|
|
|
|
<li class="dib">
|
|
<svg class="icon svg-icon" aria-hidden="true">
|
|
<use xlink:href="#icon-aidown"></use>
|
|
</svg>
|
|
<div class="name">aidown</div>
|
|
<div class="code-name">#icon-aidown</div>
|
|
</li>
|
|
|
|
<li class="dib">
|
|
<svg class="icon svg-icon" aria-hidden="true">
|
|
<use xlink:href="#icon-aicreation"></use>
|
|
</svg>
|
|
<div class="name">aicreation</div>
|
|
<div class="code-name">#icon-aicreation</div>
|
|
</li>
|
|
|
|
<li class="dib">
|
|
<svg class="icon svg-icon" aria-hidden="true">
|
|
<use xlink:href="#icon-aisd"></use>
|
|
</svg>
|
|
<div class="name">aisd</div>
|
|
<div class="code-name">#icon-aisd</div>
|
|
</li>
|
|
|
|
<li class="dib">
|
|
<svg class="icon svg-icon" aria-hidden="true">
|
|
<use xlink:href="#icon-mp4"></use>
|
|
</svg>
|
|
<div class="name">mp4</div>
|
|
<div class="code-name">#icon-mp4</div>
|
|
</li>
|
|
|
|
<li class="dib">
|
|
<svg class="icon svg-icon" aria-hidden="true">
|
|
<use xlink:href="#icon-mp3"></use>
|
|
</svg>
|
|
<div class="name">mp3</div>
|
|
<div class="code-name">#icon-mp3</div>
|
|
</li>
|
|
|
|
<li class="dib">
|
|
<svg class="icon svg-icon" aria-hidden="true">
|
|
<use xlink:href="#icon-link"></use>
|
|
</svg>
|
|
<div class="name">link</div>
|
|
<div class="code-name">#icon-link</div>
|
|
</li>
|
|
|
|
<li class="dib">
|
|
<svg class="icon svg-icon" aria-hidden="true">
|
|
<use xlink:href="#icon-url"></use>
|
|
</svg>
|
|
<div class="name">url</div>
|
|
<div class="code-name">#icon-url</div>
|
|
</li>
|
|
|
|
<li class="dib">
|
|
<svg class="icon svg-icon" aria-hidden="true">
|
|
<use xlink:href="#icon-error"></use>
|
|
</svg>
|
|
<div class="name">error</div>
|
|
<div class="code-name">#icon-error</div>
|
|
</li>
|
|
|
|
<li class="dib">
|
|
<svg class="icon svg-icon" aria-hidden="true">
|
|
<use xlink:href="#icon-question"></use>
|
|
</svg>
|
|
<div class="name">question</div>
|
|
<div class="code-name">#icon-question</div>
|
|
</li>
|
|
|
|
<li class="dib">
|
|
<svg class="icon svg-icon" aria-hidden="true">
|
|
<use xlink:href="#icon-warning"></use>
|
|
</svg>
|
|
<div class="name">warning</div>
|
|
<div class="code-name">#icon-warning</div>
|
|
</li>
|
|
|
|
<li class="dib">
|
|
<svg class="icon svg-icon" aria-hidden="true">
|
|
<use xlink:href="#icon-account"></use>
|
|
</svg>
|
|
<div class="name">account</div>
|
|
<div class="code-name">#icon-account</div>
|
|
</li>
|
|
|
|
<li class="dib">
|
|
<svg class="icon svg-icon" aria-hidden="true">
|
|
<use xlink:href="#icon-language"></use>
|
|
</svg>
|
|
<div class="name">language</div>
|
|
<div class="code-name">#icon-language</div>
|
|
</li>
|
|
|
|
<li class="dib">
|
|
<svg class="icon svg-icon" aria-hidden="true">
|
|
<use xlink:href="#icon-system"></use>
|
|
</svg>
|
|
<div class="name">system</div>
|
|
<div class="code-name">#icon-system</div>
|
|
</li>
|
|
|
|
<li class="dib">
|
|
<svg class="icon svg-icon" aria-hidden="true">
|
|
<use xlink:href="#icon-personal"></use>
|
|
</svg>
|
|
<div class="name">personal</div>
|
|
<div class="code-name">#icon-personal</div>
|
|
</li>
|
|
|
|
<li class="dib">
|
|
<svg class="icon svg-icon" aria-hidden="true">
|
|
<use xlink:href="#icon-image"></use>
|
|
</svg>
|
|
<div class="name">image</div>
|
|
<div class="code-name">#icon-image</div>
|
|
</li>
|
|
|
|
<li class="dib">
|
|
<svg class="icon svg-icon" aria-hidden="true">
|
|
<use xlink:href="#icon-video"></use>
|
|
</svg>
|
|
<div class="name">video</div>
|
|
<div class="code-name">#icon-video</div>
|
|
</li>
|
|
|
|
<li class="dib">
|
|
<svg class="icon svg-icon" aria-hidden="true">
|
|
<use xlink:href="#icon-java"></use>
|
|
</svg>
|
|
<div class="name">java</div>
|
|
<div class="code-name">#icon-java</div>
|
|
</li>
|
|
|
|
<li class="dib">
|
|
<svg class="icon svg-icon" aria-hidden="true">
|
|
<use xlink:href="#icon-tsx"></use>
|
|
</svg>
|
|
<div class="name">tsx</div>
|
|
<div class="code-name">#icon-tsx</div>
|
|
</li>
|
|
|
|
<li class="dib">
|
|
<svg class="icon svg-icon" aria-hidden="true">
|
|
<use xlink:href="#icon-py"></use>
|
|
</svg>
|
|
<div class="name">py</div>
|
|
<div class="code-name">#icon-py</div>
|
|
</li>
|
|
|
|
<li class="dib">
|
|
<svg class="icon svg-icon" aria-hidden="true">
|
|
<use xlink:href="#icon-vue"></use>
|
|
</svg>
|
|
<div class="name">vue</div>
|
|
<div class="code-name">#icon-vue</div>
|
|
</li>
|
|
|
|
<li class="dib">
|
|
<svg class="icon svg-icon" aria-hidden="true">
|
|
<use xlink:href="#icon-tiff"></use>
|
|
</svg>
|
|
<div class="name">tiff</div>
|
|
<div class="code-name">#icon-tiff</div>
|
|
</li>
|
|
|
|
<li class="dib">
|
|
<svg class="icon svg-icon" aria-hidden="true">
|
|
<use xlink:href="#icon-bmp"></use>
|
|
</svg>
|
|
<div class="name">bmp</div>
|
|
<div class="code-name">#icon-bmp</div>
|
|
</li>
|
|
|
|
<li class="dib">
|
|
<svg class="icon svg-icon" aria-hidden="true">
|
|
<use xlink:href="#icon-bb"></use>
|
|
</svg>
|
|
<div class="name">bb</div>
|
|
<div class="code-name">#icon-bb</div>
|
|
</li>
|
|
|
|
<li class="dib">
|
|
<svg class="icon svg-icon" aria-hidden="true">
|
|
<use xlink:href="#icon-html"></use>
|
|
</svg>
|
|
<div class="name">html</div>
|
|
<div class="code-name">#icon-html</div>
|
|
</li>
|
|
|
|
<li class="dib">
|
|
<svg class="icon svg-icon" aria-hidden="true">
|
|
<use xlink:href="#icon-css"></use>
|
|
</svg>
|
|
<div class="name">css</div>
|
|
<div class="code-name">#icon-css</div>
|
|
</li>
|
|
|
|
<li class="dib">
|
|
<svg class="icon svg-icon" aria-hidden="true">
|
|
<use xlink:href="#icon-xmlwenjian"></use>
|
|
</svg>
|
|
<div class="name">xml文件</div>
|
|
<div class="code-name">#icon-xmlwenjian</div>
|
|
</li>
|
|
|
|
<li class="dib">
|
|
<svg class="icon svg-icon" aria-hidden="true">
|
|
<use xlink:href="#icon-flow"></use>
|
|
</svg>
|
|
<div class="name">flow</div>
|
|
<div class="code-name">#icon-flow</div>
|
|
</li>
|
|
|
|
<li class="dib">
|
|
<svg class="icon svg-icon" aria-hidden="true">
|
|
<use xlink:href="#icon-unknow1"></use>
|
|
</svg>
|
|
<div class="name">unknow</div>
|
|
<div class="code-name">#icon-unknow1</div>
|
|
</li>
|
|
|
|
<li class="dib">
|
|
<svg class="icon svg-icon" aria-hidden="true">
|
|
<use xlink:href="#icon-js"></use>
|
|
</svg>
|
|
<div class="name">js</div>
|
|
<div class="code-name">#icon-js</div>
|
|
</li>
|
|
|
|
<li class="dib">
|
|
<svg class="icon svg-icon" aria-hidden="true">
|
|
<use xlink:href="#icon-json"></use>
|
|
</svg>
|
|
<div class="name">json</div>
|
|
<div class="code-name">#icon-json</div>
|
|
</li>
|
|
|
|
<li class="dib">
|
|
<svg class="icon svg-icon" aria-hidden="true">
|
|
<use xlink:href="#icon-doc"></use>
|
|
</svg>
|
|
<div class="name">doc</div>
|
|
<div class="code-name">#icon-doc</div>
|
|
</li>
|
|
|
|
<li class="dib">
|
|
<svg class="icon svg-icon" aria-hidden="true">
|
|
<use xlink:href="#icon-txt"></use>
|
|
</svg>
|
|
<div class="name">txt</div>
|
|
<div class="code-name">#icon-txt</div>
|
|
</li>
|
|
|
|
<li class="dib">
|
|
<svg class="icon svg-icon" aria-hidden="true">
|
|
<use xlink:href="#icon-docx"></use>
|
|
</svg>
|
|
<div class="name">docx</div>
|
|
<div class="code-name">#icon-docx</div>
|
|
</li>
|
|
|
|
<li class="dib">
|
|
<svg class="icon svg-icon" aria-hidden="true">
|
|
<use xlink:href="#icon-disk"></use>
|
|
</svg>
|
|
<div class="name">disk</div>
|
|
<div class="code-name">#icon-disk</div>
|
|
</li>
|
|
|
|
<li class="dib">
|
|
<svg class="icon svg-icon" aria-hidden="true">
|
|
<use xlink:href="#icon-disknet"></use>
|
|
</svg>
|
|
<div class="name">disket</div>
|
|
<div class="code-name">#icon-disknet</div>
|
|
</li>
|
|
|
|
<li class="dib">
|
|
<svg class="icon svg-icon" aria-hidden="true">
|
|
<use xlink:href="#icon-pdf"></use>
|
|
</svg>
|
|
<div class="name">pdf</div>
|
|
<div class="code-name">#icon-pdf</div>
|
|
</li>
|
|
|
|
<li class="dib">
|
|
<svg class="icon svg-icon" aria-hidden="true">
|
|
<use xlink:href="#icon-notices"></use>
|
|
</svg>
|
|
<div class="name">notices</div>
|
|
<div class="code-name">#icon-notices</div>
|
|
</li>
|
|
|
|
<li class="dib">
|
|
<svg class="icon svg-icon" aria-hidden="true">
|
|
<use xlink:href="#icon-wifi"></use>
|
|
</svg>
|
|
<div class="name">wifi</div>
|
|
<div class="code-name">#icon-wifi</div>
|
|
</li>
|
|
|
|
<li class="dib">
|
|
<svg class="icon svg-icon" aria-hidden="true">
|
|
<use xlink:href="#icon-battery"></use>
|
|
</svg>
|
|
<div class="name">battery</div>
|
|
<div class="code-name">#icon-battery</div>
|
|
</li>
|
|
|
|
<li class="dib">
|
|
<svg class="icon svg-icon" aria-hidden="true">
|
|
<use xlink:href="#icon-ink"></use>
|
|
</svg>
|
|
<div class="name">ink</div>
|
|
<div class="code-name">#icon-ink</div>
|
|
</li>
|
|
|
|
<li class="dib">
|
|
<svg class="icon svg-icon" aria-hidden="true">
|
|
<use xlink:href="#icon-info"></use>
|
|
</svg>
|
|
<div class="name">info</div>
|
|
<div class="code-name">#icon-info</div>
|
|
</li>
|
|
|
|
<li class="dib">
|
|
<svg class="icon svg-icon" aria-hidden="true">
|
|
<use xlink:href="#icon-calculator"></use>
|
|
</svg>
|
|
<div class="name">calculator</div>
|
|
<div class="code-name">#icon-calculator</div>
|
|
</li>
|
|
|
|
<li class="dib">
|
|
<svg class="icon svg-icon" aria-hidden="true">
|
|
<use xlink:href="#icon-todo"></use>
|
|
</svg>
|
|
<div class="name">todo</div>
|
|
<div class="code-name">#icon-todo</div>
|
|
</li>
|
|
|
|
<li class="dib">
|
|
<svg class="icon svg-icon" aria-hidden="true">
|
|
<use xlink:href="#icon-gant"></use>
|
|
</svg>
|
|
<div class="name">gant</div>
|
|
<div class="code-name">#icon-gant</div>
|
|
</li>
|
|
|
|
<li class="dib">
|
|
<svg class="icon svg-icon" aria-hidden="true">
|
|
<use xlink:href="#icon-draw"></use>
|
|
</svg>
|
|
<div class="name">draw</div>
|
|
<div class="code-name">#icon-draw</div>
|
|
</li>
|
|
|
|
<li class="dib">
|
|
<svg class="icon svg-icon" aria-hidden="true">
|
|
<use xlink:href="#icon-music"></use>
|
|
</svg>
|
|
<div class="name">music</div>
|
|
<div class="code-name">#icon-music</div>
|
|
</li>
|
|
|
|
<li class="dib">
|
|
<svg class="icon svg-icon" aria-hidden="true">
|
|
<use xlink:href="#icon-brower"></use>
|
|
</svg>
|
|
<div class="name">brower</div>
|
|
<div class="code-name">#icon-brower</div>
|
|
</li>
|
|
|
|
<li class="dib">
|
|
<svg class="icon svg-icon" aria-hidden="true">
|
|
<use xlink:href="#icon-calendar"></use>
|
|
</svg>
|
|
<div class="name">calendar</div>
|
|
<div class="code-name">#icon-calendar</div>
|
|
</li>
|
|
|
|
<li class="dib">
|
|
<svg class="icon svg-icon" aria-hidden="true">
|
|
<use xlink:href="#icon-gallery"></use>
|
|
</svg>
|
|
<div class="name">gallery</div>
|
|
<div class="code-name">#icon-gallery</div>
|
|
</li>
|
|
|
|
<li class="dib">
|
|
<svg class="icon svg-icon" aria-hidden="true">
|
|
<use xlink:href="#icon-terminal"></use>
|
|
</svg>
|
|
<div class="name">terminal</div>
|
|
<div class="code-name">#icon-terminal</div>
|
|
</li>
|
|
|
|
<li class="dib">
|
|
<svg class="icon svg-icon" aria-hidden="true">
|
|
<use xlink:href="#icon-noteapp"></use>
|
|
</svg>
|
|
<div class="name">noteapp</div>
|
|
<div class="code-name">#icon-noteapp</div>
|
|
</li>
|
|
|
|
<li class="dib">
|
|
<svg class="icon svg-icon" aria-hidden="true">
|
|
<use xlink:href="#icon-biji"></use>
|
|
</svg>
|
|
<div class="name">note</div>
|
|
<div class="code-name">#icon-biji</div>
|
|
</li>
|
|
|
|
<li class="dib">
|
|
<svg class="icon svg-icon" aria-hidden="true">
|
|
<use xlink:href="#icon-editorbt"></use>
|
|
</svg>
|
|
<div class="name">editorapp</div>
|
|
<div class="code-name">#icon-editorbt</div>
|
|
</li>
|
|
|
|
<li class="dib">
|
|
<svg class="icon svg-icon" aria-hidden="true">
|
|
<use xlink:href="#icon-kanban"></use>
|
|
</svg>
|
|
<div class="name">kanban</div>
|
|
<div class="code-name">#icon-kanban</div>
|
|
</li>
|
|
|
|
<li class="dib">
|
|
<svg class="icon svg-icon" aria-hidden="true">
|
|
<use xlink:href="#icon-mindext"></use>
|
|
</svg>
|
|
<div class="name">mindext</div>
|
|
<div class="code-name">#icon-mindext</div>
|
|
</li>
|
|
|
|
<li class="dib">
|
|
<svg class="icon svg-icon" aria-hidden="true">
|
|
<use xlink:href="#icon-kb"></use>
|
|
</svg>
|
|
<div class="name">kb</div>
|
|
<div class="code-name">#icon-kb</div>
|
|
</li>
|
|
|
|
<li class="dib">
|
|
<svg class="icon svg-icon" aria-hidden="true">
|
|
<use xlink:href="#icon-backup"></use>
|
|
</svg>
|
|
<div class="name">backup</div>
|
|
<div class="code-name">#icon-backup</div>
|
|
</li>
|
|
|
|
<li class="dib">
|
|
<svg class="icon svg-icon" aria-hidden="true">
|
|
<use xlink:href="#icon-diannao"></use>
|
|
</svg>
|
|
<div class="name">computer</div>
|
|
<div class="code-name">#icon-diannao</div>
|
|
</li>
|
|
|
|
<li class="dib">
|
|
<svg class="icon svg-icon" aria-hidden="true">
|
|
<use xlink:href="#icon-computer2"></use>
|
|
</svg>
|
|
<div class="name">computer2</div>
|
|
<div class="code-name">#icon-computer2</div>
|
|
</li>
|
|
|
|
<li class="dib">
|
|
<svg class="icon svg-icon" aria-hidden="true">
|
|
<use xlink:href="#icon-unknow"></use>
|
|
</svg>
|
|
<div class="name">unknow</div>
|
|
<div class="code-name">#icon-unknow</div>
|
|
</li>
|
|
|
|
<li class="dib">
|
|
<svg class="icon svg-icon" aria-hidden="true">
|
|
<use xlink:href="#icon-picedit"></use>
|
|
</svg>
|
|
<div class="name">picedit</div>
|
|
<div class="code-name">#icon-picedit</div>
|
|
</li>
|
|
|
|
<li class="dib">
|
|
<svg class="icon svg-icon" aria-hidden="true">
|
|
<use xlink:href="#icon-psd"></use>
|
|
</svg>
|
|
<div class="name">psd</div>
|
|
<div class="code-name">#icon-psd</div>
|
|
</li>
|
|
|
|
<li class="dib">
|
|
<svg class="icon svg-icon" aria-hidden="true">
|
|
<use xlink:href="#icon-photo"></use>
|
|
</svg>
|
|
<div class="name">photo</div>
|
|
<div class="code-name">#icon-photo</div>
|
|
</li>
|
|
|
|
<li class="dib">
|
|
<svg class="icon svg-icon" aria-hidden="true">
|
|
<use xlink:href="#icon-noteexe"></use>
|
|
</svg>
|
|
<div class="name">noteexe</div>
|
|
<div class="code-name">#icon-noteexe</div>
|
|
</li>
|
|
|
|
<li class="dib">
|
|
<svg class="icon svg-icon" aria-hidden="true">
|
|
<use xlink:href="#icon-markdown"></use>
|
|
</svg>
|
|
<div class="name">markdown</div>
|
|
<div class="code-name">#icon-markdown</div>
|
|
</li>
|
|
|
|
<li class="dib">
|
|
<svg class="icon svg-icon" aria-hidden="true">
|
|
<use xlink:href="#icon-jpg"></use>
|
|
</svg>
|
|
<div class="name">jpg</div>
|
|
<div class="code-name">#icon-jpg</div>
|
|
</li>
|
|
|
|
<li class="dib">
|
|
<svg class="icon svg-icon" aria-hidden="true">
|
|
<use xlink:href="#icon-gif"></use>
|
|
</svg>
|
|
<div class="name">gif</div>
|
|
<div class="code-name">#icon-gif</div>
|
|
</li>
|
|
|
|
<li class="dib">
|
|
<svg class="icon svg-icon" aria-hidden="true">
|
|
<use xlink:href="#icon-png"></use>
|
|
</svg>
|
|
<div class="name">png</div>
|
|
<div class="code-name">#icon-png</div>
|
|
</li>
|
|
|
|
<li class="dib">
|
|
<svg class="icon svg-icon" aria-hidden="true">
|
|
<use xlink:href="#icon-svg"></use>
|
|
</svg>
|
|
<div class="name">svg</div>
|
|
<div class="code-name">#icon-svg</div>
|
|
</li>
|
|
|
|
<li class="dib">
|
|
<svg class="icon svg-icon" aria-hidden="true">
|
|
<use xlink:href="#icon-ttf"></use>
|
|
</svg>
|
|
<div class="name">ttf</div>
|
|
<div class="code-name">#icon-ttf</div>
|
|
</li>
|
|
|
|
<li class="dib">
|
|
<svg class="icon svg-icon" aria-hidden="true">
|
|
<use xlink:href="#icon-webp"></use>
|
|
</svg>
|
|
<div class="name">webp</div>
|
|
<div class="code-name">#icon-webp</div>
|
|
</li>
|
|
|
|
<li class="dib">
|
|
<svg class="icon svg-icon" aria-hidden="true">
|
|
<use xlink:href="#icon-md"></use>
|
|
</svg>
|
|
<div class="name">md</div>
|
|
<div class="code-name">#icon-md</div>
|
|
</li>
|
|
|
|
<li class="dib">
|
|
<svg class="icon svg-icon" aria-hidden="true">
|
|
<use xlink:href="#icon-word"></use>
|
|
</svg>
|
|
<div class="name">word</div>
|
|
<div class="code-name">#icon-word</div>
|
|
</li>
|
|
|
|
<li class="dib">
|
|
<svg class="icon svg-icon" aria-hidden="true">
|
|
<use xlink:href="#icon-pptexe"></use>
|
|
</svg>
|
|
<div class="name">pptexe</div>
|
|
<div class="code-name">#icon-pptexe</div>
|
|
</li>
|
|
|
|
<li class="dib">
|
|
<svg class="icon svg-icon" aria-hidden="true">
|
|
<use xlink:href="#icon-pptx"></use>
|
|
</svg>
|
|
<div class="name">pptx</div>
|
|
<div class="code-name">#icon-pptx</div>
|
|
</li>
|
|
|
|
<li class="dib">
|
|
<svg class="icon svg-icon" aria-hidden="true">
|
|
<use xlink:href="#icon-note"></use>
|
|
</svg>
|
|
<div class="name">note</div>
|
|
<div class="code-name">#icon-note</div>
|
|
</li>
|
|
|
|
<li class="dib">
|
|
<svg class="icon svg-icon" aria-hidden="true">
|
|
<use xlink:href="#icon-xlsx"></use>
|
|
</svg>
|
|
<div class="name">xlsx</div>
|
|
<div class="code-name">#icon-xlsx</div>
|
|
</li>
|
|
|
|
<li class="dib">
|
|
<svg class="icon svg-icon" aria-hidden="true">
|
|
<use xlink:href="#icon-excel"></use>
|
|
</svg>
|
|
<div class="name">excel</div>
|
|
<div class="code-name">#icon-excel</div>
|
|
</li>
|
|
|
|
<li class="dib">
|
|
<svg class="icon svg-icon" aria-hidden="true">
|
|
<use xlink:href="#icon-xls1"></use>
|
|
</svg>
|
|
<div class="name">xls</div>
|
|
<div class="code-name">#icon-xls1</div>
|
|
</li>
|
|
|
|
<li class="dib">
|
|
<svg class="icon svg-icon" aria-hidden="true">
|
|
<use xlink:href="#icon-ppt"></use>
|
|
</svg>
|
|
<div class="name">ppt</div>
|
|
<div class="code-name">#icon-ppt</div>
|
|
</li>
|
|
|
|
<li class="dib">
|
|
<svg class="icon svg-icon" aria-hidden="true">
|
|
<use xlink:href="#icon-store"></use>
|
|
</svg>
|
|
<div class="name">store</div>
|
|
<div class="code-name">#icon-store</div>
|
|
</li>
|
|
|
|
<li class="dib">
|
|
<svg class="icon svg-icon" aria-hidden="true">
|
|
<use xlink:href="#icon-mind"></use>
|
|
</svg>
|
|
<div class="name">mind</div>
|
|
<div class="code-name">#icon-mind</div>
|
|
</li>
|
|
|
|
<li class="dib">
|
|
<svg class="icon svg-icon" aria-hidden="true">
|
|
<use xlink:href="#icon-mindexe"></use>
|
|
</svg>
|
|
<div class="name">mindexe</div>
|
|
<div class="code-name">#icon-mindexe</div>
|
|
</li>
|
|
|
|
<li class="dib">
|
|
<svg class="icon svg-icon" aria-hidden="true">
|
|
<use xlink:href="#icon-setup"></use>
|
|
</svg>
|
|
<div class="name">setup</div>
|
|
<div class="code-name">#icon-setup</div>
|
|
</li>
|
|
|
|
<li class="dib">
|
|
<svg class="icon svg-icon" aria-hidden="true">
|
|
<use xlink:href="#icon-setting"></use>
|
|
</svg>
|
|
<div class="name">setting</div>
|
|
<div class="code-name">#icon-setting</div>
|
|
</li>
|
|
|
|
<li class="dib">
|
|
<svg class="icon svg-icon" aria-hidden="true">
|
|
<use xlink:href="#icon-folder"></use>
|
|
</svg>
|
|
<div class="name">folder</div>
|
|
<div class="code-name">#icon-folder</div>
|
|
</li>
|
|
|
|
<li class="dib">
|
|
<svg class="icon svg-icon" aria-hidden="true">
|
|
<use xlink:href="#icon-favorite"></use>
|
|
</svg>
|
|
<div class="name">favorite</div>
|
|
<div class="code-name">#icon-favorite</div>
|
|
</li>
|
|
|
|
<li class="dib">
|
|
<svg class="icon svg-icon" aria-hidden="true">
|
|
<use xlink:href="#icon-cut"></use>
|
|
</svg>
|
|
<div class="name">cut</div>
|
|
<div class="code-name">#icon-cut</div>
|
|
</li>
|
|
|
|
<li class="dib">
|
|
<svg class="icon svg-icon" aria-hidden="true">
|
|
<use xlink:href="#icon-baiban"></use>
|
|
</svg>
|
|
<div class="name">baiban</div>
|
|
<div class="code-name">#icon-baiban</div>
|
|
</li>
|
|
|
|
<li class="dib">
|
|
<svg class="icon svg-icon" aria-hidden="true">
|
|
<use xlink:href="#icon-notice"></use>
|
|
</svg>
|
|
<div class="name">notice</div>
|
|
<div class="code-name">#icon-notice</div>
|
|
</li>
|
|
|
|
<li class="dib">
|
|
<svg class="icon svg-icon" aria-hidden="true">
|
|
<use xlink:href="#icon-windows"></use>
|
|
</svg>
|
|
<div class="name">windows</div>
|
|
<div class="code-name">#icon-windows</div>
|
|
</li>
|
|
|
|
<li class="dib">
|
|
<svg class="icon svg-icon" aria-hidden="true">
|
|
<use xlink:href="#icon-file"></use>
|
|
</svg>
|
|
<div class="name">file</div>
|
|
<div class="code-name">#icon-file</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"><script src="./iconfont.js"></script>
|
|
</code></pre>
|
|
<h3 id="-css-">第二步:加入通用 CSS 代码(引入一次就行):</h3>
|
|
<pre><code class="language-html"><style>
|
|
.icon {
|
|
width: 1em;
|
|
height: 1em;
|
|
vertical-align: -0.15em;
|
|
fill: currentColor;
|
|
overflow: hidden;
|
|
}
|
|
</style>
|
|
</code></pre>
|
|
<h3 id="-">第三步:挑选相应图标并获取类名,应用于页面:</h3>
|
|
<pre><code class="language-html"><svg class="icon" aria-hidden="true">
|
|
<use xlink:href="#icon-xxx"></use>
|
|
</svg>
|
|
</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>
|
|
|