<!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>