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

<!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">&#xe626;</span>
<div class="name">微信</div>
<div class="code-name">&amp;#xe626;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe6af;</span>
<div class="name">QQ</div>
<div class="code-name">&amp;#xe6af;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe634;</span>
<div class="name">logout</div>
<div class="code-name">&amp;#xe634;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe676;</span>
<div class="name">恢复</div>
<div class="code-name">&amp;#xe676;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#x100c2;</span>
<div class="name">workchat</div>
<div class="code-name">&amp;#x100c2;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe625;</span>
<div class="name">progress</div>
<div class="code-name">&amp;#xe625;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe623;</span>
<div class="name">zip</div>
<div class="code-name">&amp;#xe623;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe8b0;</span>
<div class="name">gz</div>
<div class="code-name">&amp;#xe8b0;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe620;</span>
<div class="name">tar</div>
<div class="code-name">&amp;#xe620;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe65e;</span>
<div class="name">bz2</div>
<div class="code-name">&amp;#xe65e;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe65f;</span>
<div class="name">chat</div>
<div class="code-name">&amp;#xe65f;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe631;</span>
<div class="name">aiassistant</div>
<div class="code-name">&amp;#xe631;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe780;</span>
<div class="name">aichat</div>
<div class="code-name">&amp;#xe780;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe646;</span>
<div class="name">aitrans</div>
<div class="code-name">&amp;#xe646;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe652;</span>
<div class="name">aiknow</div>
<div class="code-name">&amp;#xe652;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe78c;</span>
<div class="name">airecording</div>
<div class="code-name">&amp;#xe78c;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe65d;</span>
<div class="name">aispoken</div>
<div class="code-name">&amp;#xe65d;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe6ea;</span>
<div class="name">aisetting</div>
<div class="code-name">&amp;#xe6ea;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe636;</span>
<div class="name">aidown</div>
<div class="code-name">&amp;#xe636;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#x100c1;</span>
<div class="name">aicreation</div>
<div class="code-name">&amp;#x100c1;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe6a3;</span>
<div class="name">aisd</div>
<div class="code-name">&amp;#xe6a3;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe7ac;</span>
<div class="name">mp4</div>
<div class="code-name">&amp;#xe7ac;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe685;</span>
<div class="name">mp3</div>
<div class="code-name">&amp;#xe685;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe668;</span>
<div class="name">link</div>
<div class="code-name">&amp;#xe668;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe662;</span>
<div class="name">url</div>
<div class="code-name">&amp;#xe662;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe6c7;</span>
<div class="name">error</div>
<div class="code-name">&amp;#xe6c7;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe7b2;</span>
<div class="name">question</div>
<div class="code-name">&amp;#xe7b2;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe63f;</span>
<div class="name">warning</div>
<div class="code-name">&amp;#xe63f;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe61e;</span>
<div class="name">account</div>
<div class="code-name">&amp;#xe61e;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe756;</span>
<div class="name">language</div>
<div class="code-name">&amp;#xe756;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe62f;</span>
<div class="name">system</div>
<div class="code-name">&amp;#xe62f;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe679;</span>
<div class="name">personal</div>
<div class="code-name">&amp;#xe679;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe70e;</span>
<div class="name">image</div>
<div class="code-name">&amp;#xe70e;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe758;</span>
<div class="name">video</div>
<div class="code-name">&amp;#xe758;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe61c;</span>
<div class="name">java</div>
<div class="code-name">&amp;#xe61c;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe665;</span>
<div class="name">tsx</div>
<div class="code-name">&amp;#xe665;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe80a;</span>
<div class="name">py</div>
<div class="code-name">&amp;#xe80a;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe61d;</span>
<div class="name">vue</div>
<div class="code-name">&amp;#xe61d;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe6a4;</span>
<div class="name">tiff</div>
<div class="code-name">&amp;#xe6a4;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe61b;</span>
<div class="name">bmp</div>
<div class="code-name">&amp;#xe61b;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe67c;</span>
<div class="name">bb</div>
<div class="code-name">&amp;#xe67c;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe68a;</span>
<div class="name">html</div>
<div class="code-name">&amp;#xe68a;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe618;</span>
<div class="name">css</div>
<div class="code-name">&amp;#xe618;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe619;</span>
<div class="name">xml文件</div>
<div class="code-name">&amp;#xe619;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe61a;</span>
<div class="name">flow</div>
<div class="code-name">&amp;#xe61a;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe6a6;</span>
<div class="name">unknow</div>
<div class="code-name">&amp;#xe6a6;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe639;</span>
<div class="name">js</div>
<div class="code-name">&amp;#xe639;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe63b;</span>
<div class="name">json</div>
<div class="code-name">&amp;#xe63b;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe614;</span>
<div class="name">doc</div>
<div class="code-name">&amp;#xe614;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe615;</span>
<div class="name">txt</div>
<div class="code-name">&amp;#xe615;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe617;</span>
<div class="name">docx</div>
<div class="code-name">&amp;#xe617;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe7a5;</span>
<div class="name">disk</div>
<div class="code-name">&amp;#xe7a5;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe613;</span>
<div class="name">disket</div>
<div class="code-name">&amp;#xe613;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe622;</span>
<div class="name">pdf</div>
<div class="code-name">&amp;#xe622;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe709;</span>
<div class="name">notices</div>
<div class="code-name">&amp;#xe709;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xeda9;</span>
<div class="name">wifi</div>
<div class="code-name">&amp;#xeda9;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe996;</span>
<div class="name">battery</div>
<div class="code-name">&amp;#xe996;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe612;</span>
<div class="name">ink</div>
<div class="code-name">&amp;#xe612;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe645;</span>
<div class="name">info</div>
<div class="code-name">&amp;#xe645;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe66b;</span>
<div class="name">calculator</div>
<div class="code-name">&amp;#xe66b;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe610;</span>
<div class="name">todo</div>
<div class="code-name">&amp;#xe610;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe616;</span>
<div class="name">gant</div>
<div class="code-name">&amp;#xe616;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe701;</span>
<div class="name">draw</div>
<div class="code-name">&amp;#xe701;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe99b;</span>
<div class="name">music</div>
<div class="code-name">&amp;#xe99b;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe611;</span>
<div class="name">brower</div>
<div class="code-name">&amp;#xe611;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe621;</span>
<div class="name">calendar</div>
<div class="code-name">&amp;#xe621;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe635;</span>
<div class="name">gallery</div>
<div class="code-name">&amp;#xe635;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe62e;</span>
<div class="name">terminal</div>
<div class="code-name">&amp;#xe62e;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe60f;</span>
<div class="name">noteapp</div>
<div class="code-name">&amp;#xe60f;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe669;</span>
<div class="name">note</div>
<div class="code-name">&amp;#xe669;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe6c6;</span>
<div class="name">editorapp</div>
<div class="code-name">&amp;#xe6c6;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe62a;</span>
<div class="name">kanban</div>
<div class="code-name">&amp;#xe62a;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe686;</span>
<div class="name">mindext</div>
<div class="code-name">&amp;#xe686;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe657;</span>
<div class="name">kb</div>
<div class="code-name">&amp;#xe657;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe62d;</span>
<div class="name">backup</div>
<div class="code-name">&amp;#xe62d;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe60d;</span>
<div class="name">computer</div>
<div class="code-name">&amp;#xe60d;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe60e;</span>
<div class="name">computer2</div>
<div class="code-name">&amp;#xe60e;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe656;</span>
<div class="name">unknow</div>
<div class="code-name">&amp;#xe656;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe60b;</span>
<div class="name">picedit</div>
<div class="code-name">&amp;#xe60b;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe61f;</span>
<div class="name">psd</div>
<div class="code-name">&amp;#xe61f;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe6a5;</span>
<div class="name">photo</div>
<div class="code-name">&amp;#xe6a5;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe643;</span>
<div class="name">noteexe</div>
<div class="code-name">&amp;#xe643;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe624;</span>
<div class="name">markdown</div>
<div class="code-name">&amp;#xe624;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe604;</span>
<div class="name">jpg</div>
<div class="code-name">&amp;#xe604;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe601;</span>
<div class="name">gif</div>
<div class="code-name">&amp;#xe601;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe605;</span>
<div class="name">png</div>
<div class="code-name">&amp;#xe605;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe606;</span>
<div class="name">svg</div>
<div class="code-name">&amp;#xe606;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe608;</span>
<div class="name">ttf</div>
<div class="code-name">&amp;#xe608;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe633;</span>
<div class="name">webp</div>
<div class="code-name">&amp;#xe633;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe6b6;</span>
<div class="name">md</div>
<div class="code-name">&amp;#xe6b6;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe640;</span>
<div class="name">word</div>
<div class="code-name">&amp;#xe640;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe642;</span>
<div class="name">pptexe</div>
<div class="code-name">&amp;#xe642;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe664;</span>
<div class="name">pptx</div>
<div class="code-name">&amp;#xe664;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe603;</span>
<div class="name">note</div>
<div class="code-name">&amp;#xe603;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe60a;</span>
<div class="name">xlsx</div>
<div class="code-name">&amp;#xe60a;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe678;</span>
<div class="name">excel</div>
<div class="code-name">&amp;#xe678;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe607;</span>
<div class="name">xls</div>
<div class="code-name">&amp;#xe607;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe60c;</span>
<div class="name">ppt</div>
<div class="code-name">&amp;#xe60c;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe600;</span>
<div class="name">store</div>
<div class="code-name">&amp;#xe600;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe609;</span>
<div class="name">mind</div>
<div class="code-name">&amp;#xe609;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe764;</span>
<div class="name">mindexe</div>
<div class="code-name">&amp;#xe764;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe644;</span>
<div class="name">setup</div>
<div class="code-name">&amp;#xe644;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe770;</span>
<div class="name">setting</div>
<div class="code-name">&amp;#xe770;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe898;</span>
<div class="name">folder</div>
<div class="code-name">&amp;#xe898;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe602;</span>
<div class="name">favorite</div>
<div class="code-name">&amp;#xe602;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe648;</span>
<div class="name">cut</div>
<div class="code-name">&amp;#xe648;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe688;</span>
<div class="name">baiban</div>
<div class="code-name">&amp;#xe688;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe63a;</span>
<div class="name">notice</div>
<div class="code-name">&amp;#xe63a;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xea06;</span>
<div class="name">windows</div>
<div class="code-name">&amp;#xea06;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe671;</span>
<div class="name">file</div>
<div class="code-name">&amp;#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"
>&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-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">&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-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">&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>