@cataract6545/tmui
Version:
tm-vuetify是一个新势力由主题驱动的UI组件库,相比其它优势大,组件全,设计趋势紧跟未来。具有主题生成，主题实时切换，暗黑实时切换,lottie动画,图表等新颖功能,tmui TMUI
1,331 lines (1,113 loc) • 394 kB
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>iconfont Demo</title>
<link rel="shortcut icon" href="//img.alicdn.com/imgextra/i4/O1CN01Z5paLz1O0zuCC7osS_!!6000000001644-55-tps-83-82.svg" type="image/x-icon"/>
<link rel="icon" type="image/svg+xml" href="//img.alicdn.com/imgextra/i4/O1CN01Z5paLz1O0zuCC7osS_!!6000000001644-55-tps-83-82.svg"/>
<link rel="stylesheet" href="https://g.alicdn.com/thx/cube/1.3.2/cube.min.css">
<link rel="stylesheet" href="demo.css">
<link rel="stylesheet" href="iconfont.css">
<script src="iconfont.js"></script>
<!-- jQuery -->
<script src="https://a1.alicdn.com/oss/uploads/2018/12/26/7bfddb60-08e8-11e9-9b04-53e73bb6408b.js"></script>
<!-- 代码高亮 -->
<script src="https://a1.alicdn.com/oss/uploads/2018/12/26/a3f714d0-08e6-11e9-8a15-ebf944d7534c.js"></script>
<style>
.main .logo {
margin-top: 0;
height: auto;
}
.main .logo a {
display: flex;
align-items: center;
}
.main .logo .sub-title {
margin-left: 0.5em;
font-size: 22px;
color: #fff;
background: linear-gradient(-45deg, #3967FF, #B500FE);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
</style>
</head>
<body>
<div class="main">
<h1 class="logo"><a href="https://www.iconfont.cn/" title="iconfont 首页" target="_blank">
<img width="200" src="https://img.alicdn.com/imgextra/i3/O1CN01Mn65HV1FfSEzR6DKv_!!6000000000514-55-tps-228-59.svg">
</a></h1>
<div class="nav-tabs">
<ul id="tabs" class="dib-box">
<li class="dib active"><span>Unicode</span></li>
<li class="dib"><span>Font class</span></li>
<li class="dib"><span>Symbol</span></li>
</ul>
<a href="https://www.iconfont.cn/manage/index?manage_type=myprojects&projectId=2660213" 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 tmicon"></span>
<div class="name">paypal</div>
<div class="code-name">&#xe8c8;</div>
</li>
<li class="dib">
<span class="icon tmicon"></span>
<div class="name">google</div>
<div class="code-name">&#xe8c9;</div>
</li>
<li class="dib">
<span class="icon tmicon"></span>
<div class="name">apple-pay</div>
<div class="code-name">&#xf166;</div>
</li>
<li class="dib">
<span class="icon tmicon"></span>
<div class="name">Apple</div>
<div class="code-name">&#xedd8;</div>
</li>
<li class="dib">
<span class="icon tmicon"></span>
<div class="name">google-pay</div>
<div class="code-name">&#xec04;</div>
</li>
<li class="dib">
<span class="icon tmicon"></span>
<div class="name">钱袋</div>
<div class="code-name">&#xe600;</div>
</li>
<li class="dib">
<span class="icon tmicon"></span>
<div class="name">券</div>
<div class="code-name">&#xe601;</div>
</li>
<li class="dib">
<span class="icon tmicon"></span>
<div class="name">红包</div>
<div class="code-name">&#xe6da;</div>
</li>
<li class="dib">
<span class="icon tmicon"></span>
<div class="name">通知-fill</div>
<div class="code-name">&#xe758;</div>
</li>
<li class="dib">
<span class="icon tmicon"></span>
<div class="name">人民币3</div>
<div class="code-name">&#xe73e;</div>
</li>
<li class="dib">
<span class="icon tmicon"></span>
<div class="name">投票</div>
<div class="code-name">&#xe60e;</div>
</li>
<li class="dib">
<span class="icon tmicon"></span>
<div class="name">票券-色块icon</div>
<div class="code-name">&#xe658;</div>
</li>
<li class="dib">
<span class="icon tmicon"></span>
<div class="name">足球</div>
<div class="code-name">&#xe65d;</div>
</li>
<li class="dib">
<span class="icon tmicon"></span>
<div class="name">美元</div>
<div class="code-name">&#xeb1a;</div>
</li>
<li class="dib">
<span class="icon tmicon"></span>
<div class="name">汽车</div>
<div class="code-name">&#xe611;</div>
</li>
<li class="dib">
<span class="icon tmicon"></span>
<div class="name">通知</div>
<div class="code-name">&#xe612;</div>
</li>
<li class="dib">
<span class="icon tmicon"></span>
<div class="name">会员</div>
<div class="code-name">&#xe62f;</div>
</li>
<li class="dib">
<span class="icon tmicon"></span>
<div class="name">md-phone-portrait</div>
<div class="code-name">&#xe6c2;</div>
</li>
<li class="dib">
<span class="icon tmicon"></span>
<div class="name">md-planet</div>
<div class="code-name">&#xe6c3;</div>
</li>
<li class="dib">
<span class="icon tmicon"></span>
<div class="name">md-phone-landscape</div>
<div class="code-name">&#xe6c4;</div>
</li>
<li class="dib">
<span class="icon tmicon"></span>
<div class="name">md-power</div>
<div class="code-name">&#xe6c5;</div>
</li>
<li class="dib">
<span class="icon tmicon"></span>
<div class="name">md-redo</div>
<div class="code-name">&#xe6c6;</div>
</li>
<li class="dib">
<span class="icon tmicon"></span>
<div class="name">md-rocket</div>
<div class="code-name">&#xe6c7;</div>
</li>
<li class="dib">
<span class="icon tmicon"></span>
<div class="name">md-ribbon</div>
<div class="code-name">&#xe6c8;</div>
</li>
<li class="dib">
<span class="icon tmicon"></span>
<div class="name">md-undo</div>
<div class="code-name">&#xe6cb;</div>
</li>
<li class="dib">
<span class="icon tmicon"></span>
<div class="name">md-trending-down</div>
<div class="code-name">&#xe6cc;</div>
</li>
<li class="dib">
<span class="icon tmicon"></span>
<div class="name">md-trending-up</div>
<div class="code-name">&#xe6cd;</div>
</li>
<li class="dib">
<span class="icon tmicon"></span>
<div class="name">md-git-merge</div>
<div class="code-name">&#xe6de;</div>
</li>
<li class="dib">
<span class="icon tmicon"></span>
<div class="name">md-female</div>
<div class="code-name">&#xe6e2;</div>
</li>
<li class="dib">
<span class="icon tmicon"></span>
<div class="name">md-male</div>
<div class="code-name">&#xe6e3;</div>
</li>
<li class="dib">
<span class="icon tmicon"></span>
<div class="name">md-heart-dislike</div>
<div class="code-name">&#xe6e4;</div>
</li>
<li class="dib">
<span class="icon tmicon"></span>
<div class="name">md-heart</div>
<div class="code-name">&#xe6e7;</div>
</li>
<li class="dib">
<span class="icon tmicon"></span>
<div class="name">ios-text</div>
<div class="code-name">&#xe6f1;</div>
</li>
<li class="dib">
<span class="icon tmicon"></span>
<div class="name">ios-rose</div>
<div class="code-name">&#xe6f2;</div>
</li>
<li class="dib">
<span class="icon tmicon"></span>
<div class="name">logo-game-controller-b</div>
<div class="code-name">&#xe6fd;</div>
</li>
<li class="dib">
<span class="icon tmicon"></span>
<div class="name">ios-beer</div>
<div class="code-name">&#xe707;</div>
</li>
<li class="dib">
<span class="icon tmicon"></span>
<div class="name">ios-cafe</div>
<div class="code-name">&#xe709;</div>
</li>
<li class="dib">
<span class="icon tmicon"></span>
<div class="name">ios-chatbubbles</div>
<div class="code-name">&#xe70a;</div>
</li>
<li class="dib">
<span class="icon tmicon"></span>
<div class="name">ios-color-palette</div>
<div class="code-name">&#xe70e;</div>
</li>
<li class="dib">
<span class="icon tmicon"></span>
<div class="name">ios-filing</div>
<div class="code-name">&#xe712;</div>
</li>
<li class="dib">
<span class="icon tmicon"></span>
<div class="name">ios-finger-print</div>
<div class="code-name">&#xe713;</div>
</li>
<li class="dib">
<span class="icon tmicon"></span>
<div class="name">ios-hand</div>
<div class="code-name">&#xe716;</div>
</li>
<li class="dib">
<span class="icon tmicon"></span>
<div class="name">ios-flower</div>
<div class="code-name">&#xe714;</div>
</li>
<li class="dib">
<span class="icon tmicon"></span>
<div class="name">ios-ice-cream</div>
<div class="code-name">&#xe719;</div>
</li>
<li class="dib">
<span class="icon tmicon"></span>
<div class="name">ios-grid</div>
<div class="code-name">&#xe71c;</div>
</li>
<li class="dib">
<span class="icon tmicon"></span>
<div class="name">ios-mail-open</div>
<div class="code-name">&#xe71d;</div>
</li>
<li class="dib">
<span class="icon tmicon"></span>
<div class="name">ios-key</div>
<div class="code-name">&#xe71e;</div>
</li>
<li class="dib">
<span class="icon tmicon"></span>
<div class="name">ios-man</div>
<div class="code-name">&#xe71f;</div>
</li>
<li class="dib">
<span class="icon tmicon"></span>
<div class="name">美元</div>
<div class="code-name">&#xe90d;</div>
</li>
<li class="dib">
<span class="icon tmicon"></span>
<div class="name">自定义</div>
<div class="code-name">&#xe60d;</div>
</li>
<li class="dib">
<span class="icon tmicon"></span>
<div class="name">刷新</div>
<div class="code-name">&#xe6ce;</div>
</li>
<li class="dib">
<span class="icon tmicon"></span>
<div class="name">会员</div>
<div class="code-name">&#xe646;</div>
</li>
<li class="dib">
<span class="icon tmicon"></span>
<div class="name">圆</div>
<div class="code-name">&#xe657;</div>
</li>
<li class="dib">
<span class="icon tmicon"></span>
<div class="name">ios-airplane</div>
<div class="code-name">&#xe852;</div>
</li>
<li class="dib">
<span class="icon tmicon"></span>
<div class="name">ios-woman</div>
<div class="code-name">&#xe859;</div>
</li>
<li class="dib">
<span class="icon tmicon"></span>
<div class="name">ios-aperture</div>
<div class="code-name">&#xe866;</div>
</li>
<li class="dib">
<span class="icon tmicon"></span>
<div class="name">ios-alarm</div>
<div class="code-name">&#xe868;</div>
</li>
<li class="dib">
<span class="icon tmicon"></span>
<div class="name">ios-arrow-dropdown</div>
<div class="code-name">&#xe869;</div>
</li>
<li class="dib">
<span class="icon tmicon"></span>
<div class="name">ios-arrow-dropleft-c</div>
<div class="code-name">&#xe876;</div>
</li>
<li class="dib">
<span class="icon tmicon"></span>
<div class="name">ios-arrow-dropleft</div>
<div class="code-name">&#xe87c;</div>
</li>
<li class="dib">
<span class="icon tmicon"></span>
<div class="name">ios-arrow-dropup</div>
<div class="code-name">&#xe87f;</div>
</li>
<li class="dib">
<span class="icon tmicon"></span>
<div class="name">ios-arrow-dropright-</div>
<div class="code-name">&#xe880;</div>
</li>
<li class="dib">
<span class="icon tmicon"></span>
<div class="name">ios-arrow-dropdown-c</div>
<div class="code-name">&#xe886;</div>
</li>
<li class="dib">
<span class="icon tmicon"></span>
<div class="name">ios-arrow-dropup-cir</div>
<div class="code-name">&#xe88d;</div>
</li>
<li class="dib">
<span class="icon tmicon"></span>
<div class="name">ios-arrow-dropright</div>
<div class="code-name">&#xe890;</div>
</li>
<li class="dib">
<span class="icon tmicon"></span>
<div class="name">ios-attach</div>
<div class="code-name">&#xe893;</div>
</li>
<li class="dib">
<span class="icon tmicon"></span>
<div class="name">ios-at</div>
<div class="code-name">&#xe894;</div>
</li>
<li class="dib">
<span class="icon tmicon"></span>
<div class="name">ios-bed</div>
<div class="code-name">&#xe895;</div>
</li>
<li class="dib">
<span class="icon tmicon"></span>
<div class="name">ios-battery-full</div>
<div class="code-name">&#xe896;</div>
</li>
<li class="dib">
<span class="icon tmicon"></span>
<div class="name">ios-bookmarks</div>
<div class="code-name">&#xe897;</div>
</li>
<li class="dib">
<span class="icon tmicon"></span>
<div class="name">ios-bluetooth</div>
<div class="code-name">&#xe898;</div>
</li>
<li class="dib">
<span class="icon tmicon"></span>
<div class="name">ios-cellular</div>
<div class="code-name">&#xe899;</div>
</li>
<li class="dib">
<span class="icon tmicon"></span>
<div class="name">ios-cut</div>
<div class="code-name">&#xe89a;</div>
</li>
<li class="dib">
<span class="icon tmicon"></span>
<div class="name">ios-leaf</div>
<div class="code-name">&#xe89b;</div>
</li>
<li class="dib">
<span class="icon tmicon"></span>
<div class="name">ios-mic</div>
<div class="code-name">&#xe89c;</div>
</li>
<li class="dib">
<span class="icon tmicon"></span>
<div class="name">ios-mail-open</div>
<div class="code-name">&#xe89d;</div>
</li>
<li class="dib">
<span class="icon tmicon"></span>
<div class="name">ios-partly-sunny</div>
<div class="code-name">&#xe8a0;</div>
</li>
<li class="dib">
<span class="icon tmicon"></span>
<div class="name">ios-radio-button-on</div>
<div class="code-name">&#xe8a1;</div>
</li>
<li class="dib">
<span class="icon tmicon"></span>
<div class="name">ios-radio-button-off</div>
<div class="code-name">&#xe8a2;</div>
</li>
<li class="dib">
<span class="icon tmicon"></span>
<div class="name">ios-remove</div>
<div class="code-name">&#xe8a3;</div>
</li>
<li class="dib">
<span class="icon tmicon"></span>
<div class="name">ios-remove-circle-ou</div>
<div class="code-name">&#xe8a4;</div>
</li>
<li class="dib">
<span class="icon tmicon"></span>
<div class="name">ios-remove-circle</div>
<div class="code-name">&#xe8a5;</div>
</li>
<li class="dib">
<span class="icon tmicon"></span>
<div class="name">ios-rocket</div>
<div class="code-name">&#xe8a6;</div>
</li>
<li class="dib">
<span class="icon tmicon"></span>
<div class="name">ios-ribbon</div>
<div class="code-name">&#xe8a7;</div>
</li>
<li class="dib">
<span class="icon tmicon"></span>
<div class="name">ios-star</div>
<div class="code-name">&#xe8a8;</div>
</li>
<li class="dib">
<span class="icon tmicon"></span>
<div class="name">ios-star-half</div>
<div class="code-name">&#xe8a9;</div>
</li>
<li class="dib">
<span class="icon tmicon"></span>
<div class="name">ios-star-outline</div>
<div class="code-name">&#xe8aa;</div>
</li>
<li class="dib">
<span class="icon tmicon"></span>
<div class="name">ios-snow</div>
<div class="code-name">&#xe8ab;</div>
</li>
<li class="dib">
<span class="icon tmicon"></span>
<div class="name">ios-stopwatch</div>
<div class="code-name">&#xe8ac;</div>
</li>
<li class="dib">
<span class="icon tmicon"></span>
<div class="name">ios-sunny</div>
<div class="code-name">&#xe8ad;</div>
</li>
<li class="dib">
<span class="icon tmicon"></span>
<div class="name">ios-unlock</div>
<div class="code-name">&#xe8ae;</div>
</li>
<li class="dib">
<span class="icon tmicon"></span>
<div class="name">ios-trophy</div>
<div class="code-name">&#xe8af;</div>
</li>
<li class="dib">
<span class="icon tmicon"></span>
<div class="name">ios-umbrella</div>
<div class="code-name">&#xe8b0;</div>
</li>
<li class="dib">
<span class="icon tmicon"></span>
<div class="name">ios-videocam</div>
<div class="code-name">&#xe8b1;</div>
</li>
<li class="dib">
<span class="icon tmicon"></span>
<div class="name">ios-volume-high</div>
<div class="code-name">&#xe8b2;</div>
</li>
<li class="dib">
<span class="icon tmicon"></span>
<div class="name">ios-water</div>
<div class="code-name">&#xe8b3;</div>
</li>
<li class="dib">
<span class="icon tmicon"></span>
<div class="name">ios-wifi</div>
<div class="code-name">&#xe8b4;</div>
</li>
<li class="dib">
<span class="icon tmicon"></span>
<div class="name">md-water</div>
<div class="code-name">&#xe8b5;</div>
</li>
<li class="dib">
<span class="icon tmicon"></span>
<div class="name">md-checkbox</div>
<div class="code-name">&#xe8b6;</div>
</li>
<li class="dib">
<span class="icon tmicon"></span>
<div class="name">md-chatbubbles</div>
<div class="code-name">&#xe8b7;</div>
</li>
<li class="dib">
<span class="icon tmicon"></span>
<div class="name">md-chatboxes</div>
<div class="code-name">&#xe8b8;</div>
</li>
<li class="dib">
<span class="icon tmicon"></span>
<div class="name">md-cloud-done</div>
<div class="code-name">&#xe8b9;</div>
</li>
<li class="dib">
<span class="icon tmicon"></span>
<div class="name">md-cloud-upload</div>
<div class="code-name">&#xe8ba;</div>
</li>
<li class="dib">
<span class="icon tmicon"></span>
<div class="name">md-cloudy</div>
<div class="code-name">&#xe8bb;</div>
</li>
<li class="dib">
<span class="icon tmicon"></span>
<div class="name">md-contrast</div>
<div class="code-name">&#xe8bc;</div>
</li>
<li class="dib">
<span class="icon tmicon"></span>
<div class="name">md-disc</div>
<div class="code-name">&#xe8bd;</div>
</li>
<li class="dib">
<span class="icon tmicon"></span>
<div class="name">md-heart-empty</div>
<div class="code-name">&#xe8be;</div>
</li>
<li class="dib">
<span class="icon tmicon"></span>
<div class="name">md-heart</div>
<div class="code-name">&#xe8bf;</div>
</li>
<li class="dib">
<span class="icon tmicon"></span>
<div class="name">md-home</div>
<div class="code-name">&#xe8c0;</div>
</li>
<li class="dib">
<span class="icon tmicon"></span>
<div class="name">md-mail-open</div>
<div class="code-name">&#xe8c1;</div>
</li>
<li class="dib">
<span class="icon tmicon"></span>
<div class="name">md-heart-half</div>
<div class="code-name">&#xe8c2;</div>
</li>
<li class="dib">
<span class="icon tmicon"></span>
<div class="name">md-person</div>
<div class="code-name">&#xe8c3;</div>
</li>
<li class="dib">
<span class="icon tmicon"></span>
<div class="name">md-people</div>
<div class="code-name">&#xe8c4;</div>
</li>
<li class="dib">
<span class="icon tmicon"></span>
<div class="name">md-more</div>
<div class="code-name">&#xe8c5;</div>
</li>
<li class="dib">
<span class="icon tmicon"></span>
<div class="name">md-moon</div>
<div class="code-name">&#xe8c6;</div>
</li>
<li class="dib">
<span class="icon tmicon"></span>
<div class="name">md-pin</div>
<div class="code-name">&#xe8c7;</div>
</li>
<li class="dib">
<span class="icon tmicon"></span>
<div class="name">更多</div>
<div class="code-name">&#xe73a;</div>
</li>
<li class="dib">
<span class="icon tmicon"></span>
<div class="name">IOS</div>
<div class="code-name">&#xe60c;</div>
</li>
<li class="dib">
<span class="icon tmicon"></span>
<div class="name">wifi-off</div>
<div class="code-name">&#xe93a;</div>
</li>
<li class="dib">
<span class="icon tmicon"></span>
<div class="name">列表空空</div>
<div class="code-name">&#xe6ad;</div>
</li>
<li class="dib">
<span class="icon tmicon"></span>
<div class="name">微信支付</div>
<div class="code-name">&#xe605;</div>
</li>
<li class="dib">
<span class="icon tmicon"></span>
<div class="name">银行卡</div>
<div class="code-name">&#xe6c9;</div>
</li>
<li class="dib">
<span class="icon tmicon"></span>
<div class="name">云闪付</div>
<div class="code-name">&#xe68b;</div>
</li>
<li class="dib">
<span class="icon tmicon"></span>
<div class="name">头条样式</div>
<div class="code-name">&#xe622;</div>
</li>
<li class="dib">
<span class="icon tmicon"></span>
<div class="name">抖音</div>
<div class="code-name">&#xe8db;</div>
</li>
<li class="dib">
<span class="icon tmicon"></span>
<div class="name">支付,支付宝</div>
<div class="code-name">&#xe8de;</div>
</li>
<li class="dib">
<span class="icon tmicon"></span>
<div class="name">华为</div>
<div class="code-name">&#xe610;</div>
</li>
<li class="dib">
<span class="icon tmicon"></span>
<div class="name">链接</div>
<div class="code-name">&#xe665;</div>
</li>
<li class="dib">
<span class="icon tmicon"></span>
<div class="name">微信</div>
<div class="code-name">&#xe63f;</div>
</li>
<li class="dib">
<span class="icon tmicon"></span>
<div class="name">朋友圈</div>
<div class="code-name">&#xe615;</div>
</li>
<li class="dib">
<span class="icon tmicon"></span>
<div class="name">微博</div>
<div class="code-name">&#xe608;</div>
</li>
<li class="dib">
<span class="icon tmicon"></span>
<div class="name">QQ</div>
<div class="code-name">&#xe60f;</div>
</li>
<li class="dib">
<span class="icon tmicon"></span>
<div class="name">小程序</div>
<div class="code-name">&#xe706;</div>
</li>
<li class="dib">
<span class="icon tmicon"></span>
<div class="name">display-code</div>
<div class="code-name">&#xe792;</div>
</li>
<li class="dib">
<span class="icon tmicon"></span>
<div class="name">display-arrow-right</div>
<div class="code-name">&#xe793;</div>
</li>
<li class="dib">
<span class="icon tmicon"></span>
<div class="name">display-arrow-left</div>
<div class="code-name">&#xe794;</div>
</li>
<li class="dib">
<span class="icon tmicon"></span>
<div class="name">laptop-error</div>
<div class="code-name">&#xe795;</div>
</li>
<li class="dib">
<span class="icon tmicon"></span>
<div class="name">laptop-check</div>
<div class="code-name">&#xe796;</div>
</li>
<li class="dib">
<span class="icon tmicon"></span>
<div class="name">laptop</div>
<div class="code-name">&#xe797;</div>
</li>
<li class="dib">
<span class="icon tmicon"></span>
<div class="name">mobile-error</div>
<div class="code-name">&#xe798;</div>
</li>
<li class="dib">
<span class="icon tmicon"></span>
<div class="name">mobile-check</div>
<div class="code-name">&#xe799;</div>
</li>
<li class="dib">
<span class="icon tmicon"></span>
<div class="name">mobile-alt</div>
<div class="code-name">&#xe79a;</div>
</li>
<li class="dib">
<span class="icon tmicon"></span>
<div class="name">aliwangwang</div>
<div class="code-name">&#xe79d;</div>
</li>
<li class="dib">
<span class="icon tmicon"></span>
<div class="name">nail</div>
<div class="code-name">&#xe79e;</div>
</li>
<li class="dib">
<span class="icon tmicon"></span>
<div class="name">nail-fixed</div>
<div class="code-name">&#xe79f;</div>
</li>
<li class="dib">
<span class="icon tmicon"></span>
<div class="name">edit</div>
<div class="code-name">&#xe7a0;</div>
</li>
<li class="dib">
<span class="icon tmicon"></span>
<div class="name">dollar</div>
<div class="code-name">&#xe7a1;</div>
</li>
<li class="dib">
<span class="icon tmicon"></span>
<div class="name">transanction</div>
<div class="code-name">&#xe7a2;</div>
</li>
<li class="dib">
<span class="icon tmicon"></span>
<div class="name">filter-fill</div>
<div class="code-name">&#xe7a3;</div>
</li>
<li class="dib">
<span class="icon tmicon"></span>
<div class="name">all-fill</div>
<div class="code-name">&#xe7a4;</div>
</li>
<li class="dib">
<span class="icon tmicon"></span>
<div class="name">database plus-fill</div>
<div class="code-name">&#xe7a5;</div>
</li>
<li class="dib">
<span class="icon tmicon"></span>
<div class="name">database-fill</div>
<div class="code-name">&#xe7a6;</div>
</li>
<li class="dib">
<span class="icon tmicon"></span>
<div class="name">comment lines-fill</div>
<div class="code-name">&#xe7a7;</div>
</li>
<li class="dib">
<span class="icon tmicon"></span>
<div class="name">comment dots-fill</div>
<div class="code-name">&#xe7a8;</div>
</li>
<li class="dib">
<span class="icon tmicon"></span>
<div class="name">paper plane-fill</div>
<div class="code-name">&#xe7a9;</div>
</li>
<li class="dib">
<span class="icon tmicon"></span>
<div class="name">eye slash-fill</div>
<div class="code-name">&#xe7aa;</div>
</li>
<li class="dib">
<span class="icon tmicon"></span>
<div class="name">eye-fill</div>
<div class="code-name">&#xe7ab;</div>
</li>
<li class="dib">
<span class="icon tmicon"></span>
<div class="name">lightbulb-fill</div>
<div class="code-name">&#xe7ac;</div>
</li>
<li class="dib">
<span class="icon tmicon"></span>
<div class="name">flag-fill</div>
<div class="code-name">&#xe7ad;</div>
</li>
<li class="dib">
<span class="icon tmicon"></span>
<div class="name">tag-fill</div>
<div class="code-name">&#xe7ae;</div>
</li>
<li class="dib">
<span class="icon tmicon"></span>
<div class="name">position-fill</div>
<div class="code-name">&#xe7af;</div>
</li>
<li class="dib">
<span class="icon tmicon"></span>
<div class="name">location-fill</div>
<div class="code-name">&#xe7b0;</div>
</li>
<li class="dib">
<span class="icon tmicon"></span>
<div class="name">map-fill</div>
<div class="code-name">&#xe7b1;</div>
</li>
<li class="dib">
<span class="icon tmicon"></span>
<div class="name">inbox in-fill</div>
<div class="code-name">&#xe7b2;</div>
</li>
<li class="dib">
<span class="icon tmicon"></span>
<div class="name">box-fill</div>
<div class="code-name">&#xe7b3;</div>
</li>
<li class="dib">
<span class="icon tmicon"></span>
<div class="name">database set-fill</div>
<div class="code-name">&#xe7b4;</div>
</li>
<li class="dib">
<span class="icon tmicon"></span>
<div class="name">layer group-fill</div>
<div class="code-name">&#xe7b5;</div>
</li>
<li class="dib">
<span class="icon tmicon"></span>
<div class="name">cry-fill</div>
<div class="code-name">&#xe7b6;</div>
</li>
<li class="dib">
<span class="icon tmicon"></span>
<div class="name">smile-fill</div>
<div class="code-name">&#xe7b7;</div>
</li>
<li class="dib">
<span class="icon tmicon"></span>
<div class="name">unlock-fill</div>
<div class="code-name">&#xe7b8;</div>
</li>
<li class="dib">
<span class="icon tmicon"></span>
<div class="name">lock-fill</div>
<div class="code-name">&#xe7b9;</div>
</li>
<li class="dib">
<span class="icon tmicon"></span>
<div class="name">align right-fill</div>
<div class="code-name">&#xe7ba;</div>
</li>
<li class="dib">
<span class="icon tmicon"></span>
<div class="name">align left-fill</div>
<div class="code-name">&#xe7bb;</div>
</li>
<li class="dib">
<span class="icon tmicon"></span>
<div class="name">border bottom-fill</div>
<div class="code-name">&#xe7bc;</div>
</li>
<li class="dib">
<span class="icon tmicon"></span>
<div class="name">border top-fill</div>
<div class="code-name">&#xe7bd;</div>
</li>
<li class="dib">
<span class="icon tmicon"></span>
<div class="name">align center-fill</div>
<div class="code-name">&#xe7be;</div>
</li>
<li class="dib">
<span class="icon tmicon"></span>
<div class="name">sort-down-copy</div>
<div class="code-name">&#xf167;</div>
</li>
<li class="dib">
<span class="icon tmicon"></span>
<div class="name">border verticle-fill</div>
<div class="code-name">&#xe7bf;</div>
</li>
<li class="dib">
<span class="icon tmicon"></span>
<div class="name">pic center-fill</div>
<div class="code-name">&#xe7c0;</div>
</li>
<li class="dib">
<span class="icon tmicon"></span>
<div class="name">pic side-fill</div>
<div class="code-name">&#xe7c1;</div>
</li>
<li class="dib">
<span class="icon tmicon"></span>
<div class="name">folder open-fill</div>
<div class="code-name">&#xe7c2;</div>
</li>
<li class="dib">
<span class="icon tmicon"></span>
<div class="name">folder plus-fill</div>
<div class="code-name">&#xe7c3;</div>
</li>
<li class="dib">
<span class="icon tmicon"></span>
<div class="name">folder-fill</div>
<div class="code-name">&#xe7c4;</div>
</li>
<li class="dib">
<span class="icon tmicon"></span>
<div class="name">file-SQL</div>
<div class="code-name">&#xe7c5;</div>
</li>
<li class="dib">
<span class="icon tmicon"></span>
<div class="name">file plus-fill</div>
<div class="code-name">&#xe7c6;</div>
</li>
<li class="dib">
<span class="icon tmicon"></span>
<div class="name">file-fill</div>
<div class="code-name">&#xe7c7;</div>
</li>
<li class="dib">
<span class="icon tmicon"></span>
<div class="name">copy-fill</div>
<div class="code-name">&#xe7c8;</div>
</li>
<li class="dib">
<span class="icon tmicon"></span>
<div class="name">headset-fill</div>
<div class="code-name">&#xe7c9;</div>
</li>
<li class="dib">
<span class="icon tmicon"></span>
<div class="name">phone-fill</div>
<div class="code-name">&#xe7ca;</div>
</li>
<li class="dib">
<span class="icon tmicon"></span>
<div class="name">pause circle-fill</div>
<div class="code-name">&#xe7cb;</div>
</li>
<li class="dib">
<span class="icon tmicon"></span>
<div class="name">stop circle-fill</div>
<div class="code-name">&#xe7cc;</div>
</li>
<li class="dib">
<span class="icon tmicon"></span>
<div class="name">play circle-fill</div>
<div class="code-name">&#xe7cd;</div>
</li>
<li class="dib">
<span class="icon tmicon"></span>
<div class="name">delete-fill</div>
<div class="code-name">&#xe7ce;</div>
</li>
<li class="dib">
<span class="icon tmicon"></span>
<div class="name">picture-fill</div>
<div class="code-name">&#xe7cf;</div>
</li>
<li class="dib">
<span class="icon tmicon"></span>
<div class="name">mail-fill</div>
<div class="code-name">&#xe7d0;</div>
</li>
<li class="dib">
<span class="icon tmicon"></span>
<div class="name">heart-fill</div>
<div class="code-name">&#xe7d1;</div>
</li>
<li class="dib">
<span class="icon tmicon"></span>
<div class="name">collection-fill</div>
<div class="code-name">&#xe7d2;</div>
</li>
<li class="dib">
<span class="icon tmicon"></span>
<div class="name">user-group-fill</div>
<div class="code-name">&#xe7d3;</div>
</li>
<li class="dib">
<span class="icon tmicon"></span>
<div class="name">user plus-fill</div>
<div class="code-name">&#xe7d4;</div>
</li>
<li class="dib">
<span class="icon tmicon"></span>
<div class="name">user-fill</div>
<div class="code-name">&#xe7d5;</div>
</li>
<li class="dib">
<span class="icon tmicon"></span>
<div class="name">cog-fill</div>
<div class="code-name">&#xe7d6;</div>
</li>
<li class="dib">
<span class="icon tmicon"></span>
<div class="name">clock-fill</div>
<div class="code-name">&#xe7d7;</div>
</li>
<li class="dib">
<span class="icon tmicon"></span>
<div class="name">calendar alt-fill</div>
<div class="code-name">&#xe7d8;</div>
</li>
<li class="dib">
<span class="icon tmicon"></span>
<div class="name">cloud download-fill</div>
<div class="code-name">&#xe7d9;</div>
</li>
<li class="dib">
<span class="icon tmicon"></span>
<div class="name">cloud upload-fill</div>
<div class="code-name">&#xe7da;</div>
</li>
<li class="dib">
<span class="icon tmicon"></span>
<div class="name">exchange-fill</div>
<div class="code-name">&#xe7db;</div>
</li>
<li class="dib">
<span class="icon tmicon"></span>
<div class="name">info-circle-fill</div>
<div class="code-name">&#xe7dc;</div>
</li>
<li class="dib">
<span class="icon tmicon"></span>
<div class="name">question-circle-fill</div>
<div class="code-name">&#xe7dd;</div>
</li>
<li class="dib">
<span class="icon tmicon"></span>
<div class="name">exclamation circle-f</div>
<div class="code-name">&#xe7de;</div>
</li>
<li class="dib">
<span class="icon tmicon"></span>
<div class="name">minus-circle-fill</div>
<div class="code-name">&#xe7df;</div>
</li>
<li class="dib">
<span class="icon tmicon"></span>
<div class="name">plus-circle-fill</div>
<div class="code-name">&#xe7e0;</div>
</li>
<li class="dib">
<span class="icon tmicon"></span>
<div class="name">times-circle-fill</div>
<div class="code-name">&#xe7e1;</div>
</li>
<li class="dib">
<span class="icon tmicon"></span>
<di