4309 lines
150 KiB
HTML
4309 lines
150 KiB
HTML
|
<!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=4159149" 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 haofont"></span>
|
|||
|
|
<div class="name">图书</div>
|
|||
|
|
<div class="code-name">&#xeac6;</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<span class="icon haofont"></span>
|
|||
|
|
<div class="name">舞台剧</div>
|
|||
|
|
<div class="code-name">&#xe65b;</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<span class="icon haofont"></span>
|
|||
|
|
<div class="name">音乐</div>
|
|||
|
|
<div class="code-name">&#xe65c;</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<span class="icon haofont"></span>
|
|||
|
|
<div class="name">游戏</div>
|
|||
|
|
<div class="code-name">&#xe8a1;</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<span class="icon haofont"></span>
|
|||
|
|
<div class="name">电影</div>
|
|||
|
|
<div class="code-name">&#xe62b;</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<span class="icon haofont"></span>
|
|||
|
|
<div class="name">星,星星,星形,半星,实星</div>
|
|||
|
|
<div class="code-name">&#xe9a1;</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<span class="icon haofont"></span>
|
|||
|
|
<div class="name">星,星星,星形,半星,实星</div>
|
|||
|
|
<div class="code-name">&#xe9a2;</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<span class="icon haofont"></span>
|
|||
|
|
<div class="name">星,星星,星形,半星</div>
|
|||
|
|
<div class="code-name">&#xe9a3;</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<span class="icon haofont"></span>
|
|||
|
|
<div class="name">困困鱼</div>
|
|||
|
|
<div class="code-name">&#xe612;</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<span class="icon haofont"></span>
|
|||
|
|
<div class="name">moon-clear-fill</div>
|
|||
|
|
<div class="code-name">&#xe821;</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<span class="icon haofont"></span>
|
|||
|
|
<div class="name">eicon_train-line</div>
|
|||
|
|
<div class="code-name">&#xe698;</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<span class="icon haofont"></span>
|
|||
|
|
<div class="name">disc-fill</div>
|
|||
|
|
<div class="code-name">&#xe6fd;</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<span class="icon haofont"></span>
|
|||
|
|
<div class="name">signal-tower-fill</div>
|
|||
|
|
<div class="code-name">&#xe6f2;</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<span class="icon haofont"></span>
|
|||
|
|
<div class="name">search-2-line</div>
|
|||
|
|
<div class="code-name">&#xe697;</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<span class="icon haofont"></span>
|
|||
|
|
<div class="name">chat-1-fill</div>
|
|||
|
|
<div class="code-name">&#xe6b2;</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<span class="icon haofont"></span>
|
|||
|
|
<div class="name">apps-fill</div>
|
|||
|
|
<div class="code-name">&#xe82d;</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<span class="icon haofont"></span>
|
|||
|
|
<div class="name">Home</div>
|
|||
|
|
<div class="code-name">&#xe69a;</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<span class="icon haofont"></span>
|
|||
|
|
<div class="name">英文</div>
|
|||
|
|
<div class="code-name">&#xe6d6;</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<span class="icon haofont"></span>
|
|||
|
|
<div class="name">简体</div>
|
|||
|
|
<div class="code-name">&#xe6d7;</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<span class="icon haofont"></span>
|
|||
|
|
<div class="name">繁体</div>
|
|||
|
|
<div class="code-name">&#xe6d8;</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<span class="icon haofont"></span>
|
|||
|
|
<div class="name">aifadian-line</div>
|
|||
|
|
<div class="code-name">&#xe695;</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<span class="icon haofont"></span>
|
|||
|
|
<div class="name">账号</div>
|
|||
|
|
<div class="code-name">&#xe696;</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<span class="icon haofont"></span>
|
|||
|
|
<div class="name">作者</div>
|
|||
|
|
<div class="code-name">&#xe694;</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<span class="icon haofont"></span>
|
|||
|
|
<div class="name">微信</div>
|
|||
|
|
<div class="code-name">&#xe693;</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<span class="icon haofont"></span>
|
|||
|
|
<div class="name">编辑</div>
|
|||
|
|
<div class="code-name">&#xe691;</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<span class="icon haofont"></span>
|
|||
|
|
<div class="name">check-circle</div>
|
|||
|
|
<div class="code-name">&#xe77d;</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<span class="icon haofont"></span>
|
|||
|
|
<div class="name">dashboard</div>
|
|||
|
|
<div class="code-name">&#xe6f7;</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<span class="icon haofont"></span>
|
|||
|
|
<div class="name">bullseye</div>
|
|||
|
|
<div class="code-name">&#xeaff;</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<span class="icon haofont"></span>
|
|||
|
|
<div class="name">logo-moment</div>
|
|||
|
|
<div class="code-name">&#xe690;</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<span class="icon haofont"></span>
|
|||
|
|
<div class="name">leetcode</div>
|
|||
|
|
<div class="code-name">&#xebf2;</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<span class="icon haofont"></span>
|
|||
|
|
<div class="name">gitlab</div>
|
|||
|
|
<div class="code-name">&#xe692;</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<span class="icon haofont"></span>
|
|||
|
|
<div class="name">csdn</div>
|
|||
|
|
<div class="code-name">&#xe68a;</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<span class="icon haofont"></span>
|
|||
|
|
<div class="name">dribbble</div>
|
|||
|
|
<div class="code-name">&#xe87f;</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<span class="icon haofont"></span>
|
|||
|
|
<div class="name">yuque</div>
|
|||
|
|
<div class="code-name">&#xe880;</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<span class="icon haofont"></span>
|
|||
|
|
<div class="name">linkedin</div>
|
|||
|
|
<div class="code-name">&#xe73b;</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<span class="icon haofont"></span>
|
|||
|
|
<div class="name">youtube</div>
|
|||
|
|
<div class="code-name">&#xe765;</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<span class="icon haofont"></span>
|
|||
|
|
<div class="name">Instagram</div>
|
|||
|
|
<div class="code-name">&#xe68b;</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<span class="icon haofont"></span>
|
|||
|
|
<div class="name">slack</div>
|
|||
|
|
<div class="code-name">&#xeca1;</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<span class="icon haofont"></span>
|
|||
|
|
<div class="name">百度</div>
|
|||
|
|
<div class="code-name">&#xe68c;</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<span class="icon haofont"></span>
|
|||
|
|
<div class="name">discord-line</div>
|
|||
|
|
<div class="code-name">&#xe7af;</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<span class="icon haofont"></span>
|
|||
|
|
<div class="name">cnblogs</div>
|
|||
|
|
<div class="code-name">&#xe68d;</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<span class="icon haofont"></span>
|
|||
|
|
<div class="name">juejin</div>
|
|||
|
|
<div class="code-name">&#xe68e;</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<span class="icon haofont"></span>
|
|||
|
|
<div class="name">steam</div>
|
|||
|
|
<div class="code-name">&#xec22;</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<span class="icon haofont"></span>
|
|||
|
|
<div class="name">telegram</div>
|
|||
|
|
<div class="code-name">&#xec25;</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<span class="icon haofont"></span>
|
|||
|
|
<div class="name">toutiao</div>
|
|||
|
|
<div class="code-name">&#xe68f;</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<span class="icon haofont"></span>
|
|||
|
|
<div class="name">微信</div>
|
|||
|
|
<div class="code-name">&#xe686;</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<span class="icon haofont"></span>
|
|||
|
|
<div class="name">豆瓣</div>
|
|||
|
|
<div class="code-name">&#xe687;</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<span class="icon haofont"></span>
|
|||
|
|
<div class="name">知乎</div>
|
|||
|
|
<div class="code-name">&#xe688;</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<span class="icon haofont"></span>
|
|||
|
|
<div class="name">微信公众号</div>
|
|||
|
|
<div class="code-name">&#xe689;</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<span class="icon haofont"></span>
|
|||
|
|
<div class="name">猜你喜欢</div>
|
|||
|
|
<div class="code-name">&#xe684;</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<span class="icon haofont"></span>
|
|||
|
|
<div class="name">eicon_map-2-line</div>
|
|||
|
|
<div class="code-name">&#xe685;</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<span class="icon haofont"></span>
|
|||
|
|
<div class="name">circle</div>
|
|||
|
|
<div class="code-name">&#xe833;</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<span class="icon haofont"></span>
|
|||
|
|
<div class="name">creative-commons-nd-line</div>
|
|||
|
|
<div class="code-name">&#xe67a;</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<span class="icon haofont"></span>
|
|||
|
|
<div class="name">creative-commons-by-line</div>
|
|||
|
|
<div class="code-name">&#xe67b;</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<span class="icon haofont"></span>
|
|||
|
|
<div class="name">creative-commons-nc-line</div>
|
|||
|
|
<div class="code-name">&#xe67c;</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<span class="icon haofont"></span>
|
|||
|
|
<div class="name">copyright-line</div>
|
|||
|
|
<div class="code-name">&#xe67d;</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<span class="icon haofont"></span>
|
|||
|
|
<div class="name">font</div>
|
|||
|
|
<div class="code-name">&#xe67e;</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<span class="icon haofont"></span>
|
|||
|
|
<div class="name">stopwatch</div>
|
|||
|
|
<div class="code-name">&#xe67f;</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<span class="icon haofont"></span>
|
|||
|
|
<div class="name">file-lines</div>
|
|||
|
|
<div class="code-name">&#xe680;</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<span class="icon haofont"></span>
|
|||
|
|
<div class="name">square-poll-vertical</div>
|
|||
|
|
<div class="code-name">&#xe681;</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<span class="icon haofont"></span>
|
|||
|
|
<div class="name">universal-access</div>
|
|||
|
|
<div class="code-name">&#xe682;</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<span class="icon haofont"></span>
|
|||
|
|
<div class="name">hourglass-start</div>
|
|||
|
|
<div class="code-name">&#xe683;</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<span class="icon haofont"></span>
|
|||
|
|
<div class="name">通讯录07</div>
|
|||
|
|
<div class="code-name">&#xe679;</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<span class="icon haofont"></span>
|
|||
|
|
<div class="name">arrow-right</div>
|
|||
|
|
<div class="code-name">&#xe600;</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<span class="icon haofont"></span>
|
|||
|
|
<div class="name">arrow-left</div>
|
|||
|
|
<div class="code-name">&#xe601;</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<span class="icon haofont"></span>
|
|||
|
|
<div class="name">dice</div>
|
|||
|
|
<div class="code-name">&#xe602;</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<span class="icon haofont"></span>
|
|||
|
|
<div class="name">copy</div>
|
|||
|
|
<div class="code-name">&#xe603;</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<span class="icon haofont"></span>
|
|||
|
|
<div class="name">cube</div>
|
|||
|
|
<div class="code-name">&#xe604;</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<span class="icon haofont"></span>
|
|||
|
|
<div class="name">circle-arrow-right</div>
|
|||
|
|
<div class="code-name">&#xe605;</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<span class="icon haofont"></span>
|
|||
|
|
<div class="name">clock</div>
|
|||
|
|
<div class="code-name">&#xe606;</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<span class="icon haofont"></span>
|
|||
|
|
<div class="name">book</div>
|
|||
|
|
<div class="code-name">&#xe607;</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<span class="icon haofont"></span>
|
|||
|
|
<div class="name">calendar-alt</div>
|
|||
|
|
<div class="code-name">&#xe608;</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<span class="icon haofont"></span>
|
|||
|
|
<div class="name">eye-outline</div>
|
|||
|
|
<div class="code-name">&#xe609;</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<span class="icon haofont"></span>
|
|||
|
|
<div class="name">circle-half-stroke</div>
|
|||
|
|
<div class="code-name">&#xe60a;</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<span class="icon haofont"></span>
|
|||
|
|
<div class="name">arrow-up</div>
|
|||
|
|
<div class="code-name">&#xe60b;</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<span class="icon haofont"></span>
|
|||
|
|
<div class="name">file-word</div>
|
|||
|
|
<div class="code-name">&#xe60c;</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<span class="icon haofont"></span>
|
|||
|
|
<div class="name">fire</div>
|
|||
|
|
<div class="code-name">&#xe60d;</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<span class="icon haofont"></span>
|
|||
|
|
<div class="name">dove</div>
|
|||
|
|
<div class="code-name">&#xe60e;</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<span class="icon haofont"></span>
|
|||
|
|
<div class="name">gear</div>
|
|||
|
|
<div class="code-name">&#xe60f;</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<span class="icon haofont"></span>
|
|||
|
|
<div class="name">inbox</div>
|
|||
|
|
<div class="code-name">&#xe610;</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<span class="icon haofont"></span>
|
|||
|
|
<div class="name">history</div>
|
|||
|
|
<div class="code-name">&#xe611;</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<span class="icon haofont"></span>
|
|||
|
|
<div class="name">message</div>
|
|||
|
|
<div class="code-name">&#xe613;</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<span class="icon haofont"></span>
|
|||
|
|
<div class="name">moon</div>
|
|||
|
|
<div class="code-name">&#xe614;</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<span class="icon haofont"></span>
|
|||
|
|
<div class="name">shapes</div>
|
|||
|
|
<div class="code-name">&#xe615;</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<span class="icon haofont"></span>
|
|||
|
|
<div class="name">shuffle</div>
|
|||
|
|
<div class="code-name">&#xe616;</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<span class="icon haofont"></span>
|
|||
|
|
<div class="name">language</div>
|
|||
|
|
<div class="code-name">&#xe617;</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<span class="icon haofont"></span>
|
|||
|
|
<div class="name">tags</div>
|
|||
|
|
<div class="code-name">&#xe618;</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<span class="icon haofont"></span>
|
|||
|
|
<div class="name">train</div>
|
|||
|
|
<div class="code-name">&#xe619;</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<span class="icon haofont"></span>
|
|||
|
|
<div class="name">warning</div>
|
|||
|
|
<div class="code-name">&#xe61a;</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<span class="icon haofont"></span>
|
|||
|
|
<div class="name">circle-arrow-up-right-1</div>
|
|||
|
|
<div class="code-name">&#xe61b;</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<span class="icon haofont"></span>
|
|||
|
|
<div class="name">fish</div>
|
|||
|
|
<div class="code-name">&#xe61c;</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<span class="icon haofont"></span>
|
|||
|
|
<div class="name">envelope</div>
|
|||
|
|
<div class="code-name">&#xe61d;</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<span class="icon haofont"></span>
|
|||
|
|
<div class="name">music</div>
|
|||
|
|
<div class="code-name">&#xe61e;</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<span class="icon haofont"></span>
|
|||
|
|
<div class="name">fan</div>
|
|||
|
|
<div class="code-name">&#xe61f;</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<span class="icon haofont"></span>
|
|||
|
|
<div class="name">heartbeat-bold</div>
|
|||
|
|
<div class="code-name">&#xe620;</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<span class="icon haofont"></span>
|
|||
|
|
<div class="name">link</div>
|
|||
|
|
<div class="code-name">&#xe621;</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<span class="icon haofont"></span>
|
|||
|
|
<div class="name">chevron-left</div>
|
|||
|
|
<div class="code-name">&#xe622;</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<span class="icon haofont"></span>
|
|||
|
|
<div class="name">rocket</div>
|
|||
|
|
<div class="code-name">&#xe623;</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<span class="icon haofont"></span>
|
|||
|
|
<div class="name">lightbulb</div>
|
|||
|
|
<div class="code-name">&#xe624;</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<span class="icon haofont"></span>
|
|||
|
|
<div class="name">shoe-prints</div>
|
|||
|
|
<div class="code-name">&#xe625;</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<span class="icon haofont"></span>
|
|||
|
|
<div class="name">images</div>
|
|||
|
|
<div class="code-name">&#xe626;</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<span class="icon haofont"></span>
|
|||
|
|
<div class="name">box-archive</div>
|
|||
|
|
<div class="code-name">&#xe627;</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<span class="icon haofont"></span>
|
|||
|
|
<div class="name">artstation</div>
|
|||
|
|
<div class="code-name">&#xe628;</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<span class="icon haofont"></span>
|
|||
|
|
<div class="name">paper-plane</div>
|
|||
|
|
<div class="code-name">&#xe629;</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<span class="icon haofont"></span>
|
|||
|
|
<div class="name">house-chimney</div>
|
|||
|
|
<div class="code-name">&#xe62a;</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<span class="icon haofont"></span>
|
|||
|
|
<div class="name">bars</div>
|
|||
|
|
<div class="code-name">&#xe62c;</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<span class="icon haofont"></span>
|
|||
|
|
<div class="name">arrows-left-right</div>
|
|||
|
|
<div class="code-name">&#xe62d;</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<span class="icon haofont"></span>
|
|||
|
|
<div class="name">book-open</div>
|
|||
|
|
<div class="code-name">&#xe62e;</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<span class="icon haofont"></span>
|
|||
|
|
<div class="name">list-ul</div>
|
|||
|
|
<div class="code-name">&#xe62f;</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<span class="icon haofont"></span>
|
|||
|
|
<div class="name">comment-sms</div>
|
|||
|
|
<div class="code-name">&#xe631;</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<span class="icon haofont"></span>
|
|||
|
|
<div class="name">angles-right</div>
|
|||
|
|
<div class="code-name">&#xe632;</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<span class="icon haofont"></span>
|
|||
|
|
<div class="name">tag</div>
|
|||
|
|
<div class="code-name">&#xe633;</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<span class="icon haofont"></span>
|
|||
|
|
<div class="name">chevron-right</div>
|
|||
|
|
<div class="code-name">&#xe634;</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<span class="icon haofont"></span>
|
|||
|
|
<div class="name">radio</div>
|
|||
|
|
<div class="code-name">&#xe635;</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<span class="icon haofont"></span>
|
|||
|
|
<div class="name">forward</div>
|
|||
|
|
<div class="code-name">&#xe636;</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<span class="icon haofont"></span>
|
|||
|
|
<div class="name">window-restore</div>
|
|||
|
|
<div class="code-name">&#xe637;</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<span class="icon haofont"></span>
|
|||
|
|
<div class="name">backward</div>
|
|||
|
|
<div class="code-name">&#xe638;</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<span class="icon haofont"></span>
|
|||
|
|
<div class="name">download</div>
|
|||
|
|
<div class="code-name">&#xe639;</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<span class="icon haofont"></span>
|
|||
|
|
<div class="name">comment-medical</div>
|
|||
|
|
<div class="code-name">&#xe63a;</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<span class="icon haofont"></span>
|
|||
|
|
<div class="name">paste</div>
|
|||
|
|
<div class="code-name">&#xe63b;</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<span class="icon haofont"></span>
|
|||
|
|
<div class="name">arrow-rotate-right</div>
|
|||
|
|
<div class="code-name">&#xe63c;</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<span class="icon haofont"></span>
|
|||
|
|
<div class="name">play</div>
|
|||
|
|
<div class="code-name">&#xe63d;</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<span class="icon haofont"></span>
|
|||
|
|
<div class="name">circle-xmark</div>
|
|||
|
|
<div class="code-name">&#xe63e;</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<span class="icon haofont"></span>
|
|||
|
|
<div class="name">angle-down</div>
|
|||
|
|
<div class="code-name">&#xe63f;</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<span class="icon haofont"></span>
|
|||
|
|
<div class="name">chart-line</div>
|
|||
|
|
<div class="code-name">&#xe640;</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<span class="icon haofont"></span>
|
|||
|
|
<div class="name">pencil</div>
|
|||
|
|
<div class="code-name">&#xe641;</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<span class="icon haofont"></span>
|
|||
|
|
<div class="name">thumbtack</div>
|
|||
|
|
<div class="code-name">&#xe642;</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<span class="icon haofont"></span>
|
|||
|
|
<div class="name">location-dot</div>
|
|||
|
|
<div class="code-name">&#xe643;</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<span class="icon haofont"></span>
|
|||
|
|
<div class="name">fw-fire</div>
|
|||
|
|
<div class="code-name">&#xe644;</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<span class="icon haofont"></span>
|
|||
|
|
<div class="name">calendar-days</div>
|
|||
|
|
<div class="code-name">&#xe645;</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<span class="icon haofont"></span>
|
|||
|
|
<div class="name">angle-right</div>
|
|||
|
|
<div class="code-name">&#xe646;</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<span class="icon haofont"></span>
|
|||
|
|
<div class="name">dice-d20</div>
|
|||
|
|
<div class="code-name">&#xe647;</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<span class="icon haofont"></span>
|
|||
|
|
<div class="name">instagram</div>
|
|||
|
|
<div class="code-name">&#xe648;</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<span class="icon haofont"></span>
|
|||
|
|
<div class="name">xmark</div>
|
|||
|
|
<div class="code-name">&#xe649;</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<span class="icon haofont"></span>
|
|||
|
|
<div class="name">spinner</div>
|
|||
|
|
<div class="code-name">&#xe64a;</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<span class="icon haofont"></span>
|
|||
|
|
<div class="name">bullhorn</div>
|
|||
|
|
<div class="code-name">&#xe64b;</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<span class="icon haofont"></span>
|
|||
|
|
<div class="name">stream</div>
|
|||
|
|
<div class="code-name">&#xe64c;</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<span class="icon haofont"></span>
|
|||
|
|
<div class="name">caret-left</div>
|
|||
|
|
<div class="code-name">&#xe64d;</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<span class="icon haofont"></span>
|
|||
|
|
<div class="name">folder-open</div>
|
|||
|
|
<div class="code-name">&#xe64e;</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<span class="icon haofont"></span>
|
|||
|
|
<div class="name">thumbs-up</div>
|
|||
|
|
<div class="code-name">&#xe64f;</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<span class="icon haofont"></span>
|
|||
|
|
<div class="name">angle-double-down</div>
|
|||
|
|
<div class="code-name">&#xe650;</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<span class="icon haofont"></span>
|
|||
|
|
<div class="name">sign-out-alt</div>
|
|||
|
|
<div class="code-name">&#xe651;</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<span class="icon haofont"></span>
|
|||
|
|
<div class="name">angle-double-left</div>
|
|||
|
|
<div class="code-name">&#xe652;</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<span class="icon haofont"></span>
|
|||
|
|
<div class="name">angle-double-right</div>
|
|||
|
|
<div class="code-name">&#xe653;</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<span class="icon haofont"></span>
|
|||
|
|
<div class="name">angle-left</div>
|
|||
|
|
<div class="code-name">&#xe654;</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<span class="icon haofont"></span>
|
|||
|
|
<div class="name">fw-eye</div>
|
|||
|
|
<div class="code-name">&#xe655;</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<span class="icon haofont"></span>
|
|||
|
|
<div class="name">repeat</div>
|
|||
|
|
<div class="code-name">&#xe656;</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<span class="icon haofont"></span>
|
|||
|
|
<div class="name">shuffle</div>
|
|||
|
|
<div class="code-name">&#xe657;</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<span class="icon haofont"></span>
|
|||
|
|
<div class="name">arrows-rotate</div>
|
|||
|
|
<div class="code-name">&#xe658;</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<span class="icon haofont"></span>
|
|||
|
|
<div class="name">pause</div>
|
|||
|
|
<div class="code-name">&#xe659;</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<span class="icon haofont"></span>
|
|||
|
|
<div class="name">heartbeat</div>
|
|||
|
|
<div class="code-name">&#xe65a;</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<span class="icon haofont"></span>
|
|||
|
|
<div class="name">heartbeat</div>
|
|||
|
|
<div class="code-name">&#xe65d;</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<span class="icon haofont"></span>
|
|||
|
|
<div class="name">rss</div>
|
|||
|
|
<div class="code-name">&#xe65e;</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<span class="icon haofont"></span>
|
|||
|
|
<div class="name">qq</div>
|
|||
|
|
<div class="code-name">&#xe65f;</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<span class="icon haofont"></span>
|
|||
|
|
<div class="name">github</div>
|
|||
|
|
<div class="code-name">&#xe660;</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<span class="icon haofont"></span>
|
|||
|
|
<div class="name">bilibili</div>
|
|||
|
|
<div class="code-name">&#xe661;</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<span class="icon haofont"></span>
|
|||
|
|
<div class="name">paper-plane</div>
|
|||
|
|
<div class="code-name">&#xe662;</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<span class="icon haofont"></span>
|
|||
|
|
<div class="name">hashtag</div>
|
|||
|
|
<div class="code-name">&#xe663;</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<span class="icon haofont"></span>
|
|||
|
|
<div class="name">hand-heart-fill</div>
|
|||
|
|
<div class="code-name">&#xe664;</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<span class="icon haofont"></span>
|
|||
|
|
<div class="name">plant-fill</div>
|
|||
|
|
<div class="code-name">&#xe665;</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<span class="icon haofont"></span>
|
|||
|
|
<div class="name">qrcode</div>
|
|||
|
|
<div class="code-name">&#xe666;</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<span class="icon haofont"></span>
|
|||
|
|
<div class="name">weibo</div>
|
|||
|
|
<div class="code-name">&#xe667;</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<span class="icon haofont"></span>
|
|||
|
|
<div class="name">copyright</div>
|
|||
|
|
<div class="code-name">&#xe668;</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<span class="icon haofont"></span>
|
|||
|
|
<div class="name">bolt</div>
|
|||
|
|
<div class="code-name">&#xe669;</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<span class="icon haofont"></span>
|
|||
|
|
<div class="name">circle-info</div>
|
|||
|
|
<div class="code-name">&#xe66a;</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<span class="icon haofont"></span>
|
|||
|
|
<div class="name">triangle-exclamation</div>
|
|||
|
|
<div class="code-name">&#xe66b;</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<span class="icon haofont"></span>
|
|||
|
|
<div class="name">circle-check</div>
|
|||
|
|
<div class="code-name">&#xe66c;</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<span class="icon haofont"></span>
|
|||
|
|
<div class="name">circle-minus</div>
|
|||
|
|
<div class="code-name">&#xe66d;</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<span class="icon haofont"></span>
|
|||
|
|
<div class="name">circle-plus</div>
|
|||
|
|
<div class="code-name">&#xe66e;</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<span class="icon haofont"></span>
|
|||
|
|
<div class="name">circle-dot</div>
|
|||
|
|
<div class="code-name">&#xe66f;</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<span class="icon haofont"></span>
|
|||
|
|
<div class="name">scissors</div>
|
|||
|
|
<div class="code-name">&#xe670;</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<span class="icon haofont"></span>
|
|||
|
|
<div class="name">arrow-down</div>
|
|||
|
|
<div class="code-name">&#xe671;</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<span class="icon haofont"></span>
|
|||
|
|
<div class="name">灯泡</div>
|
|||
|
|
<div class="code-name">&#xe672;</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<span class="icon haofont"></span>
|
|||
|
|
<div class="name">弹幕</div>
|
|||
|
|
<div class="code-name">&#xe673;</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<span class="icon haofont"></span>
|
|||
|
|
<div class="name">总览</div>
|
|||
|
|
<div class="code-name">&#xe674;</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<span class="icon haofont"></span>
|
|||
|
|
<div class="name">灵感</div>
|
|||
|
|
<div class="code-name">&#xe675;</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<span class="icon haofont"></span>
|
|||
|
|
<div class="name">三明治</div>
|
|||
|
|
<div class="code-name">&#xe676;</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<span class="icon haofont"></span>
|
|||
|
|
<div class="name">keyboard</div>
|
|||
|
|
<div class="code-name">&#xe677;</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<span class="icon haofont"></span>
|
|||
|
|
<div class="name">tiktok</div>
|
|||
|
|
<div class="code-name">&#xe678;</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: 'haofont';
|
|||
|
|
src: url('iconfont.eot?t=1708243411223'); /* IE9 */
|
|||
|
|
src: url('iconfont.eot?t=1708243411223#iefix') format('embedded-opentype'), /* IE6-IE8 */
|
|||
|
|
url('iconfont.woff2?t=1708243411223') format('woff2'),
|
|||
|
|
url('iconfont.woff?t=1708243411223') format('woff'),
|
|||
|
|
url('iconfont.ttf?t=1708243411223') format('truetype'),
|
|||
|
|
url('iconfont.svg?t=1708243411223#haofont') format('svg');
|
|||
|
|
}
|
|||
|
|
</code></pre>
|
|||
|
|
<h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
|
|||
|
|
<pre><code class="language-css"
|
|||
|
|
>.haofont {
|
|||
|
|
font-family: "haofont" !important;
|
|||
|
|
font-size: 16px;
|
|||
|
|
font-style: normal;
|
|||
|
|
-webkit-font-smoothing: antialiased;
|
|||
|
|
-moz-osx-font-smoothing: grayscale;
|
|||
|
|
}
|
|||
|
|
</code></pre>
|
|||
|
|
<h3 id="-">第三步：挑选相应图标并获取字体编码，应用于页面</h3>
|
|||
|
|
<pre>
|
|||
|
|
<code class="language-html"
|
|||
|
|
><span class="haofont">&#x33;</span>
|
|||
|
|
</code></pre>
|
|||
|
|
<blockquote>
|
|||
|
|
<p>"haofont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
|
|||
|
|
</blockquote>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="content font-class">
|
|||
|
|
<ul class="icon_lists dib-box">
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<span class="icon haofont hao-icon-tushu"></span>
|
|||
|
|
<div class="name">
|
|||
|
|
图书
|
|||
|
|
</div>
|
|||
|
|
<div class="code-name">.hao-icon-tushu
|
|||
|
|
</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<span class="icon haofont hao-icon-screen"></span>
|
|||
|
|
<div class="name">
|
|||
|
|
舞台剧
|
|||
|
|
</div>
|
|||
|
|
<div class="code-name">.hao-icon-screen
|
|||
|
|
</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<span class="icon haofont hao-icon-yinle"></span>
|
|||
|
|
<div class="name">
|
|||
|
|
音乐
|
|||
|
|
</div>
|
|||
|
|
<div class="code-name">.hao-icon-yinle
|
|||
|
|
</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<span class="icon haofont hao-icon-youxi"></span>
|
|||
|
|
<div class="name">
|
|||
|
|
游戏
|
|||
|
|
</div>
|
|||
|
|
<div class="code-name">.hao-icon-youxi
|
|||
|
|
</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<span class="icon haofont hao-icon-dianying"></span>
|
|||
|
|
<div class="name">
|
|||
|
|
电影
|
|||
|
|
</div>
|
|||
|
|
<div class="code-name">.hao-icon-dianying
|
|||
|
|
</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<span class="icon haofont hao-icon-star-full"></span>
|
|||
|
|
<div class="name">
|
|||
|
|
星,星星,星形,半星,实星
|
|||
|
|
</div>
|
|||
|
|
<div class="code-name">.hao-icon-star-full
|
|||
|
|
</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<span class="icon haofont hao-icon-star"></span>
|
|||
|
|
<div class="name">
|
|||
|
|
星,星星,星形,半星,实星
|
|||
|
|
</div>
|
|||
|
|
<div class="code-name">.hao-icon-star
|
|||
|
|
</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<span class="icon haofont hao-icon-star-half"></span>
|
|||
|
|
<div class="name">
|
|||
|
|
星,星星,星形,半星
|
|||
|
|
</div>
|
|||
|
|
<div class="code-name">.hao-icon-star-half
|
|||
|
|
</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<span class="icon haofont hao-icon-baibanwenjian-daochu"></span>
|
|||
|
|
<div class="name">
|
|||
|
|
困困鱼
|
|||
|
|
</div>
|
|||
|
|
<div class="code-name">.hao-icon-baibanwenjian-daochu
|
|||
|
|
</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<span class="icon haofont hao-icon-moon-clear-fill"></span>
|
|||
|
|
<div class="name">
|
|||
|
|
moon-clear-fill
|
|||
|
|
</div>
|
|||
|
|
<div class="code-name">.hao-icon-moon-clear-fill
|
|||
|
|
</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<span class="icon haofont hao-icon-eicon_train-line"></span>
|
|||
|
|
<div class="name">
|
|||
|
|
eicon_train-line
|
|||
|
|
</div>
|
|||
|
|
<div class="code-name">.hao-icon-eicon_train-line
|
|||
|
|
</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<span class="icon haofont hao-icon-disc-fill"></span>
|
|||
|
|
<div class="name">
|
|||
|
|
disc-fill
|
|||
|
|
</div>
|
|||
|
|
<div class="code-name">.hao-icon-disc-fill
|
|||
|
|
</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<span class="icon haofont hao-icon-signal-tower-fill"></span>
|
|||
|
|
<div class="name">
|
|||
|
|
signal-tower-fill
|
|||
|
|
</div>
|
|||
|
|
<div class="code-name">.hao-icon-signal-tower-fill
|
|||
|
|
</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<span class="icon haofont hao-icon-search--line"></span>
|
|||
|
|
<div class="name">
|
|||
|
|
search-2-line
|
|||
|
|
</div>
|
|||
|
|
<div class="code-name">.hao-icon-search--line
|
|||
|
|
</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<span class="icon haofont hao-icon-chat--fill"></span>
|
|||
|
|
<div class="name">
|
|||
|
|
chat-1-fill
|
|||
|
|
</div>
|
|||
|
|
<div class="code-name">.hao-icon-chat--fill
|
|||
|
|
</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<span class="icon haofont hao-icon-apps-fill"></span>
|
|||
|
|
<div class="name">
|
|||
|
|
apps-fill
|
|||
|
|
</div>
|
|||
|
|
<div class="code-name">.hao-icon-apps-fill
|
|||
|
|
</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<span class="icon haofont hao-icon-Home"></span>
|
|||
|
|
<div class="name">
|
|||
|
|
Home
|
|||
|
|
</div>
|
|||
|
|
<div class="code-name">.hao-icon-Home
|
|||
|
|
</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<span class="icon haofont hao-icon-yingwen"></span>
|
|||
|
|
<div class="name">
|
|||
|
|
英文
|
|||
|
|
</div>
|
|||
|
|
<div class="code-name">.hao-icon-yingwen
|
|||
|
|
</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<span class="icon haofont hao-icon-jianti"></span>
|
|||
|
|
<div class="name">
|
|||
|
|
简体
|
|||
|
|
</div>
|
|||
|
|
<div class="code-name">.hao-icon-jianti
|
|||
|
|
</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<span class="icon haofont hao-icon-fanti"></span>
|
|||
|
|
<div class="name">
|
|||
|
|
繁体
|
|||
|
|
</div>
|
|||
|
|
<div class="code-name">.hao-icon-fanti
|
|||
|
|
</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<span class="icon haofont hao-icon-aifadian-line"></span>
|
|||
|
|
<div class="name">
|
|||
|
|
aifadian-line
|
|||
|
|
</div>
|
|||
|
|
<div class="code-name">.hao-icon-aifadian-line
|
|||
|
|
</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<span class="icon haofont hao-icon-zhanghao1"></span>
|
|||
|
|
<div class="name">
|
|||
|
|
账号
|
|||
|
|
</div>
|
|||
|
|
<div class="code-name">.hao-icon-zhanghao1
|
|||
|
|
</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<span class="icon haofont hao-icon-zuozhe"></span>
|
|||
|
|
<div class="name">
|
|||
|
|
作者
|
|||
|
|
</div>
|
|||
|
|
<div class="code-name">.hao-icon-zuozhe
|
|||
|
|
</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<span class="icon haofont hao-icon-weixin1"></span>
|
|||
|
|
<div class="name">
|
|||
|
|
微信
|
|||
|
|
</div>
|
|||
|
|
<div class="code-name">.hao-icon-weixin1
|
|||
|
|
</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<span class="icon haofont hao-icon-bianji"></span>
|
|||
|
|
<div class="name">
|
|||
|
|
编辑
|
|||
|
|
</div>
|
|||
|
|
<div class="code-name">.hao-icon-bianji
|
|||
|
|
</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<span class="icon haofont hao-icon-check-circle"></span>
|
|||
|
|
<div class="name">
|
|||
|
|
check-circle
|
|||
|
|
</div>
|
|||
|
|
<div class="code-name">.hao-icon-check-circle
|
|||
|
|
</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<span class="icon haofont hao-icon-dashboard"></span>
|
|||
|
|
<div class="name">
|
|||
|
|
dashboard
|
|||
|
|
</div>
|
|||
|
|
<div class="code-name">.hao-icon-dashboard
|
|||
|
|
</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<span class="icon haofont hao-icon-bullseye"></span>
|
|||
|
|
<div class="name">
|
|||
|
|
bullseye
|
|||
|
|
</div>
|
|||
|
|
<div class="code-name">.hao-icon-bullseye
|
|||
|
|
</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<span class="icon haofont hao-icon-logo-moment"></span>
|
|||
|
|
<div class="name">
|
|||
|
|
logo-moment
|
|||
|
|
</div>
|
|||
|
|
<div class="code-name">.hao-icon-logo-moment
|
|||
|
|
</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<span class="icon haofont hao-icon-leetcode"></span>
|
|||
|
|
<div class="name">
|
|||
|
|
leetcode
|
|||
|
|
</div>
|
|||
|
|
<div class="code-name">.hao-icon-leetcode
|
|||
|
|
</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<span class="icon haofont hao-icon-gitlab"></span>
|
|||
|
|
<div class="name">
|
|||
|
|
gitlab
|
|||
|
|
</div>
|
|||
|
|
<div class="code-name">.hao-icon-gitlab
|
|||
|
|
</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<span class="icon haofont hao-icon-csdn"></span>
|
|||
|
|
<div class="name">
|
|||
|
|
csdn
|
|||
|
|
</div>
|
|||
|
|
<div class="code-name">.hao-icon-csdn
|
|||
|
|
</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<span class="icon haofont hao-icon-dribbble"></span>
|
|||
|
|
<div class="name">
|
|||
|
|
dribbble
|
|||
|
|
</div>
|
|||
|
|
<div class="code-name">.hao-icon-dribbble
|
|||
|
|
</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<span class="icon haofont hao-icon-yuque"></span>
|
|||
|
|
<div class="name">
|
|||
|
|
yuque
|
|||
|
|
</div>
|
|||
|
|
<div class="code-name">.hao-icon-yuque
|
|||
|
|
</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<span class="icon haofont hao-icon-linkedin"></span>
|
|||
|
|
<div class="name">
|
|||
|
|
linkedin
|
|||
|
|
</div>
|
|||
|
|
<div class="code-name">.hao-icon-linkedin
|
|||
|
|
</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<span class="icon haofont hao-icon-youtube"></span>
|
|||
|
|
<div class="name">
|
|||
|
|
youtube
|
|||
|
|
</div>
|
|||
|
|
<div class="code-name">.hao-icon-youtube
|
|||
|
|
</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<span class="icon haofont hao-icon-Instagram"></span>
|
|||
|
|
<div class="name">
|
|||
|
|
Instagram
|
|||
|
|
</div>
|
|||
|
|
<div class="code-name">.hao-icon-Instagram
|
|||
|
|
</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<span class="icon haofont hao-icon-slack"></span>
|
|||
|
|
<div class="name">
|
|||
|
|
slack
|
|||
|
|
</div>
|
|||
|
|
<div class="code-name">.hao-icon-slack
|
|||
|
|
</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<span class="icon haofont hao-icon-baidu"></span>
|
|||
|
|
<div class="name">
|
|||
|
|
百度
|
|||
|
|
</div>
|
|||
|
|
<div class="code-name">.hao-icon-baidu
|
|||
|
|
</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<span class="icon haofont hao-icon-discord-line"></span>
|
|||
|
|
<div class="name">
|
|||
|
|
discord-line
|
|||
|
|
</div>
|
|||
|
|
<div class="code-name">.hao-icon-discord-line
|
|||
|
|
</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<span class="icon haofont hao-icon-cnblogs"></span>
|
|||
|
|
<div class="name">
|
|||
|
|
cnblogs
|
|||
|
|
</div>
|
|||
|
|
<div class="code-name">.hao-icon-cnblogs
|
|||
|
|
</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<span class="icon haofont hao-icon-juejin"></span>
|
|||
|
|
<div class="name">
|
|||
|
|
juejin
|
|||
|
|
</div>
|
|||
|
|
<div class="code-name">.hao-icon-juejin
|
|||
|
|
</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<span class="icon haofont hao-icon-steam"></span>
|
|||
|
|
<div class="name">
|
|||
|
|
steam
|
|||
|
|
</div>
|
|||
|
|
<div class="code-name">.hao-icon-steam
|
|||
|
|
</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<span class="icon haofont hao-icon-telegram"></span>
|
|||
|
|
<div class="name">
|
|||
|
|
telegram
|
|||
|
|
</div>
|
|||
|
|
<div class="code-name">.hao-icon-telegram
|
|||
|
|
</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<span class="icon haofont hao-icon-toutiao"></span>
|
|||
|
|
<div class="name">
|
|||
|
|
toutiao
|
|||
|
|
</div>
|
|||
|
|
<div class="code-name">.hao-icon-toutiao
|
|||
|
|
</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<span class="icon haofont hao-icon-weixin"></span>
|
|||
|
|
<div class="name">
|
|||
|
|
微信
|
|||
|
|
</div>
|
|||
|
|
<div class="code-name">.hao-icon-weixin
|
|||
|
|
</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<span class="icon haofont hao-icon-douban"></span>
|
|||
|
|
<div class="name">
|
|||
|
|
豆瓣
|
|||
|
|
</div>
|
|||
|
|
<div class="code-name">.hao-icon-douban
|
|||
|
|
</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<span class="icon haofont hao-icon-29"></span>
|
|||
|
|
<div class="name">
|
|||
|
|
知乎
|
|||
|
|
</div>
|
|||
|
|
<div class="code-name">.hao-icon-29
|
|||
|
|
</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<span class="icon haofont hao-icon-weixingongzhonghao"></span>
|
|||
|
|
<div class="name">
|
|||
|
|
微信公众号
|
|||
|
|
</div>
|
|||
|
|
<div class="code-name">.hao-icon-weixingongzhonghao
|
|||
|
|
</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<span class="icon haofont hao-icon-cainixihuan"></span>
|
|||
|
|
<div class="name">
|
|||
|
|
猜你喜欢
|
|||
|
|
</div>
|
|||
|
|
<div class="code-name">.hao-icon-cainixihuan
|
|||
|
|
</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<span class="icon haofont hao-icon-eicon_map-2-line1"></span>
|
|||
|
|
<div class="name">
|
|||
|
|
eicon_map-2-line
|
|||
|
|
</div>
|
|||
|
|
<div class="code-name">.hao-icon-eicon_map-2-line1
|
|||
|
|
</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<span class="icon haofont hao-icon-yuan"></span>
|
|||
|
|
<div class="name">
|
|||
|
|
circle
|
|||
|
|
</div>
|
|||
|
|
<div class="code-name">.hao-icon-yuan
|
|||
|
|
</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<span class="icon haofont hao-icon-creative-commons-nd-line"></span>
|
|||
|
|
<div class="name">
|
|||
|
|
creative-commons-nd-line
|
|||
|
|
</div>
|
|||
|
|
<div class="code-name">.hao-icon-creative-commons-nd-line
|
|||
|
|
</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<span class="icon haofont hao-icon-creative-commons-by-line"></span>
|
|||
|
|
<div class="name">
|
|||
|
|
creative-commons-by-line
|
|||
|
|
</div>
|
|||
|
|
<div class="code-name">.hao-icon-creative-commons-by-line
|
|||
|
|
</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<span class="icon haofont hao-icon-creative-commons-nc-line"></span>
|
|||
|
|
<div class="name">
|
|||
|
|
creative-commons-nc-line
|
|||
|
|
</div>
|
|||
|
|
<div class="code-name">.hao-icon-creative-commons-nc-line
|
|||
|
|
</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<span class="icon haofont hao-icon-copyright-line"></span>
|
|||
|
|
<div class="name">
|
|||
|
|
copyright-line
|
|||
|
|
</div>
|
|||
|
|
<div class="code-name">.hao-icon-copyright-line
|
|||
|
|
</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<span class="icon haofont hao-icon-font"></span>
|
|||
|
|
<div class="name">
|
|||
|
|
font
|
|||
|
|
</div>
|
|||
|
|
<div class="code-name">.hao-icon-font
|
|||
|
|
</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<span class="icon haofont hao-icon-stopwatch"></span>
|
|||
|
|
<div class="name">
|
|||
|
|
stopwatch
|
|||
|
|
</div>
|
|||
|
|
<div class="code-name">.hao-icon-stopwatch
|
|||
|
|
</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<span class="icon haofont hao-icon-file-lines"></span>
|
|||
|
|
<div class="name">
|
|||
|
|
file-lines
|
|||
|
|
</div>
|
|||
|
|
<div class="code-name">.hao-icon-file-lines
|
|||
|
|
</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<span class="icon haofont hao-icon-square-poll-vertical"></span>
|
|||
|
|
<div class="name">
|
|||
|
|
square-poll-vertical
|
|||
|
|
</div>
|
|||
|
|
<div class="code-name">.hao-icon-square-poll-vertical
|
|||
|
|
</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<span class="icon haofont hao-icon-universal-access"></span>
|
|||
|
|
<div class="name">
|
|||
|
|
universal-access
|
|||
|
|
</div>
|
|||
|
|
<div class="code-name">.hao-icon-universal-access
|
|||
|
|
</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<span class="icon haofont hao-icon-hourglass-start"></span>
|
|||
|
|
<div class="name">
|
|||
|
|
hourglass-start
|
|||
|
|
</div>
|
|||
|
|
<div class="code-name">.hao-icon-hourglass-start
|
|||
|
|
</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<span class="icon haofont hao-icon-tongxunlu07"></span>
|
|||
|
|
<div class="name">
|
|||
|
|
通讯录07
|
|||
|
|
</div>
|
|||
|
|
<div class="code-name">.hao-icon-tongxunlu07
|
|||
|
|
</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<span class="icon haofont hao-icon-arrow-right"></span>
|
|||
|
|
<div class="name">
|
|||
|
|
arrow-right
|
|||
|
|
</div>
|
|||
|
|
<div class="code-name">.hao-icon-arrow-right
|
|||
|
|
</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<span class="icon haofont hao-icon-arrow-left"></span>
|
|||
|
|
<div class="name">
|
|||
|
|
arrow-left
|
|||
|
|
</div>
|
|||
|
|
<div class="code-name">.hao-icon-arrow-left
|
|||
|
|
</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<span class="icon haofont hao-icon-dice"></span>
|
|||
|
|
<div class="name">
|
|||
|
|
dice
|
|||
|
|
</div>
|
|||
|
|
<div class="code-name">.hao-icon-dice
|
|||
|
|
</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<span class="icon haofont hao-icon-copy"></span>
|
|||
|
|
<div class="name">
|
|||
|
|
copy
|
|||
|
|
</div>
|
|||
|
|
<div class="code-name">.hao-icon-copy
|
|||
|
|
</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<span class="icon haofont hao-icon-cube"></span>
|
|||
|
|
<div class="name">
|
|||
|
|
cube
|
|||
|
|
</div>
|
|||
|
|
<div class="code-name">.hao-icon-cube
|
|||
|
|
</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<span class="icon haofont hao-icon-circle-arrow-right"></span>
|
|||
|
|
<div class="name">
|
|||
|
|
circle-arrow-right
|
|||
|
|
</div>
|
|||
|
|
<div class="code-name">.hao-icon-circle-arrow-right
|
|||
|
|
</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<span class="icon haofont hao-icon-clock"></span>
|
|||
|
|
<div class="name">
|
|||
|
|
clock
|
|||
|
|
</div>
|
|||
|
|
<div class="code-name">.hao-icon-clock
|
|||
|
|
</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<span class="icon haofont hao-icon-book"></span>
|
|||
|
|
<div class="name">
|
|||
|
|
book
|
|||
|
|
</div>
|
|||
|
|
<div class="code-name">.hao-icon-book
|
|||
|
|
</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<span class="icon haofont hao-icon-calendar-alt"></span>
|
|||
|
|
<div class="name">
|
|||
|
|
calendar-alt
|
|||
|
|
</div>
|
|||
|
|
<div class="code-name">.hao-icon-calendar-alt
|
|||
|
|
</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<span class="icon haofont hao-icon-eye-outline"></span>
|
|||
|
|
<div class="name">
|
|||
|
|
eye-outline
|
|||
|
|
</div>
|
|||
|
|
<div class="code-name">.hao-icon-eye-outline
|
|||
|
|
</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<span class="icon haofont hao-icon-circle-half-stroke"></span>
|
|||
|
|
<div class="name">
|
|||
|
|
circle-half-stroke
|
|||
|
|
</div>
|
|||
|
|
<div class="code-name">.hao-icon-circle-half-stroke
|
|||
|
|
</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<span class="icon haofont hao-icon-arrow-up"></span>
|
|||
|
|
<div class="name">
|
|||
|
|
arrow-up
|
|||
|
|
</div>
|
|||
|
|
<div class="code-name">.hao-icon-arrow-up
|
|||
|
|
</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<span class="icon haofont hao-icon-file-word"></span>
|
|||
|
|
<div class="name">
|
|||
|
|
file-word
|
|||
|
|
</div>
|
|||
|
|
<div class="code-name">.hao-icon-file-word
|
|||
|
|
</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<span class="icon haofont hao-icon-fire"></span>
|
|||
|
|
<div class="name">
|
|||
|
|
fire
|
|||
|
|
</div>
|
|||
|
|
<div class="code-name">.hao-icon-fire
|
|||
|
|
</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<span class="icon haofont hao-icon-dove"></span>
|
|||
|
|
<div class="name">
|
|||
|
|
dove
|
|||
|
|
</div>
|
|||
|
|
<div class="code-name">.hao-icon-dove
|
|||
|
|
</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<span class="icon haofont hao-icon-gear"></span>
|
|||
|
|
<div class="name">
|
|||
|
|
gear
|
|||
|
|
</div>
|
|||
|
|
<div class="code-name">.hao-icon-gear
|
|||
|
|
</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<span class="icon haofont hao-icon-inbox"></span>
|
|||
|
|
<div class="name">
|
|||
|
|
inbox
|
|||
|
|
</div>
|
|||
|
|
<div class="code-name">.hao-icon-inbox
|
|||
|
|
</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<span class="icon haofont hao-icon-history"></span>
|
|||
|
|
<div class="name">
|
|||
|
|
history
|
|||
|
|
</div>
|
|||
|
|
<div class="code-name">.hao-icon-history
|
|||
|
|
</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<span class="icon haofont hao-icon-message"></span>
|
|||
|
|
<div class="name">
|
|||
|
|
message
|
|||
|
|
</div>
|
|||
|
|
<div class="code-name">.hao-icon-message
|
|||
|
|
</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<span class="icon haofont hao-icon-moon"></span>
|
|||
|
|
<div class="name">
|
|||
|
|
moon
|
|||
|
|
</div>
|
|||
|
|
<div class="code-name">.hao-icon-moon
|
|||
|
|
</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<span class="icon haofont hao-icon-shapes"></span>
|
|||
|
|
<div class="name">
|
|||
|
|
shapes
|
|||
|
|
</div>
|
|||
|
|
<div class="code-name">.hao-icon-shapes
|
|||
|
|
</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<span class="icon haofont hao-icon-shuffle"></span>
|
|||
|
|
<div class="name">
|
|||
|
|
shuffle
|
|||
|
|
</div>
|
|||
|
|
<div class="code-name">.hao-icon-shuffle
|
|||
|
|
</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<span class="icon haofont hao-icon-language"></span>
|
|||
|
|
<div class="name">
|
|||
|
|
language
|
|||
|
|
</div>
|
|||
|
|
<div class="code-name">.hao-icon-language
|
|||
|
|
</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<span class="icon haofont hao-icon-tags"></span>
|
|||
|
|
<div class="name">
|
|||
|
|
tags
|
|||
|
|
</div>
|
|||
|
|
<div class="code-name">.hao-icon-tags
|
|||
|
|
</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<span class="icon haofont hao-icon-train"></span>
|
|||
|
|
<div class="name">
|
|||
|
|
train
|
|||
|
|
</div>
|
|||
|
|
<div class="code-name">.hao-icon-train
|
|||
|
|
</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<span class="icon haofont hao-icon-warning"></span>
|
|||
|
|
<div class="name">
|
|||
|
|
warning
|
|||
|
|
</div>
|
|||
|
|
<div class="code-name">.hao-icon-warning
|
|||
|
|
</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<span class="icon haofont hao-icon-circle-arrow-up-right-1"></span>
|
|||
|
|
<div class="name">
|
|||
|
|
circle-arrow-up-right-1
|
|||
|
|
</div>
|
|||
|
|
<div class="code-name">.hao-icon-circle-arrow-up-right-1
|
|||
|
|
</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<span class="icon haofont hao-icon-fish"></span>
|
|||
|
|
<div class="name">
|
|||
|
|
fish
|
|||
|
|
</div>
|
|||
|
|
<div class="code-name">.hao-icon-fish
|
|||
|
|
</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<span class="icon haofont hao-icon-envelope"></span>
|
|||
|
|
<div class="name">
|
|||
|
|
envelope
|
|||
|
|
</div>
|
|||
|
|
<div class="code-name">.hao-icon-envelope
|
|||
|
|
</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<span class="icon haofont hao-icon-music"></span>
|
|||
|
|
<div class="name">
|
|||
|
|
music
|
|||
|
|
</div>
|
|||
|
|
<div class="code-name">.hao-icon-music
|
|||
|
|
</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<span class="icon haofont hao-icon-fan"></span>
|
|||
|
|
<div class="name">
|
|||
|
|
fan
|
|||
|
|
</div>
|
|||
|
|
<div class="code-name">.hao-icon-fan
|
|||
|
|
</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<span class="icon haofont hao-icon-heartbeat-bold"></span>
|
|||
|
|
<div class="name">
|
|||
|
|
heartbeat-bold
|
|||
|
|
</div>
|
|||
|
|
<div class="code-name">.hao-icon-heartbeat-bold
|
|||
|
|
</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<span class="icon haofont hao-icon-link"></span>
|
|||
|
|
<div class="name">
|
|||
|
|
link
|
|||
|
|
</div>
|
|||
|
|
<div class="code-name">.hao-icon-link
|
|||
|
|
</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<span class="icon haofont hao-icon-chevron-left"></span>
|
|||
|
|
<div class="name">
|
|||
|
|
chevron-left
|
|||
|
|
</div>
|
|||
|
|
<div class="code-name">.hao-icon-chevron-left
|
|||
|
|
</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<span class="icon haofont hao-icon-rocket"></span>
|
|||
|
|
<div class="name">
|
|||
|
|
rocket
|
|||
|
|
</div>
|
|||
|
|
<div class="code-name">.hao-icon-rocket
|
|||
|
|
</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<span class="icon haofont hao-icon-lightbulb"></span>
|
|||
|
|
<div class="name">
|
|||
|
|
lightbulb
|
|||
|
|
</div>
|
|||
|
|
<div class="code-name">.hao-icon-lightbulb
|
|||
|
|
</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<span class="icon haofont hao-icon-shoe-prints"></span>
|
|||
|
|
<div class="name">
|
|||
|
|
shoe-prints
|
|||
|
|
</div>
|
|||
|
|
<div class="code-name">.hao-icon-shoe-prints
|
|||
|
|
</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<span class="icon haofont hao-icon-images"></span>
|
|||
|
|
<div class="name">
|
|||
|
|
images
|
|||
|
|
</div>
|
|||
|
|
<div class="code-name">.hao-icon-images
|
|||
|
|
</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<span class="icon haofont hao-icon-box-archive"></span>
|
|||
|
|
<div class="name">
|
|||
|
|
box-archive
|
|||
|
|
</div>
|
|||
|
|
<div class="code-name">.hao-icon-box-archive
|
|||
|
|
</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<span class="icon haofont hao-icon-artstation"></span>
|
|||
|
|
<div class="name">
|
|||
|
|
artstation
|
|||
|
|
</div>
|
|||
|
|
<div class="code-name">.hao-icon-artstation
|
|||
|
|
</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<span class="icon haofont hao-icon-paper-plane"></span>
|
|||
|
|
<div class="name">
|
|||
|
|
paper-plane
|
|||
|
|
</div>
|
|||
|
|
<div class="code-name">.hao-icon-paper-plane
|
|||
|
|
</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<span class="icon haofont hao-icon-house-chimney"></span>
|
|||
|
|
<div class="name">
|
|||
|
|
house-chimney
|
|||
|
|
</div>
|
|||
|
|
<div class="code-name">.hao-icon-house-chimney
|
|||
|
|
</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<span class="icon haofont hao-icon-bars"></span>
|
|||
|
|
<div class="name">
|
|||
|
|
bars
|
|||
|
|
</div>
|
|||
|
|
<div class="code-name">.hao-icon-bars
|
|||
|
|
</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<span class="icon haofont hao-icon-arrows-left-right"></span>
|
|||
|
|
<div class="name">
|
|||
|
|
arrows-left-right
|
|||
|
|
</div>
|
|||
|
|
<div class="code-name">.hao-icon-arrows-left-right
|
|||
|
|
</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<span class="icon haofont hao-icon-book-open"></span>
|
|||
|
|
<div class="name">
|
|||
|
|
book-open
|
|||
|
|
</div>
|
|||
|
|
<div class="code-name">.hao-icon-book-open
|
|||
|
|
</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<span class="icon haofont hao-icon-list-ul"></span>
|
|||
|
|
<div class="name">
|
|||
|
|
list-ul
|
|||
|
|
</div>
|
|||
|
|
<div class="code-name">.hao-icon-list-ul
|
|||
|
|
</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<span class="icon haofont hao-icon-comment-sms"></span>
|
|||
|
|
<div class="name">
|
|||
|
|
comment-sms
|
|||
|
|
</div>
|
|||
|
|
<div class="code-name">.hao-icon-comment-sms
|
|||
|
|
</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<span class="icon haofont hao-icon-angles-right"></span>
|
|||
|
|
<div class="name">
|
|||
|
|
angles-right
|
|||
|
|
</div>
|
|||
|
|
<div class="code-name">.hao-icon-angles-right
|
|||
|
|
</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<span class="icon haofont hao-icon-tag"></span>
|
|||
|
|
<div class="name">
|
|||
|
|
tag
|
|||
|
|
</div>
|
|||
|
|
<div class="code-name">.hao-icon-tag
|
|||
|
|
</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<span class="icon haofont hao-icon-chevron-right"></span>
|
|||
|
|
<div class="name">
|
|||
|
|
chevron-right
|
|||
|
|
</div>
|
|||
|
|
<div class="code-name">.hao-icon-chevron-right
|
|||
|
|
</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<span class="icon haofont hao-icon-radio"></span>
|
|||
|
|
<div class="name">
|
|||
|
|
radio
|
|||
|
|
</div>
|
|||
|
|
<div class="code-name">.hao-icon-radio
|
|||
|
|
</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<span class="icon haofont hao-icon-forward"></span>
|
|||
|
|
<div class="name">
|
|||
|
|
forward
|
|||
|
|
</div>
|
|||
|
|
<div class="code-name">.hao-icon-forward
|
|||
|
|
</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<span class="icon haofont hao-icon-window-restore"></span>
|
|||
|
|
<div class="name">
|
|||
|
|
window-restore
|
|||
|
|
</div>
|
|||
|
|
<div class="code-name">.hao-icon-window-restore
|
|||
|
|
</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<span class="icon haofont hao-icon-backward"></span>
|
|||
|
|
<div class="name">
|
|||
|
|
backward
|
|||
|
|
</div>
|
|||
|
|
<div class="code-name">.hao-icon-backward
|
|||
|
|
</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<span class="icon haofont hao-icon-download"></span>
|
|||
|
|
<div class="name">
|
|||
|
|
download
|
|||
|
|
</div>
|
|||
|
|
<div class="code-name">.hao-icon-download
|
|||
|
|
</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<span class="icon haofont hao-icon-comment-medical"></span>
|
|||
|
|
<div class="name">
|
|||
|
|
comment-medical
|
|||
|
|
</div>
|
|||
|
|
<div class="code-name">.hao-icon-comment-medical
|
|||
|
|
</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<span class="icon haofont hao-icon-paste"></span>
|
|||
|
|
<div class="name">
|
|||
|
|
paste
|
|||
|
|
</div>
|
|||
|
|
<div class="code-name">.hao-icon-paste
|
|||
|
|
</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<span class="icon haofont hao-icon-arrow-rotate-right"></span>
|
|||
|
|
<div class="name">
|
|||
|
|
arrow-rotate-right
|
|||
|
|
</div>
|
|||
|
|
<div class="code-name">.hao-icon-arrow-rotate-right
|
|||
|
|
</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<span class="icon haofont hao-icon-play"></span>
|
|||
|
|
<div class="name">
|
|||
|
|
play
|
|||
|
|
</div>
|
|||
|
|
<div class="code-name">.hao-icon-play
|
|||
|
|
</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<span class="icon haofont hao-icon-circle-xmark"></span>
|
|||
|
|
<div class="name">
|
|||
|
|
circle-xmark
|
|||
|
|
</div>
|
|||
|
|
<div class="code-name">.hao-icon-circle-xmark
|
|||
|
|
</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<span class="icon haofont hao-icon-angle-down"></span>
|
|||
|
|
<div class="name">
|
|||
|
|
angle-down
|
|||
|
|
</div>
|
|||
|
|
<div class="code-name">.hao-icon-angle-down
|
|||
|
|
</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<span class="icon haofont hao-icon-chart-line"></span>
|
|||
|
|
<div class="name">
|
|||
|
|
chart-line
|
|||
|
|
</div>
|
|||
|
|
<div class="code-name">.hao-icon-chart-line
|
|||
|
|
</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<span class="icon haofont hao-icon-pencil"></span>
|
|||
|
|
<div class="name">
|
|||
|
|
pencil
|
|||
|
|
</div>
|
|||
|
|
<div class="code-name">.hao-icon-pencil
|
|||
|
|
</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<span class="icon haofont hao-icon-thumbtack"></span>
|
|||
|
|
<div class="name">
|
|||
|
|
thumbtack
|
|||
|
|
</div>
|
|||
|
|
<div class="code-name">.hao-icon-thumbtack
|
|||
|
|
</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<span class="icon haofont hao-icon-location-dot"></span>
|
|||
|
|
<div class="name">
|
|||
|
|
location-dot
|
|||
|
|
</div>
|
|||
|
|
<div class="code-name">.hao-icon-location-dot
|
|||
|
|
</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<span class="icon haofont hao-icon-fw-fire"></span>
|
|||
|
|
<div class="name">
|
|||
|
|
fw-fire
|
|||
|
|
</div>
|
|||
|
|
<div class="code-name">.hao-icon-fw-fire
|
|||
|
|
</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<span class="icon haofont hao-icon-calendar-days"></span>
|
|||
|
|
<div class="name">
|
|||
|
|
calendar-days
|
|||
|
|
</div>
|
|||
|
|
<div class="code-name">.hao-icon-calendar-days
|
|||
|
|
</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<span class="icon haofont hao-icon-angle-right"></span>
|
|||
|
|
<div class="name">
|
|||
|
|
angle-right
|
|||
|
|
</div>
|
|||
|
|
<div class="code-name">.hao-icon-angle-right
|
|||
|
|
</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<span class="icon haofont hao-icon-dice-d20"></span>
|
|||
|
|
<div class="name">
|
|||
|
|
dice-d20
|
|||
|
|
</div>
|
|||
|
|
<div class="code-name">.hao-icon-dice-d20
|
|||
|
|
</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<span class="icon haofont hao-icon-instagram"></span>
|
|||
|
|
<div class="name">
|
|||
|
|
instagram
|
|||
|
|
</div>
|
|||
|
|
<div class="code-name">.hao-icon-instagram
|
|||
|
|
</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<span class="icon haofont hao-icon-xmark"></span>
|
|||
|
|
<div class="name">
|
|||
|
|
xmark
|
|||
|
|
</div>
|
|||
|
|
<div class="code-name">.hao-icon-xmark
|
|||
|
|
</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<span class="icon haofont hao-icon-spinner"></span>
|
|||
|
|
<div class="name">
|
|||
|
|
spinner
|
|||
|
|
</div>
|
|||
|
|
<div class="code-name">.hao-icon-spinner
|
|||
|
|
</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<span class="icon haofont hao-icon-bullhorn"></span>
|
|||
|
|
<div class="name">
|
|||
|
|
bullhorn
|
|||
|
|
</div>
|
|||
|
|
<div class="code-name">.hao-icon-bullhorn
|
|||
|
|
</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<span class="icon haofont hao-icon-stream"></span>
|
|||
|
|
<div class="name">
|
|||
|
|
stream
|
|||
|
|
</div>
|
|||
|
|
<div class="code-name">.hao-icon-stream
|
|||
|
|
</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<span class="icon haofont hao-icon-caret-left"></span>
|
|||
|
|
<div class="name">
|
|||
|
|
caret-left
|
|||
|
|
</div>
|
|||
|
|
<div class="code-name">.hao-icon-caret-left
|
|||
|
|
</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<span class="icon haofont hao-icon-folder-open"></span>
|
|||
|
|
<div class="name">
|
|||
|
|
folder-open
|
|||
|
|
</div>
|
|||
|
|
<div class="code-name">.hao-icon-folder-open
|
|||
|
|
</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<span class="icon haofont hao-icon-thumbs-up"></span>
|
|||
|
|
<div class="name">
|
|||
|
|
thumbs-up
|
|||
|
|
</div>
|
|||
|
|
<div class="code-name">.hao-icon-thumbs-up
|
|||
|
|
</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<span class="icon haofont hao-icon-angle-double-down"></span>
|
|||
|
|
<div class="name">
|
|||
|
|
angle-double-down
|
|||
|
|
</div>
|
|||
|
|
<div class="code-name">.hao-icon-angle-double-down
|
|||
|
|
</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<span class="icon haofont hao-icon-sign-out-alt"></span>
|
|||
|
|
<div class="name">
|
|||
|
|
sign-out-alt
|
|||
|
|
</div>
|
|||
|
|
<div class="code-name">.hao-icon-sign-out-alt
|
|||
|
|
</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<span class="icon haofont hao-icon-angle-double-left"></span>
|
|||
|
|
<div class="name">
|
|||
|
|
angle-double-left
|
|||
|
|
</div>
|
|||
|
|
<div class="code-name">.hao-icon-angle-double-left
|
|||
|
|
</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<span class="icon haofont hao-icon-angle-double-right"></span>
|
|||
|
|
<div class="name">
|
|||
|
|
angle-double-right
|
|||
|
|
</div>
|
|||
|
|
<div class="code-name">.hao-icon-angle-double-right
|
|||
|
|
</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<span class="icon haofont hao-icon-angle-left"></span>
|
|||
|
|
<div class="name">
|
|||
|
|
angle-left
|
|||
|
|
</div>
|
|||
|
|
<div class="code-name">.hao-icon-angle-left
|
|||
|
|
</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<span class="icon haofont hao-icon-fw-eye"></span>
|
|||
|
|
<div class="name">
|
|||
|
|
fw-eye
|
|||
|
|
</div>
|
|||
|
|
<div class="code-name">.hao-icon-fw-eye
|
|||
|
|
</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<span class="icon haofont hao-icon-repeat"></span>
|
|||
|
|
<div class="name">
|
|||
|
|
repeat
|
|||
|
|
</div>
|
|||
|
|
<div class="code-name">.hao-icon-repeat
|
|||
|
|
</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<span class="icon haofont hao-icon-shuffle1"></span>
|
|||
|
|
<div class="name">
|
|||
|
|
shuffle
|
|||
|
|
</div>
|
|||
|
|
<div class="code-name">.hao-icon-shuffle1
|
|||
|
|
</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<span class="icon haofont hao-icon-arrows-rotate"></span>
|
|||
|
|
<div class="name">
|
|||
|
|
arrows-rotate
|
|||
|
|
</div>
|
|||
|
|
<div class="code-name">.hao-icon-arrows-rotate
|
|||
|
|
</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<span class="icon haofont hao-icon-pause"></span>
|
|||
|
|
<div class="name">
|
|||
|
|
pause
|
|||
|
|
</div>
|
|||
|
|
<div class="code-name">.hao-icon-pause
|
|||
|
|
</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<span class="icon haofont hao-icon-heartbeat"></span>
|
|||
|
|
<div class="name">
|
|||
|
|
heartbeat
|
|||
|
|
</div>
|
|||
|
|
<div class="code-name">.hao-icon-heartbeat
|
|||
|
|
</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<span class="icon haofont hao-icon-heartbeat1"></span>
|
|||
|
|
<div class="name">
|
|||
|
|
heartbeat
|
|||
|
|
</div>
|
|||
|
|
<div class="code-name">.hao-icon-heartbeat1
|
|||
|
|
</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<span class="icon haofont hao-icon-rss"></span>
|
|||
|
|
<div class="name">
|
|||
|
|
rss
|
|||
|
|
</div>
|
|||
|
|
<div class="code-name">.hao-icon-rss
|
|||
|
|
</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<span class="icon haofont hao-icon-qq"></span>
|
|||
|
|
<div class="name">
|
|||
|
|
qq
|
|||
|
|
</div>
|
|||
|
|
<div class="code-name">.hao-icon-qq
|
|||
|
|
</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<span class="icon haofont hao-icon-github"></span>
|
|||
|
|
<div class="name">
|
|||
|
|
github
|
|||
|
|
</div>
|
|||
|
|
<div class="code-name">.hao-icon-github
|
|||
|
|
</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<span class="icon haofont hao-icon-bilibili"></span>
|
|||
|
|
<div class="name">
|
|||
|
|
bilibili
|
|||
|
|
</div>
|
|||
|
|
<div class="code-name">.hao-icon-bilibili
|
|||
|
|
</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<span class="icon haofont hao-icon-paper-plane1"></span>
|
|||
|
|
<div class="name">
|
|||
|
|
paper-plane
|
|||
|
|
</div>
|
|||
|
|
<div class="code-name">.hao-icon-paper-plane1
|
|||
|
|
</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<span class="icon haofont hao-icon-hashtag"></span>
|
|||
|
|
<div class="name">
|
|||
|
|
hashtag
|
|||
|
|
</div>
|
|||
|
|
<div class="code-name">.hao-icon-hashtag
|
|||
|
|
</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<span class="icon haofont hao-icon-hand-heart-fill"></span>
|
|||
|
|
<div class="name">
|
|||
|
|
hand-heart-fill
|
|||
|
|
</div>
|
|||
|
|
<div class="code-name">.hao-icon-hand-heart-fill
|
|||
|
|
</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<span class="icon haofont hao-icon-plant-fill"></span>
|
|||
|
|
<div class="name">
|
|||
|
|
plant-fill
|
|||
|
|
</div>
|
|||
|
|
<div class="code-name">.hao-icon-plant-fill
|
|||
|
|
</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<span class="icon haofont hao-icon-qrcode"></span>
|
|||
|
|
<div class="name">
|
|||
|
|
qrcode
|
|||
|
|
</div>
|
|||
|
|
<div class="code-name">.hao-icon-qrcode
|
|||
|
|
</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<span class="icon haofont hao-icon-weibo"></span>
|
|||
|
|
<div class="name">
|
|||
|
|
weibo
|
|||
|
|
</div>
|
|||
|
|
<div class="code-name">.hao-icon-weibo
|
|||
|
|
</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<span class="icon haofont hao-icon-copyright"></span>
|
|||
|
|
<div class="name">
|
|||
|
|
copyright
|
|||
|
|
</div>
|
|||
|
|
<div class="code-name">.hao-icon-copyright
|
|||
|
|
</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<span class="icon haofont hao-icon-bolt"></span>
|
|||
|
|
<div class="name">
|
|||
|
|
bolt
|
|||
|
|
</div>
|
|||
|
|
<div class="code-name">.hao-icon-bolt
|
|||
|
|
</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<span class="icon haofont hao-icon-circle-info"></span>
|
|||
|
|
<div class="name">
|
|||
|
|
circle-info
|
|||
|
|
</div>
|
|||
|
|
<div class="code-name">.hao-icon-circle-info
|
|||
|
|
</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<span class="icon haofont hao-icon-triangle-exclamation"></span>
|
|||
|
|
<div class="name">
|
|||
|
|
triangle-exclamation
|
|||
|
|
</div>
|
|||
|
|
<div class="code-name">.hao-icon-triangle-exclamation
|
|||
|
|
</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<span class="icon haofont hao-icon-circle-check"></span>
|
|||
|
|
<div class="name">
|
|||
|
|
circle-check
|
|||
|
|
</div>
|
|||
|
|
<div class="code-name">.hao-icon-circle-check
|
|||
|
|
</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<span class="icon haofont hao-icon-circle-minus"></span>
|
|||
|
|
<div class="name">
|
|||
|
|
circle-minus
|
|||
|
|
</div>
|
|||
|
|
<div class="code-name">.hao-icon-circle-minus
|
|||
|
|
</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<span class="icon haofont hao-icon-circle-plus"></span>
|
|||
|
|
<div class="name">
|
|||
|
|
circle-plus
|
|||
|
|
</div>
|
|||
|
|
<div class="code-name">.hao-icon-circle-plus
|
|||
|
|
</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<span class="icon haofont hao-icon-circle-dot"></span>
|
|||
|
|
<div class="name">
|
|||
|
|
circle-dot
|
|||
|
|
</div>
|
|||
|
|
<div class="code-name">.hao-icon-circle-dot
|
|||
|
|
</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<span class="icon haofont hao-icon-scissors"></span>
|
|||
|
|
<div class="name">
|
|||
|
|
scissors
|
|||
|
|
</div>
|
|||
|
|
<div class="code-name">.hao-icon-scissors
|
|||
|
|
</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<span class="icon haofont hao-icon-arrow-down"></span>
|
|||
|
|
<div class="name">
|
|||
|
|
arrow-down
|
|||
|
|
</div>
|
|||
|
|
<div class="code-name">.hao-icon-arrow-down
|
|||
|
|
</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<span class="icon haofont hao-icon-dengpao"></span>
|
|||
|
|
<div class="name">
|
|||
|
|
灯泡
|
|||
|
|
</div>
|
|||
|
|
<div class="code-name">.hao-icon-dengpao
|
|||
|
|
</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<span class="icon haofont hao-icon-danmu"></span>
|
|||
|
|
<div class="name">
|
|||
|
|
弹幕
|
|||
|
|
</div>
|
|||
|
|
<div class="code-name">.hao-icon-danmu
|
|||
|
|
</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<span class="icon haofont hao-icon-zonglan"></span>
|
|||
|
|
<div class="name">
|
|||
|
|
总览
|
|||
|
|
</div>
|
|||
|
|
<div class="code-name">.hao-icon-zonglan
|
|||
|
|
</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<span class="icon haofont hao-icon-linggan"></span>
|
|||
|
|
<div class="name">
|
|||
|
|
灵感
|
|||
|
|
</div>
|
|||
|
|
<div class="code-name">.hao-icon-linggan
|
|||
|
|
</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<span class="icon haofont hao-icon-sanmingzhi"></span>
|
|||
|
|
<div class="name">
|
|||
|
|
三明治
|
|||
|
|
</div>
|
|||
|
|
<div class="code-name">.hao-icon-sanmingzhi
|
|||
|
|
</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<span class="icon haofont hao-icon-keyboard"></span>
|
|||
|
|
<div class="name">
|
|||
|
|
keyboard
|
|||
|
|
</div>
|
|||
|
|
<div class="code-name">.hao-icon-keyboard
|
|||
|
|
</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<span class="icon haofont hao-icon-tiktok"></span>
|
|||
|
|
<div class="name">
|
|||
|
|
tiktok
|
|||
|
|
</div>
|
|||
|
|
<div class="code-name">.hao-icon-tiktok
|
|||
|
|
</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
</ul>
|
|||
|
|
<div class="article markdown">
|
|||
|
|
<h2 id="font-class-">font-class 引用</h2>
|
|||
|
|
<hr>
|
|||
|
|
|
|||
|
|
<p>font-class 是 Unicode 使用方式的一种变种，主要是解决 Unicode 书写不直观，语意不明确的问题。</p>
|
|||
|
|
<p>与 Unicode 使用方式相比，具有如下特点：</p>
|
|||
|
|
<ul>
|
|||
|
|
<li>相比于 Unicode 语意明确，书写更直观。可以很容易分辨这个 icon 是什么。</li>
|
|||
|
|
<li>因为使用 class 来定义图标，所以当要替换图标时，只需要修改 class 里面的 Unicode 引用。</li>
|
|||
|
|
</ul>
|
|||
|
|
<p>使用步骤如下：</p>
|
|||
|
|
<h3 id="-fontclass-">第一步：引入项目下面生成的 fontclass 代码：</h3>
|
|||
|
|
<pre><code class="language-html"><link rel="stylesheet" href="./iconfont.css">
|
|||
|
|
</code></pre>
|
|||
|
|
<h3 id="-">第二步：挑选相应图标并获取类名，应用于页面：</h3>
|
|||
|
|
<pre><code class="language-html"><span class="haofont hao-icon-xxx"></span>
|
|||
|
|
</code></pre>
|
|||
|
|
<blockquote>
|
|||
|
|
<p>"
|
|||
|
|
haofont" 是你项目下的 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="#hao-icon-tushu"></use>
|
|||
|
|
</svg>
|
|||
|
|
<div class="name">图书</div>
|
|||
|
|
<div class="code-name">#hao-icon-tushu</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<svg class="icon svg-icon" aria-hidden="true">
|
|||
|
|
<use xlink:href="#hao-icon-screen"></use>
|
|||
|
|
</svg>
|
|||
|
|
<div class="name">舞台剧</div>
|
|||
|
|
<div class="code-name">#hao-icon-screen</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<svg class="icon svg-icon" aria-hidden="true">
|
|||
|
|
<use xlink:href="#hao-icon-yinle"></use>
|
|||
|
|
</svg>
|
|||
|
|
<div class="name">音乐</div>
|
|||
|
|
<div class="code-name">#hao-icon-yinle</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<svg class="icon svg-icon" aria-hidden="true">
|
|||
|
|
<use xlink:href="#hao-icon-youxi"></use>
|
|||
|
|
</svg>
|
|||
|
|
<div class="name">游戏</div>
|
|||
|
|
<div class="code-name">#hao-icon-youxi</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<svg class="icon svg-icon" aria-hidden="true">
|
|||
|
|
<use xlink:href="#hao-icon-dianying"></use>
|
|||
|
|
</svg>
|
|||
|
|
<div class="name">电影</div>
|
|||
|
|
<div class="code-name">#hao-icon-dianying</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<svg class="icon svg-icon" aria-hidden="true">
|
|||
|
|
<use xlink:href="#hao-icon-star-full"></use>
|
|||
|
|
</svg>
|
|||
|
|
<div class="name">星,星星,星形,半星,实星</div>
|
|||
|
|
<div class="code-name">#hao-icon-star-full</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<svg class="icon svg-icon" aria-hidden="true">
|
|||
|
|
<use xlink:href="#hao-icon-star"></use>
|
|||
|
|
</svg>
|
|||
|
|
<div class="name">星,星星,星形,半星,实星</div>
|
|||
|
|
<div class="code-name">#hao-icon-star</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<svg class="icon svg-icon" aria-hidden="true">
|
|||
|
|
<use xlink:href="#hao-icon-star-half"></use>
|
|||
|
|
</svg>
|
|||
|
|
<div class="name">星,星星,星形,半星</div>
|
|||
|
|
<div class="code-name">#hao-icon-star-half</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<svg class="icon svg-icon" aria-hidden="true">
|
|||
|
|
<use xlink:href="#hao-icon-baibanwenjian-daochu"></use>
|
|||
|
|
</svg>
|
|||
|
|
<div class="name">困困鱼</div>
|
|||
|
|
<div class="code-name">#hao-icon-baibanwenjian-daochu</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<svg class="icon svg-icon" aria-hidden="true">
|
|||
|
|
<use xlink:href="#hao-icon-moon-clear-fill"></use>
|
|||
|
|
</svg>
|
|||
|
|
<div class="name">moon-clear-fill</div>
|
|||
|
|
<div class="code-name">#hao-icon-moon-clear-fill</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<svg class="icon svg-icon" aria-hidden="true">
|
|||
|
|
<use xlink:href="#hao-icon-eicon_train-line"></use>
|
|||
|
|
</svg>
|
|||
|
|
<div class="name">eicon_train-line</div>
|
|||
|
|
<div class="code-name">#hao-icon-eicon_train-line</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<svg class="icon svg-icon" aria-hidden="true">
|
|||
|
|
<use xlink:href="#hao-icon-disc-fill"></use>
|
|||
|
|
</svg>
|
|||
|
|
<div class="name">disc-fill</div>
|
|||
|
|
<div class="code-name">#hao-icon-disc-fill</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<svg class="icon svg-icon" aria-hidden="true">
|
|||
|
|
<use xlink:href="#hao-icon-signal-tower-fill"></use>
|
|||
|
|
</svg>
|
|||
|
|
<div class="name">signal-tower-fill</div>
|
|||
|
|
<div class="code-name">#hao-icon-signal-tower-fill</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<svg class="icon svg-icon" aria-hidden="true">
|
|||
|
|
<use xlink:href="#hao-icon-search--line"></use>
|
|||
|
|
</svg>
|
|||
|
|
<div class="name">search-2-line</div>
|
|||
|
|
<div class="code-name">#hao-icon-search--line</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<svg class="icon svg-icon" aria-hidden="true">
|
|||
|
|
<use xlink:href="#hao-icon-chat--fill"></use>
|
|||
|
|
</svg>
|
|||
|
|
<div class="name">chat-1-fill</div>
|
|||
|
|
<div class="code-name">#hao-icon-chat--fill</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<svg class="icon svg-icon" aria-hidden="true">
|
|||
|
|
<use xlink:href="#hao-icon-apps-fill"></use>
|
|||
|
|
</svg>
|
|||
|
|
<div class="name">apps-fill</div>
|
|||
|
|
<div class="code-name">#hao-icon-apps-fill</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<svg class="icon svg-icon" aria-hidden="true">
|
|||
|
|
<use xlink:href="#hao-icon-Home"></use>
|
|||
|
|
</svg>
|
|||
|
|
<div class="name">Home</div>
|
|||
|
|
<div class="code-name">#hao-icon-Home</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<svg class="icon svg-icon" aria-hidden="true">
|
|||
|
|
<use xlink:href="#hao-icon-yingwen"></use>
|
|||
|
|
</svg>
|
|||
|
|
<div class="name">英文</div>
|
|||
|
|
<div class="code-name">#hao-icon-yingwen</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<svg class="icon svg-icon" aria-hidden="true">
|
|||
|
|
<use xlink:href="#hao-icon-jianti"></use>
|
|||
|
|
</svg>
|
|||
|
|
<div class="name">简体</div>
|
|||
|
|
<div class="code-name">#hao-icon-jianti</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<svg class="icon svg-icon" aria-hidden="true">
|
|||
|
|
<use xlink:href="#hao-icon-fanti"></use>
|
|||
|
|
</svg>
|
|||
|
|
<div class="name">繁体</div>
|
|||
|
|
<div class="code-name">#hao-icon-fanti</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<svg class="icon svg-icon" aria-hidden="true">
|
|||
|
|
<use xlink:href="#hao-icon-aifadian-line"></use>
|
|||
|
|
</svg>
|
|||
|
|
<div class="name">aifadian-line</div>
|
|||
|
|
<div class="code-name">#hao-icon-aifadian-line</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<svg class="icon svg-icon" aria-hidden="true">
|
|||
|
|
<use xlink:href="#hao-icon-zhanghao1"></use>
|
|||
|
|
</svg>
|
|||
|
|
<div class="name">账号</div>
|
|||
|
|
<div class="code-name">#hao-icon-zhanghao1</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<svg class="icon svg-icon" aria-hidden="true">
|
|||
|
|
<use xlink:href="#hao-icon-zuozhe"></use>
|
|||
|
|
</svg>
|
|||
|
|
<div class="name">作者</div>
|
|||
|
|
<div class="code-name">#hao-icon-zuozhe</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<svg class="icon svg-icon" aria-hidden="true">
|
|||
|
|
<use xlink:href="#hao-icon-weixin1"></use>
|
|||
|
|
</svg>
|
|||
|
|
<div class="name">微信</div>
|
|||
|
|
<div class="code-name">#hao-icon-weixin1</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<svg class="icon svg-icon" aria-hidden="true">
|
|||
|
|
<use xlink:href="#hao-icon-bianji"></use>
|
|||
|
|
</svg>
|
|||
|
|
<div class="name">编辑</div>
|
|||
|
|
<div class="code-name">#hao-icon-bianji</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<svg class="icon svg-icon" aria-hidden="true">
|
|||
|
|
<use xlink:href="#hao-icon-check-circle"></use>
|
|||
|
|
</svg>
|
|||
|
|
<div class="name">check-circle</div>
|
|||
|
|
<div class="code-name">#hao-icon-check-circle</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<svg class="icon svg-icon" aria-hidden="true">
|
|||
|
|
<use xlink:href="#hao-icon-dashboard"></use>
|
|||
|
|
</svg>
|
|||
|
|
<div class="name">dashboard</div>
|
|||
|
|
<div class="code-name">#hao-icon-dashboard</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<svg class="icon svg-icon" aria-hidden="true">
|
|||
|
|
<use xlink:href="#hao-icon-bullseye"></use>
|
|||
|
|
</svg>
|
|||
|
|
<div class="name">bullseye</div>
|
|||
|
|
<div class="code-name">#hao-icon-bullseye</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<svg class="icon svg-icon" aria-hidden="true">
|
|||
|
|
<use xlink:href="#hao-icon-logo-moment"></use>
|
|||
|
|
</svg>
|
|||
|
|
<div class="name">logo-moment</div>
|
|||
|
|
<div class="code-name">#hao-icon-logo-moment</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<svg class="icon svg-icon" aria-hidden="true">
|
|||
|
|
<use xlink:href="#hao-icon-leetcode"></use>
|
|||
|
|
</svg>
|
|||
|
|
<div class="name">leetcode</div>
|
|||
|
|
<div class="code-name">#hao-icon-leetcode</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<svg class="icon svg-icon" aria-hidden="true">
|
|||
|
|
<use xlink:href="#hao-icon-gitlab"></use>
|
|||
|
|
</svg>
|
|||
|
|
<div class="name">gitlab</div>
|
|||
|
|
<div class="code-name">#hao-icon-gitlab</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<svg class="icon svg-icon" aria-hidden="true">
|
|||
|
|
<use xlink:href="#hao-icon-csdn"></use>
|
|||
|
|
</svg>
|
|||
|
|
<div class="name">csdn</div>
|
|||
|
|
<div class="code-name">#hao-icon-csdn</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<svg class="icon svg-icon" aria-hidden="true">
|
|||
|
|
<use xlink:href="#hao-icon-dribbble"></use>
|
|||
|
|
</svg>
|
|||
|
|
<div class="name">dribbble</div>
|
|||
|
|
<div class="code-name">#hao-icon-dribbble</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<svg class="icon svg-icon" aria-hidden="true">
|
|||
|
|
<use xlink:href="#hao-icon-yuque"></use>
|
|||
|
|
</svg>
|
|||
|
|
<div class="name">yuque</div>
|
|||
|
|
<div class="code-name">#hao-icon-yuque</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<svg class="icon svg-icon" aria-hidden="true">
|
|||
|
|
<use xlink:href="#hao-icon-linkedin"></use>
|
|||
|
|
</svg>
|
|||
|
|
<div class="name">linkedin</div>
|
|||
|
|
<div class="code-name">#hao-icon-linkedin</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<svg class="icon svg-icon" aria-hidden="true">
|
|||
|
|
<use xlink:href="#hao-icon-youtube"></use>
|
|||
|
|
</svg>
|
|||
|
|
<div class="name">youtube</div>
|
|||
|
|
<div class="code-name">#hao-icon-youtube</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<svg class="icon svg-icon" aria-hidden="true">
|
|||
|
|
<use xlink:href="#hao-icon-Instagram"></use>
|
|||
|
|
</svg>
|
|||
|
|
<div class="name">Instagram</div>
|
|||
|
|
<div class="code-name">#hao-icon-Instagram</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<svg class="icon svg-icon" aria-hidden="true">
|
|||
|
|
<use xlink:href="#hao-icon-slack"></use>
|
|||
|
|
</svg>
|
|||
|
|
<div class="name">slack</div>
|
|||
|
|
<div class="code-name">#hao-icon-slack</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<svg class="icon svg-icon" aria-hidden="true">
|
|||
|
|
<use xlink:href="#hao-icon-baidu"></use>
|
|||
|
|
</svg>
|
|||
|
|
<div class="name">百度</div>
|
|||
|
|
<div class="code-name">#hao-icon-baidu</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<svg class="icon svg-icon" aria-hidden="true">
|
|||
|
|
<use xlink:href="#hao-icon-discord-line"></use>
|
|||
|
|
</svg>
|
|||
|
|
<div class="name">discord-line</div>
|
|||
|
|
<div class="code-name">#hao-icon-discord-line</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<svg class="icon svg-icon" aria-hidden="true">
|
|||
|
|
<use xlink:href="#hao-icon-cnblogs"></use>
|
|||
|
|
</svg>
|
|||
|
|
<div class="name">cnblogs</div>
|
|||
|
|
<div class="code-name">#hao-icon-cnblogs</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<svg class="icon svg-icon" aria-hidden="true">
|
|||
|
|
<use xlink:href="#hao-icon-juejin"></use>
|
|||
|
|
</svg>
|
|||
|
|
<div class="name">juejin</div>
|
|||
|
|
<div class="code-name">#hao-icon-juejin</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<svg class="icon svg-icon" aria-hidden="true">
|
|||
|
|
<use xlink:href="#hao-icon-steam"></use>
|
|||
|
|
</svg>
|
|||
|
|
<div class="name">steam</div>
|
|||
|
|
<div class="code-name">#hao-icon-steam</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<svg class="icon svg-icon" aria-hidden="true">
|
|||
|
|
<use xlink:href="#hao-icon-telegram"></use>
|
|||
|
|
</svg>
|
|||
|
|
<div class="name">telegram</div>
|
|||
|
|
<div class="code-name">#hao-icon-telegram</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<svg class="icon svg-icon" aria-hidden="true">
|
|||
|
|
<use xlink:href="#hao-icon-toutiao"></use>
|
|||
|
|
</svg>
|
|||
|
|
<div class="name">toutiao</div>
|
|||
|
|
<div class="code-name">#hao-icon-toutiao</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<svg class="icon svg-icon" aria-hidden="true">
|
|||
|
|
<use xlink:href="#hao-icon-weixin"></use>
|
|||
|
|
</svg>
|
|||
|
|
<div class="name">微信</div>
|
|||
|
|
<div class="code-name">#hao-icon-weixin</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<svg class="icon svg-icon" aria-hidden="true">
|
|||
|
|
<use xlink:href="#hao-icon-douban"></use>
|
|||
|
|
</svg>
|
|||
|
|
<div class="name">豆瓣</div>
|
|||
|
|
<div class="code-name">#hao-icon-douban</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<svg class="icon svg-icon" aria-hidden="true">
|
|||
|
|
<use xlink:href="#hao-icon-29"></use>
|
|||
|
|
</svg>
|
|||
|
|
<div class="name">知乎</div>
|
|||
|
|
<div class="code-name">#hao-icon-29</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<svg class="icon svg-icon" aria-hidden="true">
|
|||
|
|
<use xlink:href="#hao-icon-weixingongzhonghao"></use>
|
|||
|
|
</svg>
|
|||
|
|
<div class="name">微信公众号</div>
|
|||
|
|
<div class="code-name">#hao-icon-weixingongzhonghao</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<svg class="icon svg-icon" aria-hidden="true">
|
|||
|
|
<use xlink:href="#hao-icon-cainixihuan"></use>
|
|||
|
|
</svg>
|
|||
|
|
<div class="name">猜你喜欢</div>
|
|||
|
|
<div class="code-name">#hao-icon-cainixihuan</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<svg class="icon svg-icon" aria-hidden="true">
|
|||
|
|
<use xlink:href="#hao-icon-eicon_map-2-line1"></use>
|
|||
|
|
</svg>
|
|||
|
|
<div class="name">eicon_map-2-line</div>
|
|||
|
|
<div class="code-name">#hao-icon-eicon_map-2-line1</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<svg class="icon svg-icon" aria-hidden="true">
|
|||
|
|
<use xlink:href="#hao-icon-yuan"></use>
|
|||
|
|
</svg>
|
|||
|
|
<div class="name">circle</div>
|
|||
|
|
<div class="code-name">#hao-icon-yuan</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<svg class="icon svg-icon" aria-hidden="true">
|
|||
|
|
<use xlink:href="#hao-icon-creative-commons-nd-line"></use>
|
|||
|
|
</svg>
|
|||
|
|
<div class="name">creative-commons-nd-line</div>
|
|||
|
|
<div class="code-name">#hao-icon-creative-commons-nd-line</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<svg class="icon svg-icon" aria-hidden="true">
|
|||
|
|
<use xlink:href="#hao-icon-creative-commons-by-line"></use>
|
|||
|
|
</svg>
|
|||
|
|
<div class="name">creative-commons-by-line</div>
|
|||
|
|
<div class="code-name">#hao-icon-creative-commons-by-line</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<svg class="icon svg-icon" aria-hidden="true">
|
|||
|
|
<use xlink:href="#hao-icon-creative-commons-nc-line"></use>
|
|||
|
|
</svg>
|
|||
|
|
<div class="name">creative-commons-nc-line</div>
|
|||
|
|
<div class="code-name">#hao-icon-creative-commons-nc-line</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<svg class="icon svg-icon" aria-hidden="true">
|
|||
|
|
<use xlink:href="#hao-icon-copyright-line"></use>
|
|||
|
|
</svg>
|
|||
|
|
<div class="name">copyright-line</div>
|
|||
|
|
<div class="code-name">#hao-icon-copyright-line</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<svg class="icon svg-icon" aria-hidden="true">
|
|||
|
|
<use xlink:href="#hao-icon-font"></use>
|
|||
|
|
</svg>
|
|||
|
|
<div class="name">font</div>
|
|||
|
|
<div class="code-name">#hao-icon-font</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<svg class="icon svg-icon" aria-hidden="true">
|
|||
|
|
<use xlink:href="#hao-icon-stopwatch"></use>
|
|||
|
|
</svg>
|
|||
|
|
<div class="name">stopwatch</div>
|
|||
|
|
<div class="code-name">#hao-icon-stopwatch</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<svg class="icon svg-icon" aria-hidden="true">
|
|||
|
|
<use xlink:href="#hao-icon-file-lines"></use>
|
|||
|
|
</svg>
|
|||
|
|
<div class="name">file-lines</div>
|
|||
|
|
<div class="code-name">#hao-icon-file-lines</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<svg class="icon svg-icon" aria-hidden="true">
|
|||
|
|
<use xlink:href="#hao-icon-square-poll-vertical"></use>
|
|||
|
|
</svg>
|
|||
|
|
<div class="name">square-poll-vertical</div>
|
|||
|
|
<div class="code-name">#hao-icon-square-poll-vertical</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<svg class="icon svg-icon" aria-hidden="true">
|
|||
|
|
<use xlink:href="#hao-icon-universal-access"></use>
|
|||
|
|
</svg>
|
|||
|
|
<div class="name">universal-access</div>
|
|||
|
|
<div class="code-name">#hao-icon-universal-access</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<svg class="icon svg-icon" aria-hidden="true">
|
|||
|
|
<use xlink:href="#hao-icon-hourglass-start"></use>
|
|||
|
|
</svg>
|
|||
|
|
<div class="name">hourglass-start</div>
|
|||
|
|
<div class="code-name">#hao-icon-hourglass-start</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<svg class="icon svg-icon" aria-hidden="true">
|
|||
|
|
<use xlink:href="#hao-icon-tongxunlu07"></use>
|
|||
|
|
</svg>
|
|||
|
|
<div class="name">通讯录07</div>
|
|||
|
|
<div class="code-name">#hao-icon-tongxunlu07</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<svg class="icon svg-icon" aria-hidden="true">
|
|||
|
|
<use xlink:href="#hao-icon-arrow-right"></use>
|
|||
|
|
</svg>
|
|||
|
|
<div class="name">arrow-right</div>
|
|||
|
|
<div class="code-name">#hao-icon-arrow-right</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<svg class="icon svg-icon" aria-hidden="true">
|
|||
|
|
<use xlink:href="#hao-icon-arrow-left"></use>
|
|||
|
|
</svg>
|
|||
|
|
<div class="name">arrow-left</div>
|
|||
|
|
<div class="code-name">#hao-icon-arrow-left</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<svg class="icon svg-icon" aria-hidden="true">
|
|||
|
|
<use xlink:href="#hao-icon-dice"></use>
|
|||
|
|
</svg>
|
|||
|
|
<div class="name">dice</div>
|
|||
|
|
<div class="code-name">#hao-icon-dice</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<svg class="icon svg-icon" aria-hidden="true">
|
|||
|
|
<use xlink:href="#hao-icon-copy"></use>
|
|||
|
|
</svg>
|
|||
|
|
<div class="name">copy</div>
|
|||
|
|
<div class="code-name">#hao-icon-copy</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<svg class="icon svg-icon" aria-hidden="true">
|
|||
|
|
<use xlink:href="#hao-icon-cube"></use>
|
|||
|
|
</svg>
|
|||
|
|
<div class="name">cube</div>
|
|||
|
|
<div class="code-name">#hao-icon-cube</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<svg class="icon svg-icon" aria-hidden="true">
|
|||
|
|
<use xlink:href="#hao-icon-circle-arrow-right"></use>
|
|||
|
|
</svg>
|
|||
|
|
<div class="name">circle-arrow-right</div>
|
|||
|
|
<div class="code-name">#hao-icon-circle-arrow-right</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<svg class="icon svg-icon" aria-hidden="true">
|
|||
|
|
<use xlink:href="#hao-icon-clock"></use>
|
|||
|
|
</svg>
|
|||
|
|
<div class="name">clock</div>
|
|||
|
|
<div class="code-name">#hao-icon-clock</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<svg class="icon svg-icon" aria-hidden="true">
|
|||
|
|
<use xlink:href="#hao-icon-book"></use>
|
|||
|
|
</svg>
|
|||
|
|
<div class="name">book</div>
|
|||
|
|
<div class="code-name">#hao-icon-book</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<svg class="icon svg-icon" aria-hidden="true">
|
|||
|
|
<use xlink:href="#hao-icon-calendar-alt"></use>
|
|||
|
|
</svg>
|
|||
|
|
<div class="name">calendar-alt</div>
|
|||
|
|
<div class="code-name">#hao-icon-calendar-alt</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<svg class="icon svg-icon" aria-hidden="true">
|
|||
|
|
<use xlink:href="#hao-icon-eye-outline"></use>
|
|||
|
|
</svg>
|
|||
|
|
<div class="name">eye-outline</div>
|
|||
|
|
<div class="code-name">#hao-icon-eye-outline</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<svg class="icon svg-icon" aria-hidden="true">
|
|||
|
|
<use xlink:href="#hao-icon-circle-half-stroke"></use>
|
|||
|
|
</svg>
|
|||
|
|
<div class="name">circle-half-stroke</div>
|
|||
|
|
<div class="code-name">#hao-icon-circle-half-stroke</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<svg class="icon svg-icon" aria-hidden="true">
|
|||
|
|
<use xlink:href="#hao-icon-arrow-up"></use>
|
|||
|
|
</svg>
|
|||
|
|
<div class="name">arrow-up</div>
|
|||
|
|
<div class="code-name">#hao-icon-arrow-up</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<svg class="icon svg-icon" aria-hidden="true">
|
|||
|
|
<use xlink:href="#hao-icon-file-word"></use>
|
|||
|
|
</svg>
|
|||
|
|
<div class="name">file-word</div>
|
|||
|
|
<div class="code-name">#hao-icon-file-word</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<svg class="icon svg-icon" aria-hidden="true">
|
|||
|
|
<use xlink:href="#hao-icon-fire"></use>
|
|||
|
|
</svg>
|
|||
|
|
<div class="name">fire</div>
|
|||
|
|
<div class="code-name">#hao-icon-fire</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<svg class="icon svg-icon" aria-hidden="true">
|
|||
|
|
<use xlink:href="#hao-icon-dove"></use>
|
|||
|
|
</svg>
|
|||
|
|
<div class="name">dove</div>
|
|||
|
|
<div class="code-name">#hao-icon-dove</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<svg class="icon svg-icon" aria-hidden="true">
|
|||
|
|
<use xlink:href="#hao-icon-gear"></use>
|
|||
|
|
</svg>
|
|||
|
|
<div class="name">gear</div>
|
|||
|
|
<div class="code-name">#hao-icon-gear</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<svg class="icon svg-icon" aria-hidden="true">
|
|||
|
|
<use xlink:href="#hao-icon-inbox"></use>
|
|||
|
|
</svg>
|
|||
|
|
<div class="name">inbox</div>
|
|||
|
|
<div class="code-name">#hao-icon-inbox</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<svg class="icon svg-icon" aria-hidden="true">
|
|||
|
|
<use xlink:href="#hao-icon-history"></use>
|
|||
|
|
</svg>
|
|||
|
|
<div class="name">history</div>
|
|||
|
|
<div class="code-name">#hao-icon-history</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<svg class="icon svg-icon" aria-hidden="true">
|
|||
|
|
<use xlink:href="#hao-icon-message"></use>
|
|||
|
|
</svg>
|
|||
|
|
<div class="name">message</div>
|
|||
|
|
<div class="code-name">#hao-icon-message</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<svg class="icon svg-icon" aria-hidden="true">
|
|||
|
|
<use xlink:href="#hao-icon-moon"></use>
|
|||
|
|
</svg>
|
|||
|
|
<div class="name">moon</div>
|
|||
|
|
<div class="code-name">#hao-icon-moon</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<svg class="icon svg-icon" aria-hidden="true">
|
|||
|
|
<use xlink:href="#hao-icon-shapes"></use>
|
|||
|
|
</svg>
|
|||
|
|
<div class="name">shapes</div>
|
|||
|
|
<div class="code-name">#hao-icon-shapes</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<svg class="icon svg-icon" aria-hidden="true">
|
|||
|
|
<use xlink:href="#hao-icon-shuffle"></use>
|
|||
|
|
</svg>
|
|||
|
|
<div class="name">shuffle</div>
|
|||
|
|
<div class="code-name">#hao-icon-shuffle</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<svg class="icon svg-icon" aria-hidden="true">
|
|||
|
|
<use xlink:href="#hao-icon-language"></use>
|
|||
|
|
</svg>
|
|||
|
|
<div class="name">language</div>
|
|||
|
|
<div class="code-name">#hao-icon-language</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<svg class="icon svg-icon" aria-hidden="true">
|
|||
|
|
<use xlink:href="#hao-icon-tags"></use>
|
|||
|
|
</svg>
|
|||
|
|
<div class="name">tags</div>
|
|||
|
|
<div class="code-name">#hao-icon-tags</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<svg class="icon svg-icon" aria-hidden="true">
|
|||
|
|
<use xlink:href="#hao-icon-train"></use>
|
|||
|
|
</svg>
|
|||
|
|
<div class="name">train</div>
|
|||
|
|
<div class="code-name">#hao-icon-train</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<svg class="icon svg-icon" aria-hidden="true">
|
|||
|
|
<use xlink:href="#hao-icon-warning"></use>
|
|||
|
|
</svg>
|
|||
|
|
<div class="name">warning</div>
|
|||
|
|
<div class="code-name">#hao-icon-warning</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<svg class="icon svg-icon" aria-hidden="true">
|
|||
|
|
<use xlink:href="#hao-icon-circle-arrow-up-right-1"></use>
|
|||
|
|
</svg>
|
|||
|
|
<div class="name">circle-arrow-up-right-1</div>
|
|||
|
|
<div class="code-name">#hao-icon-circle-arrow-up-right-1</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<svg class="icon svg-icon" aria-hidden="true">
|
|||
|
|
<use xlink:href="#hao-icon-fish"></use>
|
|||
|
|
</svg>
|
|||
|
|
<div class="name">fish</div>
|
|||
|
|
<div class="code-name">#hao-icon-fish</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<svg class="icon svg-icon" aria-hidden="true">
|
|||
|
|
<use xlink:href="#hao-icon-envelope"></use>
|
|||
|
|
</svg>
|
|||
|
|
<div class="name">envelope</div>
|
|||
|
|
<div class="code-name">#hao-icon-envelope</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<svg class="icon svg-icon" aria-hidden="true">
|
|||
|
|
<use xlink:href="#hao-icon-music"></use>
|
|||
|
|
</svg>
|
|||
|
|
<div class="name">music</div>
|
|||
|
|
<div class="code-name">#hao-icon-music</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<svg class="icon svg-icon" aria-hidden="true">
|
|||
|
|
<use xlink:href="#hao-icon-fan"></use>
|
|||
|
|
</svg>
|
|||
|
|
<div class="name">fan</div>
|
|||
|
|
<div class="code-name">#hao-icon-fan</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<svg class="icon svg-icon" aria-hidden="true">
|
|||
|
|
<use xlink:href="#hao-icon-heartbeat-bold"></use>
|
|||
|
|
</svg>
|
|||
|
|
<div class="name">heartbeat-bold</div>
|
|||
|
|
<div class="code-name">#hao-icon-heartbeat-bold</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<svg class="icon svg-icon" aria-hidden="true">
|
|||
|
|
<use xlink:href="#hao-icon-link"></use>
|
|||
|
|
</svg>
|
|||
|
|
<div class="name">link</div>
|
|||
|
|
<div class="code-name">#hao-icon-link</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<svg class="icon svg-icon" aria-hidden="true">
|
|||
|
|
<use xlink:href="#hao-icon-chevron-left"></use>
|
|||
|
|
</svg>
|
|||
|
|
<div class="name">chevron-left</div>
|
|||
|
|
<div class="code-name">#hao-icon-chevron-left</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<svg class="icon svg-icon" aria-hidden="true">
|
|||
|
|
<use xlink:href="#hao-icon-rocket"></use>
|
|||
|
|
</svg>
|
|||
|
|
<div class="name">rocket</div>
|
|||
|
|
<div class="code-name">#hao-icon-rocket</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<svg class="icon svg-icon" aria-hidden="true">
|
|||
|
|
<use xlink:href="#hao-icon-lightbulb"></use>
|
|||
|
|
</svg>
|
|||
|
|
<div class="name">lightbulb</div>
|
|||
|
|
<div class="code-name">#hao-icon-lightbulb</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<svg class="icon svg-icon" aria-hidden="true">
|
|||
|
|
<use xlink:href="#hao-icon-shoe-prints"></use>
|
|||
|
|
</svg>
|
|||
|
|
<div class="name">shoe-prints</div>
|
|||
|
|
<div class="code-name">#hao-icon-shoe-prints</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<svg class="icon svg-icon" aria-hidden="true">
|
|||
|
|
<use xlink:href="#hao-icon-images"></use>
|
|||
|
|
</svg>
|
|||
|
|
<div class="name">images</div>
|
|||
|
|
<div class="code-name">#hao-icon-images</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<svg class="icon svg-icon" aria-hidden="true">
|
|||
|
|
<use xlink:href="#hao-icon-box-archive"></use>
|
|||
|
|
</svg>
|
|||
|
|
<div class="name">box-archive</div>
|
|||
|
|
<div class="code-name">#hao-icon-box-archive</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<svg class="icon svg-icon" aria-hidden="true">
|
|||
|
|
<use xlink:href="#hao-icon-artstation"></use>
|
|||
|
|
</svg>
|
|||
|
|
<div class="name">artstation</div>
|
|||
|
|
<div class="code-name">#hao-icon-artstation</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<svg class="icon svg-icon" aria-hidden="true">
|
|||
|
|
<use xlink:href="#hao-icon-paper-plane"></use>
|
|||
|
|
</svg>
|
|||
|
|
<div class="name">paper-plane</div>
|
|||
|
|
<div class="code-name">#hao-icon-paper-plane</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<svg class="icon svg-icon" aria-hidden="true">
|
|||
|
|
<use xlink:href="#hao-icon-house-chimney"></use>
|
|||
|
|
</svg>
|
|||
|
|
<div class="name">house-chimney</div>
|
|||
|
|
<div class="code-name">#hao-icon-house-chimney</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<svg class="icon svg-icon" aria-hidden="true">
|
|||
|
|
<use xlink:href="#hao-icon-bars"></use>
|
|||
|
|
</svg>
|
|||
|
|
<div class="name">bars</div>
|
|||
|
|
<div class="code-name">#hao-icon-bars</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<svg class="icon svg-icon" aria-hidden="true">
|
|||
|
|
<use xlink:href="#hao-icon-arrows-left-right"></use>
|
|||
|
|
</svg>
|
|||
|
|
<div class="name">arrows-left-right</div>
|
|||
|
|
<div class="code-name">#hao-icon-arrows-left-right</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<svg class="icon svg-icon" aria-hidden="true">
|
|||
|
|
<use xlink:href="#hao-icon-book-open"></use>
|
|||
|
|
</svg>
|
|||
|
|
<div class="name">book-open</div>
|
|||
|
|
<div class="code-name">#hao-icon-book-open</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<svg class="icon svg-icon" aria-hidden="true">
|
|||
|
|
<use xlink:href="#hao-icon-list-ul"></use>
|
|||
|
|
</svg>
|
|||
|
|
<div class="name">list-ul</div>
|
|||
|
|
<div class="code-name">#hao-icon-list-ul</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<svg class="icon svg-icon" aria-hidden="true">
|
|||
|
|
<use xlink:href="#hao-icon-comment-sms"></use>
|
|||
|
|
</svg>
|
|||
|
|
<div class="name">comment-sms</div>
|
|||
|
|
<div class="code-name">#hao-icon-comment-sms</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<svg class="icon svg-icon" aria-hidden="true">
|
|||
|
|
<use xlink:href="#hao-icon-angles-right"></use>
|
|||
|
|
</svg>
|
|||
|
|
<div class="name">angles-right</div>
|
|||
|
|
<div class="code-name">#hao-icon-angles-right</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<svg class="icon svg-icon" aria-hidden="true">
|
|||
|
|
<use xlink:href="#hao-icon-tag"></use>
|
|||
|
|
</svg>
|
|||
|
|
<div class="name">tag</div>
|
|||
|
|
<div class="code-name">#hao-icon-tag</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<svg class="icon svg-icon" aria-hidden="true">
|
|||
|
|
<use xlink:href="#hao-icon-chevron-right"></use>
|
|||
|
|
</svg>
|
|||
|
|
<div class="name">chevron-right</div>
|
|||
|
|
<div class="code-name">#hao-icon-chevron-right</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<svg class="icon svg-icon" aria-hidden="true">
|
|||
|
|
<use xlink:href="#hao-icon-radio"></use>
|
|||
|
|
</svg>
|
|||
|
|
<div class="name">radio</div>
|
|||
|
|
<div class="code-name">#hao-icon-radio</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<svg class="icon svg-icon" aria-hidden="true">
|
|||
|
|
<use xlink:href="#hao-icon-forward"></use>
|
|||
|
|
</svg>
|
|||
|
|
<div class="name">forward</div>
|
|||
|
|
<div class="code-name">#hao-icon-forward</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<svg class="icon svg-icon" aria-hidden="true">
|
|||
|
|
<use xlink:href="#hao-icon-window-restore"></use>
|
|||
|
|
</svg>
|
|||
|
|
<div class="name">window-restore</div>
|
|||
|
|
<div class="code-name">#hao-icon-window-restore</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<svg class="icon svg-icon" aria-hidden="true">
|
|||
|
|
<use xlink:href="#hao-icon-backward"></use>
|
|||
|
|
</svg>
|
|||
|
|
<div class="name">backward</div>
|
|||
|
|
<div class="code-name">#hao-icon-backward</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<svg class="icon svg-icon" aria-hidden="true">
|
|||
|
|
<use xlink:href="#hao-icon-download"></use>
|
|||
|
|
</svg>
|
|||
|
|
<div class="name">download</div>
|
|||
|
|
<div class="code-name">#hao-icon-download</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<svg class="icon svg-icon" aria-hidden="true">
|
|||
|
|
<use xlink:href="#hao-icon-comment-medical"></use>
|
|||
|
|
</svg>
|
|||
|
|
<div class="name">comment-medical</div>
|
|||
|
|
<div class="code-name">#hao-icon-comment-medical</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<svg class="icon svg-icon" aria-hidden="true">
|
|||
|
|
<use xlink:href="#hao-icon-paste"></use>
|
|||
|
|
</svg>
|
|||
|
|
<div class="name">paste</div>
|
|||
|
|
<div class="code-name">#hao-icon-paste</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<svg class="icon svg-icon" aria-hidden="true">
|
|||
|
|
<use xlink:href="#hao-icon-arrow-rotate-right"></use>
|
|||
|
|
</svg>
|
|||
|
|
<div class="name">arrow-rotate-right</div>
|
|||
|
|
<div class="code-name">#hao-icon-arrow-rotate-right</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<svg class="icon svg-icon" aria-hidden="true">
|
|||
|
|
<use xlink:href="#hao-icon-play"></use>
|
|||
|
|
</svg>
|
|||
|
|
<div class="name">play</div>
|
|||
|
|
<div class="code-name">#hao-icon-play</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<svg class="icon svg-icon" aria-hidden="true">
|
|||
|
|
<use xlink:href="#hao-icon-circle-xmark"></use>
|
|||
|
|
</svg>
|
|||
|
|
<div class="name">circle-xmark</div>
|
|||
|
|
<div class="code-name">#hao-icon-circle-xmark</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<svg class="icon svg-icon" aria-hidden="true">
|
|||
|
|
<use xlink:href="#hao-icon-angle-down"></use>
|
|||
|
|
</svg>
|
|||
|
|
<div class="name">angle-down</div>
|
|||
|
|
<div class="code-name">#hao-icon-angle-down</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<svg class="icon svg-icon" aria-hidden="true">
|
|||
|
|
<use xlink:href="#hao-icon-chart-line"></use>
|
|||
|
|
</svg>
|
|||
|
|
<div class="name">chart-line</div>
|
|||
|
|
<div class="code-name">#hao-icon-chart-line</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<svg class="icon svg-icon" aria-hidden="true">
|
|||
|
|
<use xlink:href="#hao-icon-pencil"></use>
|
|||
|
|
</svg>
|
|||
|
|
<div class="name">pencil</div>
|
|||
|
|
<div class="code-name">#hao-icon-pencil</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<svg class="icon svg-icon" aria-hidden="true">
|
|||
|
|
<use xlink:href="#hao-icon-thumbtack"></use>
|
|||
|
|
</svg>
|
|||
|
|
<div class="name">thumbtack</div>
|
|||
|
|
<div class="code-name">#hao-icon-thumbtack</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<svg class="icon svg-icon" aria-hidden="true">
|
|||
|
|
<use xlink:href="#hao-icon-location-dot"></use>
|
|||
|
|
</svg>
|
|||
|
|
<div class="name">location-dot</div>
|
|||
|
|
<div class="code-name">#hao-icon-location-dot</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<svg class="icon svg-icon" aria-hidden="true">
|
|||
|
|
<use xlink:href="#hao-icon-fw-fire"></use>
|
|||
|
|
</svg>
|
|||
|
|
<div class="name">fw-fire</div>
|
|||
|
|
<div class="code-name">#hao-icon-fw-fire</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<svg class="icon svg-icon" aria-hidden="true">
|
|||
|
|
<use xlink:href="#hao-icon-calendar-days"></use>
|
|||
|
|
</svg>
|
|||
|
|
<div class="name">calendar-days</div>
|
|||
|
|
<div class="code-name">#hao-icon-calendar-days</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<svg class="icon svg-icon" aria-hidden="true">
|
|||
|
|
<use xlink:href="#hao-icon-angle-right"></use>
|
|||
|
|
</svg>
|
|||
|
|
<div class="name">angle-right</div>
|
|||
|
|
<div class="code-name">#hao-icon-angle-right</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<svg class="icon svg-icon" aria-hidden="true">
|
|||
|
|
<use xlink:href="#hao-icon-dice-d20"></use>
|
|||
|
|
</svg>
|
|||
|
|
<div class="name">dice-d20</div>
|
|||
|
|
<div class="code-name">#hao-icon-dice-d20</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<svg class="icon svg-icon" aria-hidden="true">
|
|||
|
|
<use xlink:href="#hao-icon-instagram"></use>
|
|||
|
|
</svg>
|
|||
|
|
<div class="name">instagram</div>
|
|||
|
|
<div class="code-name">#hao-icon-instagram</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<svg class="icon svg-icon" aria-hidden="true">
|
|||
|
|
<use xlink:href="#hao-icon-xmark"></use>
|
|||
|
|
</svg>
|
|||
|
|
<div class="name">xmark</div>
|
|||
|
|
<div class="code-name">#hao-icon-xmark</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<svg class="icon svg-icon" aria-hidden="true">
|
|||
|
|
<use xlink:href="#hao-icon-spinner"></use>
|
|||
|
|
</svg>
|
|||
|
|
<div class="name">spinner</div>
|
|||
|
|
<div class="code-name">#hao-icon-spinner</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<svg class="icon svg-icon" aria-hidden="true">
|
|||
|
|
<use xlink:href="#hao-icon-bullhorn"></use>
|
|||
|
|
</svg>
|
|||
|
|
<div class="name">bullhorn</div>
|
|||
|
|
<div class="code-name">#hao-icon-bullhorn</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<svg class="icon svg-icon" aria-hidden="true">
|
|||
|
|
<use xlink:href="#hao-icon-stream"></use>
|
|||
|
|
</svg>
|
|||
|
|
<div class="name">stream</div>
|
|||
|
|
<div class="code-name">#hao-icon-stream</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<svg class="icon svg-icon" aria-hidden="true">
|
|||
|
|
<use xlink:href="#hao-icon-caret-left"></use>
|
|||
|
|
</svg>
|
|||
|
|
<div class="name">caret-left</div>
|
|||
|
|
<div class="code-name">#hao-icon-caret-left</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<svg class="icon svg-icon" aria-hidden="true">
|
|||
|
|
<use xlink:href="#hao-icon-folder-open"></use>
|
|||
|
|
</svg>
|
|||
|
|
<div class="name">folder-open</div>
|
|||
|
|
<div class="code-name">#hao-icon-folder-open</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<svg class="icon svg-icon" aria-hidden="true">
|
|||
|
|
<use xlink:href="#hao-icon-thumbs-up"></use>
|
|||
|
|
</svg>
|
|||
|
|
<div class="name">thumbs-up</div>
|
|||
|
|
<div class="code-name">#hao-icon-thumbs-up</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<svg class="icon svg-icon" aria-hidden="true">
|
|||
|
|
<use xlink:href="#hao-icon-angle-double-down"></use>
|
|||
|
|
</svg>
|
|||
|
|
<div class="name">angle-double-down</div>
|
|||
|
|
<div class="code-name">#hao-icon-angle-double-down</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<svg class="icon svg-icon" aria-hidden="true">
|
|||
|
|
<use xlink:href="#hao-icon-sign-out-alt"></use>
|
|||
|
|
</svg>
|
|||
|
|
<div class="name">sign-out-alt</div>
|
|||
|
|
<div class="code-name">#hao-icon-sign-out-alt</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<svg class="icon svg-icon" aria-hidden="true">
|
|||
|
|
<use xlink:href="#hao-icon-angle-double-left"></use>
|
|||
|
|
</svg>
|
|||
|
|
<div class="name">angle-double-left</div>
|
|||
|
|
<div class="code-name">#hao-icon-angle-double-left</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<svg class="icon svg-icon" aria-hidden="true">
|
|||
|
|
<use xlink:href="#hao-icon-angle-double-right"></use>
|
|||
|
|
</svg>
|
|||
|
|
<div class="name">angle-double-right</div>
|
|||
|
|
<div class="code-name">#hao-icon-angle-double-right</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<svg class="icon svg-icon" aria-hidden="true">
|
|||
|
|
<use xlink:href="#hao-icon-angle-left"></use>
|
|||
|
|
</svg>
|
|||
|
|
<div class="name">angle-left</div>
|
|||
|
|
<div class="code-name">#hao-icon-angle-left</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<svg class="icon svg-icon" aria-hidden="true">
|
|||
|
|
<use xlink:href="#hao-icon-fw-eye"></use>
|
|||
|
|
</svg>
|
|||
|
|
<div class="name">fw-eye</div>
|
|||
|
|
<div class="code-name">#hao-icon-fw-eye</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<svg class="icon svg-icon" aria-hidden="true">
|
|||
|
|
<use xlink:href="#hao-icon-repeat"></use>
|
|||
|
|
</svg>
|
|||
|
|
<div class="name">repeat</div>
|
|||
|
|
<div class="code-name">#hao-icon-repeat</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<svg class="icon svg-icon" aria-hidden="true">
|
|||
|
|
<use xlink:href="#hao-icon-shuffle1"></use>
|
|||
|
|
</svg>
|
|||
|
|
<div class="name">shuffle</div>
|
|||
|
|
<div class="code-name">#hao-icon-shuffle1</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<svg class="icon svg-icon" aria-hidden="true">
|
|||
|
|
<use xlink:href="#hao-icon-arrows-rotate"></use>
|
|||
|
|
</svg>
|
|||
|
|
<div class="name">arrows-rotate</div>
|
|||
|
|
<div class="code-name">#hao-icon-arrows-rotate</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<svg class="icon svg-icon" aria-hidden="true">
|
|||
|
|
<use xlink:href="#hao-icon-pause"></use>
|
|||
|
|
</svg>
|
|||
|
|
<div class="name">pause</div>
|
|||
|
|
<div class="code-name">#hao-icon-pause</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<svg class="icon svg-icon" aria-hidden="true">
|
|||
|
|
<use xlink:href="#hao-icon-heartbeat"></use>
|
|||
|
|
</svg>
|
|||
|
|
<div class="name">heartbeat</div>
|
|||
|
|
<div class="code-name">#hao-icon-heartbeat</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<svg class="icon svg-icon" aria-hidden="true">
|
|||
|
|
<use xlink:href="#hao-icon-heartbeat1"></use>
|
|||
|
|
</svg>
|
|||
|
|
<div class="name">heartbeat</div>
|
|||
|
|
<div class="code-name">#hao-icon-heartbeat1</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<svg class="icon svg-icon" aria-hidden="true">
|
|||
|
|
<use xlink:href="#hao-icon-rss"></use>
|
|||
|
|
</svg>
|
|||
|
|
<div class="name">rss</div>
|
|||
|
|
<div class="code-name">#hao-icon-rss</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<svg class="icon svg-icon" aria-hidden="true">
|
|||
|
|
<use xlink:href="#hao-icon-qq"></use>
|
|||
|
|
</svg>
|
|||
|
|
<div class="name">qq</div>
|
|||
|
|
<div class="code-name">#hao-icon-qq</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<svg class="icon svg-icon" aria-hidden="true">
|
|||
|
|
<use xlink:href="#hao-icon-github"></use>
|
|||
|
|
</svg>
|
|||
|
|
<div class="name">github</div>
|
|||
|
|
<div class="code-name">#hao-icon-github</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<svg class="icon svg-icon" aria-hidden="true">
|
|||
|
|
<use xlink:href="#hao-icon-bilibili"></use>
|
|||
|
|
</svg>
|
|||
|
|
<div class="name">bilibili</div>
|
|||
|
|
<div class="code-name">#hao-icon-bilibili</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<svg class="icon svg-icon" aria-hidden="true">
|
|||
|
|
<use xlink:href="#hao-icon-paper-plane1"></use>
|
|||
|
|
</svg>
|
|||
|
|
<div class="name">paper-plane</div>
|
|||
|
|
<div class="code-name">#hao-icon-paper-plane1</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<svg class="icon svg-icon" aria-hidden="true">
|
|||
|
|
<use xlink:href="#hao-icon-hashtag"></use>
|
|||
|
|
</svg>
|
|||
|
|
<div class="name">hashtag</div>
|
|||
|
|
<div class="code-name">#hao-icon-hashtag</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<svg class="icon svg-icon" aria-hidden="true">
|
|||
|
|
<use xlink:href="#hao-icon-hand-heart-fill"></use>
|
|||
|
|
</svg>
|
|||
|
|
<div class="name">hand-heart-fill</div>
|
|||
|
|
<div class="code-name">#hao-icon-hand-heart-fill</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<svg class="icon svg-icon" aria-hidden="true">
|
|||
|
|
<use xlink:href="#hao-icon-plant-fill"></use>
|
|||
|
|
</svg>
|
|||
|
|
<div class="name">plant-fill</div>
|
|||
|
|
<div class="code-name">#hao-icon-plant-fill</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<svg class="icon svg-icon" aria-hidden="true">
|
|||
|
|
<use xlink:href="#hao-icon-qrcode"></use>
|
|||
|
|
</svg>
|
|||
|
|
<div class="name">qrcode</div>
|
|||
|
|
<div class="code-name">#hao-icon-qrcode</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<svg class="icon svg-icon" aria-hidden="true">
|
|||
|
|
<use xlink:href="#hao-icon-weibo"></use>
|
|||
|
|
</svg>
|
|||
|
|
<div class="name">weibo</div>
|
|||
|
|
<div class="code-name">#hao-icon-weibo</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<svg class="icon svg-icon" aria-hidden="true">
|
|||
|
|
<use xlink:href="#hao-icon-copyright"></use>
|
|||
|
|
</svg>
|
|||
|
|
<div class="name">copyright</div>
|
|||
|
|
<div class="code-name">#hao-icon-copyright</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<svg class="icon svg-icon" aria-hidden="true">
|
|||
|
|
<use xlink:href="#hao-icon-bolt"></use>
|
|||
|
|
</svg>
|
|||
|
|
<div class="name">bolt</div>
|
|||
|
|
<div class="code-name">#hao-icon-bolt</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<svg class="icon svg-icon" aria-hidden="true">
|
|||
|
|
<use xlink:href="#hao-icon-circle-info"></use>
|
|||
|
|
</svg>
|
|||
|
|
<div class="name">circle-info</div>
|
|||
|
|
<div class="code-name">#hao-icon-circle-info</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<svg class="icon svg-icon" aria-hidden="true">
|
|||
|
|
<use xlink:href="#hao-icon-triangle-exclamation"></use>
|
|||
|
|
</svg>
|
|||
|
|
<div class="name">triangle-exclamation</div>
|
|||
|
|
<div class="code-name">#hao-icon-triangle-exclamation</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<svg class="icon svg-icon" aria-hidden="true">
|
|||
|
|
<use xlink:href="#hao-icon-circle-check"></use>
|
|||
|
|
</svg>
|
|||
|
|
<div class="name">circle-check</div>
|
|||
|
|
<div class="code-name">#hao-icon-circle-check</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<svg class="icon svg-icon" aria-hidden="true">
|
|||
|
|
<use xlink:href="#hao-icon-circle-minus"></use>
|
|||
|
|
</svg>
|
|||
|
|
<div class="name">circle-minus</div>
|
|||
|
|
<div class="code-name">#hao-icon-circle-minus</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<svg class="icon svg-icon" aria-hidden="true">
|
|||
|
|
<use xlink:href="#hao-icon-circle-plus"></use>
|
|||
|
|
</svg>
|
|||
|
|
<div class="name">circle-plus</div>
|
|||
|
|
<div class="code-name">#hao-icon-circle-plus</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<svg class="icon svg-icon" aria-hidden="true">
|
|||
|
|
<use xlink:href="#hao-icon-circle-dot"></use>
|
|||
|
|
</svg>
|
|||
|
|
<div class="name">circle-dot</div>
|
|||
|
|
<div class="code-name">#hao-icon-circle-dot</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<svg class="icon svg-icon" aria-hidden="true">
|
|||
|
|
<use xlink:href="#hao-icon-scissors"></use>
|
|||
|
|
</svg>
|
|||
|
|
<div class="name">scissors</div>
|
|||
|
|
<div class="code-name">#hao-icon-scissors</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<svg class="icon svg-icon" aria-hidden="true">
|
|||
|
|
<use xlink:href="#hao-icon-arrow-down"></use>
|
|||
|
|
</svg>
|
|||
|
|
<div class="name">arrow-down</div>
|
|||
|
|
<div class="code-name">#hao-icon-arrow-down</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<svg class="icon svg-icon" aria-hidden="true">
|
|||
|
|
<use xlink:href="#hao-icon-dengpao"></use>
|
|||
|
|
</svg>
|
|||
|
|
<div class="name">灯泡</div>
|
|||
|
|
<div class="code-name">#hao-icon-dengpao</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<svg class="icon svg-icon" aria-hidden="true">
|
|||
|
|
<use xlink:href="#hao-icon-danmu"></use>
|
|||
|
|
</svg>
|
|||
|
|
<div class="name">弹幕</div>
|
|||
|
|
<div class="code-name">#hao-icon-danmu</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<svg class="icon svg-icon" aria-hidden="true">
|
|||
|
|
<use xlink:href="#hao-icon-zonglan"></use>
|
|||
|
|
</svg>
|
|||
|
|
<div class="name">总览</div>
|
|||
|
|
<div class="code-name">#hao-icon-zonglan</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<svg class="icon svg-icon" aria-hidden="true">
|
|||
|
|
<use xlink:href="#hao-icon-linggan"></use>
|
|||
|
|
</svg>
|
|||
|
|
<div class="name">灵感</div>
|
|||
|
|
<div class="code-name">#hao-icon-linggan</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<svg class="icon svg-icon" aria-hidden="true">
|
|||
|
|
<use xlink:href="#hao-icon-sanmingzhi"></use>
|
|||
|
|
</svg>
|
|||
|
|
<div class="name">三明治</div>
|
|||
|
|
<div class="code-name">#hao-icon-sanmingzhi</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<svg class="icon svg-icon" aria-hidden="true">
|
|||
|
|
<use xlink:href="#hao-icon-keyboard"></use>
|
|||
|
|
</svg>
|
|||
|
|
<div class="name">keyboard</div>
|
|||
|
|
<div class="code-name">#hao-icon-keyboard</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="dib">
|
|||
|
|
<svg class="icon svg-icon" aria-hidden="true">
|
|||
|
|
<use xlink:href="#hao-icon-tiktok"></use>
|
|||
|
|
</svg>
|
|||
|
|
<div class="name">tiktok</div>
|
|||
|
|
<div class="code-name">#hao-icon-tiktok</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
</ul>
|
|||
|
|
<div class="article markdown">
|
|||
|
|
<h2 id="symbol-">Symbol 引用</h2>
|
|||
|
|
<hr>
|
|||
|
|
|
|||
|
|
<p>这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇<a href="">文章</a>
|
|||
|
|
这种用法其实是做了一个 SVG 的集合，与另外两种相比具有如下特点：</p>
|
|||
|
|
<ul>
|
|||
|
|
<li>支持多色图标了，不再受单色限制。</li>
|
|||
|
|
<li>通过一些技巧，支持像字体那样，通过 <code>font-size</code>, <code>color</code> 来调整样式。</li>
|
|||
|
|
<li>兼容性较差，支持 IE9+，及现代浏览器。</li>
|
|||
|
|
<li>浏览器渲染 SVG 的性能一般，还不如 png。</li>
|
|||
|
|
</ul>
|
|||
|
|
<p>使用步骤如下：</p>
|
|||
|
|
<h3 id="-symbol-">第一步：引入项目下面生成的 symbol 代码：</h3>
|
|||
|
|
<pre><code class="language-html"><script src="./iconfont.js"></script>
|
|||
|
|
</code></pre>
|
|||
|
|
<h3 id="-css-">第二步：加入通用 CSS 代码（引入一次就行）：</h3>
|
|||
|
|
<pre><code class="language-html"><style>
|
|||
|
|
.icon {
|
|||
|
|
width: 1em;
|
|||
|
|
height: 1em;
|
|||
|
|
vertical-align: -0.15em;
|
|||
|
|
fill: currentColor;
|
|||
|
|
overflow: hidden;
|
|||
|
|
}
|
|||
|
|
</style>
|
|||
|
|
</code></pre>
|
|||
|
|
<h3 id="-">第三步：挑选相应图标并获取类名，应用于页面：</h3>
|
|||
|
|
<pre><code class="language-html"><svg class="icon" aria-hidden="true">
|
|||
|
|
<use xlink:href="#icon-xxx"></use>
|
|||
|
|
</svg>
|
|||
|
|
</code></pre>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<script>
|
|||
|
|
$(document).ready(function () {
|
|||
|
|
$('.tab-container .content:first').show()
|
|||
|
|
|
|||
|
|
$('#tabs li').click(function (e) {
|
|||
|
|
var tabContent = $('.tab-container .content')
|
|||
|
|
var index = $(this).index()
|
|||
|
|
|
|||
|
|
if ($(this).hasClass('active')) {
|
|||
|
|
return
|
|||
|
|
} else {
|
|||
|
|
$('#tabs li').removeClass('active')
|
|||
|
|
$(this).addClass('active')
|
|||
|
|
|
|||
|
|
tabContent.hide().eq(index).fadeIn()
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
})
|
|||
|
|
</script>
|
|||
|
|
</body>
|
|||
|
|
</html>
|