joey5628/doodle-mini
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
c21ac9e9351713e677653b114b84b37c03589ca6
doodle-mini/miniprogram/assets/fonts/demo_index.html
T
R524809 b85afde7c0 feat: 涂色识字
2026-05-08 18:36:45 +08:00

1638 lines
69 KiB
HTML
Raw Blame History

<!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=4942823" 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">&#xe633;</span>
<div class="name">more-vert</div>
<div class="code-name">&amp;#xe633;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe634;</span>
<div class="name">more-horiz</div>
<div class="code-name">&amp;#xe634;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe632;</span>
<div class="name">iconify-material-symbols_check-rounded</div>
<div class="code-name">&amp;#xe632;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe631;</span>
<div class="name">grid</div>
<div class="code-name">&amp;#xe631;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe630;</span>
<div class="name">grid-o</div>
<div class="code-name">&amp;#xe630;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe62f;</span>
<div class="name">mood-empty</div>
<div class="code-name">&amp;#xe62f;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe62e;</span>
<div class="name">loading</div>
<div class="code-name">&amp;#xe62e;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe62d;</span>
<div class="name">task-o</div>
<div class="code-name">&amp;#xe62d;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe62c;</span>
<div class="name">refresh</div>
<div class="code-name">&amp;#xe62c;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe62b;</span>
<div class="name">keyboard-arrow-up</div>
<div class="code-name">&amp;#xe62b;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe623;</span>
<div class="name">start-a</div>
<div class="code-name">&amp;#xe623;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe624;</span>
<div class="name">draw-o</div>
<div class="code-name">&amp;#xe624;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe625;</span>
<div class="name">ABC-list</div>
<div class="code-name">&amp;#xe625;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe626;</span>
<div class="name">font-size</div>
<div class="code-name">&amp;#xe626;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe627;</span>
<div class="name">two-columns</div>
<div class="code-name">&amp;#xe627;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe628;</span>
<div class="name">back-rounde</div>
<div class="code-name">&amp;#xe628;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe629;</span>
<div class="name">keyboard-arrow-down</div>
<div class="code-name">&amp;#xe629;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe62a;</span>
<div class="name">square-half</div>
<div class="code-name">&amp;#xe62a;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe621;</span>
<div class="name">home-o</div>
<div class="code-name">&amp;#xe621;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe622;</span>
<div class="name">home</div>
<div class="code-name">&amp;#xe622;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe61e;</span>
<div class="name">setting</div>
<div class="code-name">&amp;#xe61e;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe620;</span>
<div class="name">round-star-o</div>
<div class="code-name">&amp;#xe620;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe61f;</span>
<div class="name">plus</div>
<div class="code-name">&amp;#xe61f;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe60d;</span>
<div class="name">star</div>
<div class="code-name">&amp;#xe60d;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe60e;</span>
<div class="name">minus</div>
<div class="code-name">&amp;#xe60e;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe60f;</span>
<div class="name">round-star</div>
<div class="code-name">&amp;#xe60f;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe610;</span>
<div class="name">star-o</div>
<div class="code-name">&amp;#xe610;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe611;</span>
<div class="name">about-o</div>
<div class="code-name">&amp;#xe611;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe612;</span>
<div class="name">feedback-o</div>
<div class="code-name">&amp;#xe612;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe613;</span>
<div class="name">feedback</div>
<div class="code-name">&amp;#xe613;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe614;</span>
<div class="name">about</div>
<div class="code-name">&amp;#xe614;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe615;</span>
<div class="name">heart-o</div>
<div class="code-name">&amp;#xe615;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe616;</span>
<div class="name">heart</div>
<div class="code-name">&amp;#xe616;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe617;</span>
<div class="name">print</div>
<div class="code-name">&amp;#xe617;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe618;</span>
<div class="name">family</div>
<div class="code-name">&amp;#xe618;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe619;</span>
<div class="name">search-plus</div>
<div class="code-name">&amp;#xe619;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe61a;</span>
<div class="name">search</div>
<div class="code-name">&amp;#xe61a;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe61b;</span>
<div class="name">clock-o</div>
<div class="code-name">&amp;#xe61b;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe61c;</span>
<div class="name">clock</div>
<div class="code-name">&amp;#xe61c;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe61d;</span>
<div class="name">search-minus</div>
<div class="code-name">&amp;#xe61d;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe60c;</span>
<div class="name">setting-o</div>
<div class="code-name">&amp;#xe60c;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe60b;</span>
<div class="name">line-share</div>
<div class="code-name">&amp;#xe60b;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe602;</span>
<div class="name">arrow-up</div>
<div class="code-name">&amp;#xe602;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe603;</span>
<div class="name">arrow-right</div>
<div class="code-name">&amp;#xe603;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe604;</span>
<div class="name">arrow-down</div>
<div class="code-name">&amp;#xe604;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe605;</span>
<div class="name">arrow-left</div>
<div class="code-name">&amp;#xe605;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe650;</span>
<div class="name">success</div>
<div class="code-name">&amp;#xe650;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe92b;</span>
<div class="name">moon</div>
<div class="code-name">&amp;#xe92b;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe6ea;</span>
<div class="name">evernote</div>
<div class="code-name">&amp;#xe6ea;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe712;</span>
<div class="name">sun</div>
<div class="code-name">&amp;#xe712;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe6c2;</span>
<div class="name">refresh-two</div>
<div class="code-name">&amp;#xe6c2;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe63b;</span>
<div class="name">clear</div>
<div class="code-name">&amp;#xe63b;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe600;</span>
<div class="name">guide</div>
<div class="code-name">&amp;#xe600;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe71d;</span>
<div class="name">dustbin-o</div>
<div class="code-name">&amp;#xe71d;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe72a;</span>
<div class="name">editor-o</div>
<div class="code-name">&amp;#xe72a;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe704;</span>
<div class="name">close</div>
<div class="code-name">&amp;#xe704;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe716;</span>
<div class="name">download</div>
<div class="code-name">&amp;#xe716;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe73b;</span>
<div class="name">error-o</div>
<div class="code-name">&amp;#xe73b;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe70d;</span>
<div class="name">close-bold</div>
<div class="code-name">&amp;#xe70d;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe73c;</span>
<div class="name">translate</div>
<div class="code-name">&amp;#xe73c;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe729;</span>
<div class="name">share-o</div>
<div class="code-name">&amp;#xe729;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe728;</span>
<div class="name">share</div>
<div class="code-name">&amp;#xe728;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe727;</span>
<div class="name">wechat-o</div>
<div class="code-name">&amp;#xe727;</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('data:application/x-font-woff;charset=utf-8;base64,d09GRgABAAAAACa0AAsAAAAAPKQAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABHU1VCAAABCAAAADsAAABUIIslek9TLzIAAAFEAAAARAAAAGA8FUwBY21hcAAAAYgAAAHhAAAFRJAMArRnbHlmAAADbAAAHx8AAC6UirvUT2hlYWQAACKMAAAALwAAADYv+gYmaGhlYQAAIrwAAAAeAAAAJAhyBTZobXR4AAAi3AAAABMAAAEAAXUAAGxvY2EAACLwAAAAggAAAIJh8VX8bWF4cAAAI3QAAAAdAAAAIAFUAKZuYW1lAAAjlAAAAUAAAAJnEKM8sHBvc3QAACTUAAAB3wAAAvEhCxLyeJxjYGRgYOBiMGCwY2BycfMJYeDLSSzJY5BiYGGAAJA8MpsxJzM9kYEDxgPKsYBpDiBmg4gCACY7BUgAeJxjYGFhY5zAwMrAwNTJdIaBgaEfQjO+ZjBi5ACKMrAyM2AFAWmuKQwHnjG81GZu+N/AwMB8hwFIMjCiKGICAGmoDJR4nOXUV1IbURCF4V9owAGJIEBEkUGJIIITko2XwHL85PLaWEzfgk3g0zp+pOwFeKY+lWbqTrp9+gKzQF3OpIKZ79T0j9qdztam5+u8n56vags63teucUHMxm2M4yEe47lUpVlapV06ZVAmT8OXl+mImZh/ZUS3jD3ir1tt+qRTfryy/+SXRnxgqLc754IBfTbYZIttduiwy56uPeCQI4450V269FhjnTYrrDJPgyYLLLLEMi193zve8oY5zUY1/e4Zbrnkhis+M+aaL3zknm985RN3TBjpBef+8QX/w9bIn3r15+g+q26qjupvqhNRt8xZVKbaKUWmKhLzpnoSDVNliaapxsSCqdrEoqnuxJIpAcSyKQtEy5QKYsWUD2LVlBRizZQZom1KD7FuyhGxYUoUsWnKFrFlShmxbcobsWNKHtExZZDYNfKZe0Y+Z9/I5x8Y+b6HRr7vkZHzdGxZgTgxcp5OjZynrpHz1DNynvpGztPAyHkaWvZ7nJk6gzg39QhxYeoW4tLUN8TIcj2JK5uuE9eWa0zcWK4rcWtkRsZGnnsw8t6PRl73bOpISmXqTUrT1KWUlqlfKW1T51I6ph6mdC2zWnqmvqb0TR1OGZh6nTI2dT1lYup/nobG6DcwR8ChAAAAeJyVegmQJFeZXr738r6zsjKz7ivr6K7qruqus3u6u6ZnNNMzmnskumZGGg0jRoAOdMJaI0BSc8rgjQUsEEesjuAynhYbBgublfGuggAJNgS7ZtWjDbCwwGN2CS0Gh2zWYFeN/5dZ3TODtGy4Kqvy5ct35f/+9/3f/79kCAMfPMDnGYXxGJ9hSoVKHfXa3aYb5ck/ksaMH1d11FxptfzXSdXiatbym5BE6PWStMugXzJAW/2iy9rv/SNpdKnfl14nhS7r+HVSDAr6fA9+D2PBcyLapIB4v9BA5T5qeugh9AV9Mm2M5gzb0c8bKFPVn0dfMNJVmmW8YExmDEZimIsXyXsIYnhGZmwYe5LJMmWmysBjLaCO70RdeuJazV4fLSG/1KIX4Y+mC7wzvmzDg9XQxj3PNV959lmUugeeQ3tu+Nxzz6E0vX6Opu/xm+Mr+hj30OvnwuTgWfoZPNf076HFoC6Mh7m4QdZgbLGtMfWYZWYXs5c5wDB2vplBjhXlBfj6+UK5Uu5Y7W6v6xX4NGp1SDhy23daqAnZMHiHXlhtKFlDTqvkQKFWWGID1/yFQibpQMfDjdxcxC1lUzm/ubHR9Nc24IPWbV+1aco0vOzaxqi2EX4IU1jwgyo6R7KJfBlaWrKMGq03XIMWELNxkTGNWGZtA0E7a5vtDGv0FkwhB8/5A7JOFpgEs8DsZ04yt8PTRTO4j3pd+gXRlkG4lbKgI4H3ykGm67leBgU54TcoQb+92YKOMrg12+yjOubo4/pbWV2nXQZhBVd5KpbVXe/+3Jcf3VZLRmSN4/XCwzfe/fa3Pl6MD9h2u7v3xJ+utNIRE5NCxohMdjP5nVdVD+WTXipa/E9qVEGqraiOgjQb5WRJ0cZZkXg8cpEZXyBGsTkRrR17/L7t/NXLjW3liVYnm5uceOMfpv104qM3rVy/96FWL54rLteXytdWm6cnHKua0EVL5vPxaDxb2vWS6sQisup4tlxTbF4ILuPfisQhYcvQcbgWMENqjAprr1PQsdNqUzFhZvXRszsG9frBw3hjsOPso6s3HD5Yr9PifLB+1kG/jEDz00yeqUDtPOi0FXWpeEChysjKW6jl+A0keL2KvZUiq8NBsdks4nPwP2zic6PzGxvnp5Zu+fjSg5sJwjT94TlYrj4e+M3hKh4Mz6Hzg8XpxVseXhp9c5yAYYRrmeJWjWJW2ey2mq7XaXdhih2Xr/g8rOkFVEew4GBoMHF9FMw+Zj7y7LMf2ffBmXgxDpgUOR+Jo1jkQ4V7d9/2iU/cdvXZvJjLG1Ltc7VnUebZxfn9wW1aCCWKscVdnzj/iav7hqrkzdW3MFvj6OA9jAkXAl8od7cDsmQRwFWhgpkXzXoOGSOzbo7MXN1E33wRTsbIskbmdA6qiKFM4TkIIwAWGluYAnJ1gi83Plsty0fwIyBRB36YQeujVfobrZLB/z1Hf4MBYgaDc/SD11YHq/TAqxdhmPBbhcvxPAKGfZUIMGYXsCLJ1Jk3MEyrgygYuDB2z4UFgiot1EASqggVjzTDRSUAgkR5v8xnEOpRAGlTwXZgiRRgRWUQvWpRqIb6OhR113FTM3M5U1nUeF3nteFfnl5En8tkR6fw6uLx7NKHDz/kuLntsdTBFpX0aG05YmiV/qmlUwdmDkRVNumrRjFZq5Z2reZNq/g1PKsJGhwLKm1VG35/FX02mxndgF5a+kRmaSQdXqkkM5G+kjBiEyjhx9HKsqBIsppITuysLuwuxDXfZVVDS+Ri2XJGn3D8mQDTf0ZuIYdB8glmiukDWt7I3MzczfxLwJU6zKqBeIou21HLgzNuIM9vwZLJIND5PqYY4qPXXPPBkuij4KrdXUDNDOZBgDquoUK50wOlBFj12gG2NrtCO1CbZpdWLwh81AvUFr7lAvRfKI/4lETQdQSJuq5g880mVnRNQuzdqblfy5aMRVtFazTB8rogjtZeL890XROt6Q6nqYI4vM6QlyNZVxQkQ+e8fOSgbLTKBnzKBw2l1VKMt+b7JlbTBs8JuTtyqVSul5oyBI430io2+3mypLMKYZ8XdIXHEl8s8hLmFV1477Jk2lFNMqOSzpOLzJVXbs6LJGMcQQcVw0gWcppWrGRNQ15LxNcUo2X8ujgZxaajyGKl4t/mTzi2KCuOiaOToLvs1npJM9uYfcxBWCdNl1o1CuWgdgDqwBf69ADA7yO469kuKGMA9w3kBxagjns23KNKC8pOTTWVOiItshaJp8sKxpVGZlvDiPKaPJHMHyjqGucMfxorC3/KS5ynyREeo4X/usA6qhLVWPK0UEbfzM8SbFpe30vxrhY1R7sGX0ZrFNjtOGcQNoZQtJKAttJ1w+Z0TlR0tJr0hn9umoqGkCIT9utfV02EJNOR8Q4vORpM59yKbtveStISBdQbvUqff8w/LMYBCw/AbAe6FciAKhYsSuRbrUu51NbBDXjA4MZa01+nALtuF8AKMevr60FGPJIQxXU/7hKah4MiFImpIaYoTPE4yIlHOBx3MyLNDPDv4iv4p8RlIgwjIVeHjlAACwigGPjVJ9E2E2WnzNHXE5qG9prTWVDA0bPGFJz3xItmDjItnJ0yLsdSGzC9HNAyQKMebQhWgMCjV2RxBK01jBdfNBtZcyTKzn9hIaueRTQLZachjxWgGSFo6zT+CUgpHliqEjPJTG9ZK9CNwGD1AnZToVi7BH8Ua1G+M4mtSdzJk9zwmWTJEmTdxMuJEvJsSR4NAyy94jd8hp7xMk3jl0vJ4TPxiMiJfgJfFc0LBI2eWV5bXn5mGa0tD59Zptz34gvky2B7bWaGAUhGofWkSGpRIyxRU+UX6ohKEYgpYAYwRSuqY2AiddTpQfnA1gI4jCc5g/oYMgIlh8kGJUdMPILOaQB+Js+PLowuaMZqTXNkTkJrahFgQeJkR6vZxUZiNAAudw4Mom2w7MAKWYKhTsQi9mC66MZhwjasuMDbMqo5GotRanSBc+eMWBza0rTRmhSPGReZeKMYhYbWLzKUzwBLiBF0Ba/JpbycwKcjbUo9KFf9MplmGrCOGWnrGflQXcNpCayKY/khVx1LhC5smz60DwLYjgB1x48SstHqRMGN35Bq2+lqbj7ibD6yFFdF24qfc0yOZDZHHJJQVCttN2VQar8+2qCMlA6dPprEcWQkxCOjDVQzgQGEfsvFvyYfg3HbzAPMv6B+S2joWgD8YAfpBHCVbqVHacASaoMSN6gFAAgPExW/LPg6ovocwDwk4AA15z365Fmq8RlgLs3tNDU+eq3udkxb7IHWQtOEpsscgF0baA2OUlozlTXM/pRTSZvJmOxp6P6+JPVZgjAwlyZPMK9yB6ttAxFBI/v2E1EjRqt6kJNYmUfNOCKsSCvwhGVRYpbjZA4TcrjagsERjuf374dLlhWJ3q4epmd6NZtAhBu9Y/rw9PThE/trtf3o1axRcWp9M1N2UrM6L6Ifd7rdDsuxHIdYlt2zALBJcNK3j/CcQnQdq+K1tp/ECItoYQ+RIjwtz4myTPbO8zD6FBSVYFAY6aDSGAvKUdtPIfhglt1Ga9TQ1MHrDk3h6f0nDkwHevVj8jniMyvMQzA7DSwUAuyAWfLpH2U3GeoDRN3QWeiBH+i1MtRauN0ONQOh0YVUYexG9GAOolkCFXGgngFH0jE1J0HbYE2gRlA4cEGa44apy4ElkBEHwzXFYkysxo6fgKcxl3ZEDTGvi/yxQ6ygaGwE4B1sxNE38CKnp0QjenAHi4XrjonENmSdzbNdH+aRFU6ddLKqbKwcFghYZWwVJiLXXysI/LXXRyYKFjZ8IhxeMWQt45w8BQzOnzMydkUTWfwjRKjI0sbVhwDPTSQSA8xbI3bmFtDx6W2EhYnBIF6yMAXDLQ6uiTWMuWVWQCZMmCJElbfef+MdMAQMCmWRZHHC2LWNE49fX3JKLpYaSywiSw0JuyXnjltFbtsuo1JOEAtz3NtuSorACUQh5J3/h3yAcODvTzEd5gTzZuBYgV/KR3Xqktb5dp/3CuXQ3c9vJij08XATAK7PQ2GhECi+F8QlwkUAExjln8Rf4iRJ5HkWZMXzoiRxw+O/mxNNpSbSafzxaDo9kUqNvotZToB8GYoJHIt/53JWi2lwRJPJ6FYKfeX313lTGjrYPNAHXjuE1wyzq7lJWLLpSmp4HGle0tVQqpK+5F+sg60AltqyK6Uk4gS79JvdP0fte+9F7Z/vHv0GTX03iZKj/5b87uiFxy/5RuirgU8CUsWUlVPvH4CC+MOnVVeDSY4beEX3dN1DR5RoTNUszUt4Wlj/4o/IZ0kO5ogBF6oQRgzo6qEaTX0DoPq9wFmg35A8UY0PyC5dNnhZ8id8ac4nyqmTqQJ2qMb6Bsl14qCvIsHXnIx3csTwKcisOLiQOnlKIT7+bSQajdx0u0RMrtpxqIrdekd6SlUbfYBp1G+o6lT6jltZAW/b5XSqnEmk2wNbsiUjyhx6XqVHV6ZHtuSF3vnBD/r3/nG//8f3fv5y0X316DWfeYv+sY/qbx197XfFGHCtjaDdKHCHJtMN0J4PqDkljfDE1CcqE4oT5cB7btI7AeMiLh+qrwAuG2becebGuYWFuRvP/N1m4h2BX0397Kc3ExMoW89k6pnTgwGpXVE4SAyZK0oHCcx4WVrpkxfDuMgvwTZZ4FWq4MlkgfUAO+62y9QXqbQ6PpjVLihCwBUr+UoePPWOhRnL8wqe5x05MvpUI4/X8o1GfvhXBXzNcA2J9E7Be+JXw+P4r+iNUS4/g46gl4evTqOXQ3sY9qmBL5lgGO+KLnqX937XpcZ/tdWleVmzZzc7C9v9S/LvQfbUL6besN8BQVotEmqjNwbsTagu49oAPrXVRxf35LKaetex1TedeXrnciJRWVo8fh1mVkfgGqO1HYt73njDjWe+NDsrCAcP7Dt147cPH5yaDvnI/yBPAvlNUT5SEsLQUKcd+LNei56o70v7tmEIdeSXdewEmpDdCjvVAQpY7sHmkVK1sqs6O7COWIPZ6q5KtXSkudh7c7H45l7j2E6/PnGs++F+/8PdYxN1f+cxgOC3N49su2pbdXdlfmpqvrK7ChdHmrjYqFYbqLjzWOPAod3H5+6fg+P47kMHoI3ieJ2GYwao4LYGjAEXwfFpdTM4HK+Ama2+Gr23+JePwrisSTQzeUV3zCV/i9AZUQFPchRROnnLHc8r6VDS3AEqFmIMpWWEGYE8gQMW4/GrRufQ+ohZL0cacTzo7lvHq+uj2xC9VYyPXllfX11HTLcUsfd1L27GJl4gX4F5V5gi8PV55lrmtq3ocJ+GVQjlhtBb4NhRZ9pxA8eHlGn0J8oXghB2Z7MwkMel0P1204i6SGM/qdQplHudSzf8zWYuBZkP1fyyWN9WF69jiRZRGsBma5H4L+xyp1zujH7lJ1StuafZvM+JxFv+GvWhnHhkNRJHy/ArJVeTJaDBQR28RoO2xVnUWmnCqqpVd0XvSORyidGrsmNJGyAr9LTdKaNSp/zKFSWBxG9QxwuKhLQaHMq1RLmcAD8Vjvg4ln5xSN4HeJ0FuzoH0vKESqeij8ObFJrBWIYLxnN5wfObfdQGXNcR+A093/E7sLg6LaeFH7+w64Lafv/OdPLaZkpzl/Y27lnYcWfBkwVMSiX1F3Oner1Td9G/c9fXr4cDlaBGUZ3ydU7x99Wax/51p5iSpH3z5WoqM/e2mjouDn//jpa/ngnX2s/IZ0iCMWjknwPm74dY6QD9R6XAHaeujB9yaxg6uW70k9KJxruffPJ/P5lJo+zwfw4WMlm0mDowubqYzi6m9ydQNp2Bu0++u3GiNPrJxctuwTmTHctpg3wddCvBtECzmFJzkwJ22uNosE4yBJwLb9PQ0aFtrSsH5ApwOdhfytpmws5NROf82szy+/7geI3rnX7nTgCfUrKsO1kjue1bdwHkz2/bee+jtz6Te7k2EU1Zdr68+yBU7sdShq0u3PTu9913/SxhdiyWp7dffctbmtM33hkYBhqAPf/yPe0PolBWPyBfgzG7gEwMjTLBnHmB+Q0jTZWyXbFajhcGbnecPbzr43ua00duzrtGfunmU3t/vPwMqe04++i5R8/m0oJrJGc++bXrlrpv6bWGn/3niPnx27f0pxLozwzF2kp/S3moDLaUBxwQx+uVQv4VEooKDUU+/vtU4MKukXKZ4ly4gEq/R8eKoFCXlOZCfdMOf5pMMUeY9zEfZT4dsBLqYfWB38MQgYQDFae7KQVwpnQEjtbYqXKj9DqIaILH5AW+VRZM4vaAqEM+daQoj4eZLYfbAgY8fR1Rr6ESGJcG6gV2hgb/qOuwHQWOmlsKl0+4lMgmVSVHJSJi3BNZlgxES5aPmCkuwbn6uh5jY1zKvFaN8QOBSF1Z7spYGCiOwB9VlKiQYG31q7rLJklEFcUjWoIfAFMU3un3mum0ZSRMmTdvN7TdVVVt9gpRUdTdQrflX+Xponm7qSbdbelmzzdE8Mf/oXGoXj90A/2rF5sUotBNckolpC95Kv+wwRHg8KZ5SDNN7ZBpEgspysNqSu6rObUPBR+2gelbmBWihxQTISikGkGOoj5sWrLAVU7JvMhKRsywGjMTswgrbyy76exyvHxKFmKpiDszU4jZBq+8sWK5+T0/qx8+ebge/F1kmitNODb51S/JMnCHbcxVzAFmFbAAyGqn3SvpKEwEKF8qdyrtcWAZlLFQrnCuFxWiAhfcDjIrm0Rji++g8bmJvxObKkTI6G+tagMSvjXVqFoojhGkYs2V8Hr0t9S5QXFaxvLpnZChjGbDM9aVgJyYkcJUjHc/bwaJpm9FTPPzgqDT1MpNW5cGL9Ailk+zjoS0BsXG56ISnMc8PUYMxgONpnTx0tZBg5qpQrljobZeTGivaCXt77VESXsiUUygF7VEUX9F016ht54YfjuSSETwwri9P8APBe2Vw3hy1Bi3HHhTrTw+qsYK2kuq+pJWiKmPDH9uxWIW9vCyWojTPPUlNearj8QKsXF7Av4hba9E/eSgsca4aStAbDz5CG3oJZU2Gi+on4San37kij6wR/tgLhsfmK1geqA5J+oGUe92A+Xp1Pl59BdBbYXnNqtHYrHI8OebQ7QEk3+JFgkGyYz5P/txwjM1wC8G8cJlXyMEsl6IX94m4I+/DvuwJMWS5fJsY7795uVyJ8VNL979mT9ykslSfiKj6FYs6ZemZ7rbdly1/yD+E5YohpMq1JpLdx3vHJsS924/e/Qhy0mUqq05I+pmsuXSVKVemS5OZI+P97i/SMqA3XVmBUZGdxG7PRqA3rQqoNYlzxFoQIjCTgN1euN9BsCp189H/zZJZk7e994F68yefdecPnqkMVPy70fvSKftFCv6ApeKZDKRFCf4Ipv65qWkfakAfnHhvfednCHJQ/f7pZnGkaOnr9m354zxu8WCdp763SaDApu84xvkbcQFr+u9zMeo5GuBg+Tzs73WjKMj4FX25TzaAXshBI5ksLlB42XjqBj9CpthmnFmeKfdpTslS4hu5zXHu1NZNLbQoTPqb862z9s8xegerVDHPLpLdk9UFU5G6PuIJX9uqhIrpmfTmi1pAjZ4Fal2utgsZTiDyIrtpCwHi5JqRcUI32t1y7Iq6RKRwcNPRT+ay5BC3BRNTmaThkA+kLcLTlIweA68eBaJcTeXyHmePXM1wVjeJWGCvWISdyS4jV5Aoj35Rnf4acVQVDsKQ7A1SRcR4aScEm0Vc12NEBqAkZSIm03mvLwKBiRiV2RQt6Ixk9DNeIGkc49EUxSmhLiqeJygROOTR07svbo3U+5PleJRWQAn+a9FFlYAZnmiRwl154P9rafI98gBYPBxpsIsMnuZNzBvYu5mHqAcKGC/IUmuBCu8jikOcR6Qa2pV+9hFl/zaS74uR+0dZcyhw7eVpmxBx0H4HnOhAa4HwcvmFX1hRo1EYpHIBVGsSTELSVUpjqNVCVkxqcaxrGIao1cO7Fgulcul5R2f2kyMfgjV1EX6R05uJYdvH1fhgwbwLZJU5Q1TAW8MGh99K+xqalwa/m6S4tK4r63+wwqYXNFfkPgtrb15oMplTUM9aWu80PkDl7oIuNuvyEeJCZ7MPrBtdGs4XPf0+QNZ0EhvEDUcI3UZ/BbKY6gIKY2hFiFDI8StYAbSlHAB+cKygpXOgycPHZiuu1l35b49D3YU7GSV+zXtfiWLZi7LUVXIcbaKy1Y0IhM1Kzfq0wcOX6/SHUF1z9k9DTnrYfluJa/cpWB05DVZ3lYNOSLLkUu+4c3wfIQpMVXqNyNw88GPCOdZsN3gPZOeXUehCzZ2t+xW4DWSwOfY/KFvnT371FNxP+1V2WJy+HSyyFa9tB9/yo+fjftr7eGXcHFk1u5cvA6+d+KTZ8/CDbdARj9KTk4mUYkUXCgHhz/6D2fPLo5eOBt8NuNh+Of4NzAPDAolu0nvsdANY7cN+nJAHVFi6OEfqLISV79ozMhC1MrHt+X16ULJtFRtxtzPxeMyfzMX0/GHISlxV0/ec/Pxg/1WeSbG5zrb9h697qabq1/SZCWh/lKR+fH7Kr8l94B9yjKT4HksB7uWfofu/NJXb4JXFBbQ1isULWoHS5ueqU990zylAnlEYY2yGpCu27r8grzhzybTT6Sqf0Z1r1lNoa+nJ5uQHq3w7BMc9xRa5rjRXpZHz4/+IlwLT4Yn/MDO9ORkeiekh6NUtZrCGJI7OfjsHH6TpTHK0eiuiPod2vAVfyF/+y15iMjgq2eZCaYZoEk42jEOgDtHmXh5e7hx4waXIHBUEcAU092RArk5WMAz9B9/SncMwxndlq39kRXjJpUk+pQzP/eF0VdMPnlDIoIOqNnVrGHoxmQ3XIz43+ju3DytIeXYuPWhEq1hGB+CGu7xKG+j/Y/RGlVdN8b84034p0yS7jhRAiJIiJJET0KUKfakgIlU8AwqKU5SHv1w9EM56SioNPob2c5BWVSWcraM1lCZ5o9+hCZkWu5vaDlbgnI/kuykPPZx/xd5Av8avLY2fUOFT4/n8bIZzIdTyLnN7WM6ZNF7jlUJBkXWNJvnhgOOtxP2VBafy07Zo5NiRjwv2XH5MTvhPCYlbOllW1vjeJ6D0pDKTE9nINWTpA168zH0HZo9mntMshNSaLND35vGNFf+fyKaNh1gMLIsEJgoHbQXEjeohZk7T9/QnZvr3nD6x5uJO09dc7gxM9M4fM03NhNVAMvTp6VYhP5bKfH0aTFlSTedlkjiiqpBYiheUTdIoL+XaNVI2IxFGwAMP3VaSlz+TtA/Nb+LSAOuqo1eHb2qAadEkKLXCL7B9Vp4Hr36+uXG83uBPEEKzB10D6NUIXWq2iFl6YXuIiU4NUQFVA+c0PBVpDwUC/iO3y4DDwok74UR9pAWBcQ04DYLwP6ilCF7buh+0psdN1ou9TzyWOPdbCwu7NWK0xPzFbU94Xiop0cLzxPiEjehEvd7ehTMxer0ipVPGiaPHMhUjWgqV572cwmi8Twfk1hk3Ll7qt+YmeStRIOVBTUmlL9XpncsjEe/3Hu1dityZVGU/5Vm2k46obWPze7DthkXRGFZVXlPW45kjYehk2ZqwtBUwdW4dKk4W0ynXMuA2xEOidvn8vl41Fq8DYtYtoigaCdOWCwfYzH7wBe/yGzGkf8EDwFHjjNvB4nSfe4+XgBEppE8b+zM8wFKdwJyGPj6JT54oSPcp6NOvdcMNkf98ct/NHIR5PfagYNforY2gxxoD8qFrJPuPIM3j47LKsZXv2vvJEtU25EePB7h+cjxByXHBt8Z88v/LFfkbPRDIvDzleefn5jnYjFufuL9H+IEysn4jzy0dEyMxcRjSz/4wdIxQcYyG3W50e7ph/ZmZQMTdGYPz+85Q3fiLHWle/3C3xFLPrP3vpWdJbCpiD/6rrhoi4l3HuWRFFFKkxNInp9flsSF7lUTc5zncXMT3//+xDxrcAJb4GTOEAaL5zeWBnwsxg+WBseBhESj7OH5jsJiU5lvkJWbBPHMCm7UVas5CHX2l+Tz+B+AAx6D5UKDf0EkJNhkjnrhZYDKlSCAIvggFYELcMB1Xitol07AawSNDoiGwOFi4V27dCDdmE+o9x+LsGzk2P1GBhFMmrvvXcHov3ORGAsyEkJxhYJ76CN8IEvuQ+/fFO/zz1fmqRkRgHERbnlhUcZT02WOU0Xh6NkEp3Hx+45KplWKN3e9Y2WPwJoxYGbHjm2KZeP84kAwQFoFVuAMdp6KcCzMq7beE/kY/gag9BLg4SnmXmaN+UP6Vk0vjPl7buBfBCt2vNdPiViw+UX1yIsCpxN4wPU62truaG0mOBpYLAQIm4HmaChpib5mV2l6wat0AlgCGnnyacw6eBk3Ot43ggR94aGPM+iuSuk9+xZuPWKDOC2HI/G5hb3LndZixVfaIp8rEBZxeGrikOpUpr9huG7Gcb5tOA6c0H/M525/4PZcHk7bi4Vl1SlY9i/aU5OzuZRSFoRsjqZnJ6eESDICx2cimmwKRLdBH7+/c66zfWJvHVgDtN/OFZLx1WZlT1JUc6DM4NYQ4jhYdlhD6+SPH3EyQcfB/3+em5nuNGvTdzfqHTnCmmo1nfOfc5zdE7l5V1QdmRDRia4c3u04t2qRSAIslBaRI7ZOBJP5fwg2kRAAeJxjYGRgYADiiyfmzY3nt/nKwM3CAALPlBOFEfT/LSxTmP2BXA4GJpAoADLqCiYAeJxjYGRgYG7438AQw1rKAAQsUxgYGVCBAwBdyQOzAAB4nGNhYGBgGaKYtZRyMwCh4wF3AAAAAAAAPAB2AJgA5gFaAfwCFgJcAqACwAL6A4IEWATYBSAFRgVsBboGPAaYB2gINgjQCOoJCgliCY4J5gogCkwKhAreCxALSAviDDoMdgzQDQINUg4+Dr4O5g8ODzYPYg+uEB4Q8hGuEh4SchKyEx4TdhOsE/gUZhScFUQV9haAF0oAAHicY2BkYGBwYJjFwMUAAkxAzAVm/wfzGQAe+gH7AAAAeJyFkT1uwkAQhZ/BkASUKEqkNGlWKSgSyfyUSKlQoKegB7PmR7bXWi9I1DlNjpAT5AjpaHOKSHnYQwNFvNrZb96+mR3JAO6wh4fyu+cu2cMls5IruMCjcJX6k7BPfhauoYmecJ36q3ADL3gTbrJjxg6ef8WshXdhD7f4EK7gBp/CVepfwj75W7iGB/wI16n/Cjcw8a6Fm2h54cDqqdNzNdupVWjSyKTueI71YhNP7ak80TZfmVR1g85RGulU22ObfLvoORepyJpEDXmr49iozJq1Dl2wdC7rt9uR6EFoEgxgoTGFY5xDYYYd4wohDFJERXRn+ZjuBTaIWWn/dU/otsipH3KFLgJ0zlwjutLCeTpNji1f61F1dCtuy5qENJRazUlisuIPPNytqYTUAyyLqgx9tLmiE39QzJD8AdiTb1d4nG1SZ3PbMAzVS6ztjjTde6aT3Xsm7Q/p0SJk8UyRLknV5/z6UpLT3PXKD8Q7gMB7ABhtReMpov+ffWxhGxPESJAiQ44CJaY4gZM4hdPYwRns4izO4Twu4CIu4TKu4Cqu4Tpu4CZu4Tbu4C7uYQ/38QAP8QiP8QQMT/EMz/ECL/EKr/EGb/EO7/EBH/EJn/EFX/EN+ziI8tZYYr/J+mJAjbHycE9WRst6zVruyUqumFu3M6Pcz6qhasGs6bQgMZlbKZL+YiZkG8GoXfp1qgwXUs8Tz92CmdRSbck1Owtazwy3gnFrzYp1y9R5bj3jibB8xUx28P0HU9L5vDbaMycPqfQrwyqjula7csb/Uu/+U0uYlS7dr473HXBVJ41piZlJb1JH3gc50yGV9ZwhslSdm/Q4bqXuXHEcTMYXKZ+ZzofGaiIxUJvsCMZDLG2ol2/iwcZLK7VPat5KtS5dcFUN61mSEaeVMn2ReLDTzYOBPN8oDGRKamKuCX1kR1MqR2DlvPHFcbsbqKj2qeuqipybhB3ojMIytfG07TpdbmbPwhwDceCM550UlIvO+ZnUoScS0hs76nKU9aX7/aUUygd3MbhZWL7IveXaqfAl0kFhyBmVrqhqeBhEFP0BP8HdiQA=') format('woff'),
url('iconfont.ttf?t=1778233491679') 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-more-vert"></span>
<div class="name">
more-vert
</div>
<div class="code-name">.icon-more-vert
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-more-horiz"></span>
<div class="name">
more-horiz
</div>
<div class="code-name">.icon-more-horiz
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-iconify-material-symbols_check-rounded"></span>
<div class="name">
iconify-material-symbols_check-rounded
</div>
<div class="code-name">.icon-iconify-material-symbols_check-rounded
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-grid"></span>
<div class="name">
grid
</div>
<div class="code-name">.icon-grid
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-grid-o"></span>
<div class="name">
grid-o
</div>
<div class="code-name">.icon-grid-o
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-mood-empty"></span>
<div class="name">
mood-empty
</div>
<div class="code-name">.icon-mood-empty
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-loading"></span>
<div class="name">
loading
</div>
<div class="code-name">.icon-loading
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-task-o"></span>
<div class="name">
task-o
</div>
<div class="code-name">.icon-task-o
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-refresh"></span>
<div class="name">
refresh
</div>
<div class="code-name">.icon-refresh
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-keyboard-arrow-up"></span>
<div class="name">
keyboard-arrow-up
</div>
<div class="code-name">.icon-keyboard-arrow-up
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-start-a"></span>
<div class="name">
start-a
</div>
<div class="code-name">.icon-start-a
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-draw-o"></span>
<div class="name">
draw-o
</div>
<div class="code-name">.icon-draw-o
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-ABC-list"></span>
<div class="name">
ABC-list
</div>
<div class="code-name">.icon-ABC-list
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-font-size"></span>
<div class="name">
font-size
</div>
<div class="code-name">.icon-font-size
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-two-columns"></span>
<div class="name">
two-columns
</div>
<div class="code-name">.icon-two-columns
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-back-rounde"></span>
<div class="name">
back-rounde
</div>
<div class="code-name">.icon-back-rounde
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-keyboard-arrow-down"></span>
<div class="name">
keyboard-arrow-down
</div>
<div class="code-name">.icon-keyboard-arrow-down
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-square-half"></span>
<div class="name">
square-half
</div>
<div class="code-name">.icon-square-half
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-home-o"></span>
<div class="name">
home-o
</div>
<div class="code-name">.icon-home-o
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-home"></span>
<div class="name">
home
</div>
<div class="code-name">.icon-home
</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-round-star-o"></span>
<div class="name">
round-star-o
</div>
<div class="code-name">.icon-round-star-o
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-plus"></span>
<div class="name">
plus
</div>
<div class="code-name">.icon-plus
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-star"></span>
<div class="name">
star
</div>
<div class="code-name">.icon-star
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-minus"></span>
<div class="name">
minus
</div>
<div class="code-name">.icon-minus
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-round-star"></span>
<div class="name">
round-star
</div>
<div class="code-name">.icon-round-star
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-star-o"></span>
<div class="name">
star-o
</div>
<div class="code-name">.icon-star-o
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-about-o"></span>
<div class="name">
about-o
</div>
<div class="code-name">.icon-about-o
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-feedback-o"></span>
<div class="name">
feedback-o
</div>
<div class="code-name">.icon-feedback-o
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-feedback"></span>
<div class="name">
feedback
</div>
<div class="code-name">.icon-feedback
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-about"></span>
<div class="name">
about
</div>
<div class="code-name">.icon-about
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-heart-o"></span>
<div class="name">
heart-o
</div>
<div class="code-name">.icon-heart-o
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-heart"></span>
<div class="name">
heart
</div>
<div class="code-name">.icon-heart
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-print"></span>
<div class="name">
print
</div>
<div class="code-name">.icon-print
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-family"></span>
<div class="name">
family
</div>
<div class="code-name">.icon-family
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-search-plus"></span>
<div class="name">
search-plus
</div>
<div class="code-name">.icon-search-plus
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-search"></span>
<div class="name">
search
</div>
<div class="code-name">.icon-search
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-clock-o"></span>
<div class="name">
clock-o
</div>
<div class="code-name">.icon-clock-o
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-clock"></span>
<div class="name">
clock
</div>
<div class="code-name">.icon-clock
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-search-minus"></span>
<div class="name">
search-minus
</div>
<div class="code-name">.icon-search-minus
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-setting-o"></span>
<div class="name">
setting-o
</div>
<div class="code-name">.icon-setting-o
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-line-share"></span>
<div class="name">
line-share
</div>
<div class="code-name">.icon-line-share
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-arrow-up"></span>
<div class="name">
arrow-up
</div>
<div class="code-name">.icon-arrow-up
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-arrow-right"></span>
<div class="name">
arrow-right
</div>
<div class="code-name">.icon-arrow-right
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-arrow-down"></span>
<div class="name">
arrow-down
</div>
<div class="code-name">.icon-arrow-down
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-arrow-left"></span>
<div class="name">
arrow-left
</div>
<div class="code-name">.icon-arrow-left
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-success"></span>
<div class="name">
success
</div>
<div class="code-name">.icon-success
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-moon"></span>
<div class="name">
moon
</div>
<div class="code-name">.icon-moon
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-evernote"></span>
<div class="name">
evernote
</div>
<div class="code-name">.icon-evernote
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-sun"></span>
<div class="name">
sun
</div>
<div class="code-name">.icon-sun
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-refresh-two"></span>
<div class="name">
refresh-two
</div>
<div class="code-name">.icon-refresh-two
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-clear"></span>
<div class="name">
clear
</div>
<div class="code-name">.icon-clear
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-guide"></span>
<div class="name">
guide
</div>
<div class="code-name">.icon-guide
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-dustbin-o"></span>
<div class="name">
dustbin-o
</div>
<div class="code-name">.icon-dustbin-o
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-editor-o"></span>
<div class="name">
editor-o
</div>
<div class="code-name">.icon-editor-o
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-close"></span>
<div class="name">
close
</div>
<div class="code-name">.icon-close
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-download"></span>
<div class="name">
download
</div>
<div class="code-name">.icon-download
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-error-o"></span>
<div class="name">
error-o
</div>
<div class="code-name">.icon-error-o
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-close-bold"></span>
<div class="name">
close-bold
</div>
<div class="code-name">.icon-close-bold
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-translate"></span>
<div class="name">
translate
</div>
<div class="code-name">.icon-translate
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-share-o"></span>
<div class="name">
share-o
</div>
<div class="code-name">.icon-share-o
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-share"></span>
<div class="name">
share
</div>
<div class="code-name">.icon-share
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-wechat-o"></span>
<div class="name">
wechat-o
</div>
<div class="code-name">.icon-wechat-o
</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-more-vert"></use>
</svg>
<div class="name">more-vert</div>
<div class="code-name">#icon-more-vert</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-more-horiz"></use>
</svg>
<div class="name">more-horiz</div>
<div class="code-name">#icon-more-horiz</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-iconify-material-symbols_check-rounded"></use>
</svg>
<div class="name">iconify-material-symbols_check-rounded</div>
<div class="code-name">#icon-iconify-material-symbols_check-rounded</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-grid"></use>
</svg>
<div class="name">grid</div>
<div class="code-name">#icon-grid</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-grid-o"></use>
</svg>
<div class="name">grid-o</div>
<div class="code-name">#icon-grid-o</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-mood-empty"></use>
</svg>
<div class="name">mood-empty</div>
<div class="code-name">#icon-mood-empty</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-loading"></use>
</svg>
<div class="name">loading</div>
<div class="code-name">#icon-loading</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-task-o"></use>
</svg>
<div class="name">task-o</div>
<div class="code-name">#icon-task-o</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-refresh"></use>
</svg>
<div class="name">refresh</div>
<div class="code-name">#icon-refresh</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-keyboard-arrow-up"></use>
</svg>
<div class="name">keyboard-arrow-up</div>
<div class="code-name">#icon-keyboard-arrow-up</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-start-a"></use>
</svg>
<div class="name">start-a</div>
<div class="code-name">#icon-start-a</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-draw-o"></use>
</svg>
<div class="name">draw-o</div>
<div class="code-name">#icon-draw-o</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-ABC-list"></use>
</svg>
<div class="name">ABC-list</div>
<div class="code-name">#icon-ABC-list</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-font-size"></use>
</svg>
<div class="name">font-size</div>
<div class="code-name">#icon-font-size</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-two-columns"></use>
</svg>
<div class="name">two-columns</div>
<div class="code-name">#icon-two-columns</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-back-rounde"></use>
</svg>
<div class="name">back-rounde</div>
<div class="code-name">#icon-back-rounde</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-keyboard-arrow-down"></use>
</svg>
<div class="name">keyboard-arrow-down</div>
<div class="code-name">#icon-keyboard-arrow-down</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-square-half"></use>
</svg>
<div class="name">square-half</div>
<div class="code-name">#icon-square-half</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-home-o"></use>
</svg>
<div class="name">home-o</div>
<div class="code-name">#icon-home-o</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-home"></use>
</svg>
<div class="name">home</div>
<div class="code-name">#icon-home</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-round-star-o"></use>
</svg>
<div class="name">round-star-o</div>
<div class="code-name">#icon-round-star-o</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-plus"></use>
</svg>
<div class="name">plus</div>
<div class="code-name">#icon-plus</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-star"></use>
</svg>
<div class="name">star</div>
<div class="code-name">#icon-star</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-minus"></use>
</svg>
<div class="name">minus</div>
<div class="code-name">#icon-minus</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-round-star"></use>
</svg>
<div class="name">round-star</div>
<div class="code-name">#icon-round-star</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-star-o"></use>
</svg>
<div class="name">star-o</div>
<div class="code-name">#icon-star-o</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-about-o"></use>
</svg>
<div class="name">about-o</div>
<div class="code-name">#icon-about-o</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-feedback-o"></use>
</svg>
<div class="name">feedback-o</div>
<div class="code-name">#icon-feedback-o</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-feedback"></use>
</svg>
<div class="name">feedback</div>
<div class="code-name">#icon-feedback</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-about"></use>
</svg>
<div class="name">about</div>
<div class="code-name">#icon-about</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-heart-o"></use>
</svg>
<div class="name">heart-o</div>
<div class="code-name">#icon-heart-o</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-heart"></use>
</svg>
<div class="name">heart</div>
<div class="code-name">#icon-heart</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-print"></use>
</svg>
<div class="name">print</div>
<div class="code-name">#icon-print</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-family"></use>
</svg>
<div class="name">family</div>
<div class="code-name">#icon-family</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-search-plus"></use>
</svg>
<div class="name">search-plus</div>
<div class="code-name">#icon-search-plus</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-search"></use>
</svg>
<div class="name">search</div>
<div class="code-name">#icon-search</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-clock-o"></use>
</svg>
<div class="name">clock-o</div>
<div class="code-name">#icon-clock-o</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-clock"></use>
</svg>
<div class="name">clock</div>
<div class="code-name">#icon-clock</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-search-minus"></use>
</svg>
<div class="name">search-minus</div>
<div class="code-name">#icon-search-minus</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-setting-o"></use>
</svg>
<div class="name">setting-o</div>
<div class="code-name">#icon-setting-o</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-line-share"></use>
</svg>
<div class="name">line-share</div>
<div class="code-name">#icon-line-share</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-arrow-up"></use>
</svg>
<div class="name">arrow-up</div>
<div class="code-name">#icon-arrow-up</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-arrow-right"></use>
</svg>
<div class="name">arrow-right</div>
<div class="code-name">#icon-arrow-right</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-arrow-down"></use>
</svg>
<div class="name">arrow-down</div>
<div class="code-name">#icon-arrow-down</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-arrow-left"></use>
</svg>
<div class="name">arrow-left</div>
<div class="code-name">#icon-arrow-left</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-success"></use>
</svg>
<div class="name">success</div>
<div class="code-name">#icon-success</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-moon"></use>
</svg>
<div class="name">moon</div>
<div class="code-name">#icon-moon</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-evernote"></use>
</svg>
<div class="name">evernote</div>
<div class="code-name">#icon-evernote</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-sun"></use>
</svg>
<div class="name">sun</div>
<div class="code-name">#icon-sun</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-refresh-two"></use>
</svg>
<div class="name">refresh-two</div>
<div class="code-name">#icon-refresh-two</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-clear"></use>
</svg>
<div class="name">clear</div>
<div class="code-name">#icon-clear</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-guide"></use>
</svg>
<div class="name">guide</div>
<div class="code-name">#icon-guide</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-dustbin-o"></use>
</svg>
<div class="name">dustbin-o</div>
<div class="code-name">#icon-dustbin-o</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-editor-o"></use>
</svg>
<div class="name">editor-o</div>
<div class="code-name">#icon-editor-o</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-close"></use>
</svg>
<div class="name">close</div>
<div class="code-name">#icon-close</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-download"></use>
</svg>
<div class="name">download</div>
<div class="code-name">#icon-download</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-error-o"></use>
</svg>
<div class="name">error-o</div>
<div class="code-name">#icon-error-o</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-close-bold"></use>
</svg>
<div class="name">close-bold</div>
<div class="code-name">#icon-close-bold</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-translate"></use>
</svg>
<div class="name">translate</div>
<div class="code-name">#icon-translate</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-share-o"></use>
</svg>
<div class="name">share-o</div>
<div class="code-name">#icon-share-o</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-share"></use>
</svg>
<div class="name">share</div>
<div class="code-name">#icon-share</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-wechat-o"></use>
</svg>
<div class="name">wechat-o</div>
<div class="code-name">#icon-wechat-o</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>
Reference in New Issue View Git Blame Copy Permalink