ejyy/web/cwfont/cwfont-preview.html
2021-11-08 14:45:41 +08:00

795 lines
26 KiB
HTML

<!DOCTYPE html>
<html>
<head>
<title>chowa iconfont glyphs preview</title>
<meta charset="utf-8" />
<style type="text/css">
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html,
body {
height: 100%;
background-color: #fff;
}
a {
text-decoration: none;
}
.container {
width: 980px;
margin: auto;
}
header {
padding: 22px 0;
}
header a img {
outline: none;
display: inline-block;
margin-right: 12px;
}
header a h1 {
display: inline-block;
color: #787878;
font-size: 28px;
line-height: 80px;
vertical-align: top;
font-weight: 400;
}
.logo {
width: 80px;
height: 80px;
}
.glyphs {
overflow: hidden;
width: 100%;
height: auto;
list-style: none;
}
.glyphs li {
width: 120px;
height: 148px;
float: left;
border: 1px solid #f5f5f5;
margin: 10px;
border-radius: 4px;
cursor: pointer;
}
.glyphs li:last-child,
.glyphs li:nth-child(10n) {
border-right: 1px solid #f5f5f5;
}
.glyphs li .icon {
height: 110px;
display: flex;
align-items: center;
justify-content: center;
color: #565656;
font-size: 28px;
transition: all 0.2s ease-in;
}
.glyphs li .name {
height: 38px;
line-height: 38px;
color: #787878;
text-align: center;
transition: all 0.2s ease-in;
cursor: copy;
overflow: hidden;
font-size: 12px;
text-overflow: ellipsis;
white-space: nowrap;
padding: 0 8px;
}
.glyphs li:hover {
background-color: #7774e7;
border-color: #7774e7;
}
.glyphs li:hover .icon {
font-size: 42px;
color: #fff;
}
.glyphs li:hover .name {
color: #eee;
}
@font-face {
font-family: "Ionicons";
src: url("../src/styles/iconfont/Ionicons.eot");
src: url("../src/styles/iconfont/Ionicons.eot#iefix") format("embedded-opentype"),
url("../src/styles/iconfont/Ionicons.ttf") format("truetype"),
url("../src/styles/iconfont/Ionicons.woff") format("woff"),
url("../src/styles/iconfont/Ionicons.woff2") format("woff2"),
url("../src/styles/iconfont/Ionicons.svg") format("svg");
}
.cw-icon {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Ionicons" !important;
font-style: normal;
font-weight: 400;
display: inline-block;
vertical-align: middle;
}
.cw-icon-address:before {
content: "\c9d2";
}
.cw-icon-all-mission:before {
content: "\c9d3";
}
.cw-icon-approver:before {
content: "\c9d4";
}
.cw-icon-bussinese:before {
content: "\c9d5";
}
.cw-icon-charging:before {
content: "\c9d6";
}
.cw-icon-community:before {
content: "\c9d7";
}
.cw-icon-contract:before {
content: "\c9d8";
}
.cw-icon-dashboard:before {
content: "\c9d9";
}
.cw-icon-dispose-mission:before {
content: "\c9da";
}
.cw-icon-elevator:before {
content: "\c9db";
}
.cw-icon-energy:before {
content: "\c9dc";
}
.cw-icon-entrance:before {
content: "\c9dd";
}
.cw-icon-exit-full-screen:before {
content: "\c9de";
}
.cw-icon-finance:before {
content: "\c9df";
}
.cw-icon-fitment:before {
content: "\c9e0";
}
.cw-icon-flow:before {
content: "\c9e1";
}
.cw-icon-full-screen:before {
content: "\c9e2";
}
.cw-icon-home:before {
content: "\c9e3";
}
.cw-icon-hr:before {
content: "\c9e4";
}
.cw-icon-inform:before {
content: "\c9e5";
}
.cw-icon-iot:before {
content: "\c9e6";
}
.cw-icon-judge:before {
content: "\c9e7";
}
.cw-icon-lamp:before {
content: "\c9e8";
}
.cw-icon-leave:before {
content: "\c9e9";
}
.cw-icon-maintain:before {
content: "\c9ea";
}
.cw-icon-meeting-create:before {
content: "\c9eb";
}
.cw-icon-meeting-participant:before {
content: "\c9ec";
}
.cw-icon-meeting:before {
content: "\c9ed";
}
.cw-icon-menu-fold:before {
content: "\c9ee";
}
.cw-icon-menu-unfold:before {
content: "\c9ef";
}
.cw-icon-mission:before {
content: "\c9f0";
}
.cw-icon-monitor:before {
content: "\c9f1";
}
.cw-icon-more:before {
content: "\c9f2";
}
.cw-icon-movecar:before {
content: "\c9f3";
}
.cw-icon-my-mission:before {
content: "\c9f4";
}
.cw-icon-notication:before {
content: "\c9f5";
}
.cw-icon-notice:before {
content: "\c9f6";
}
.cw-icon-oa:before {
content: "\c9f7";
}
.cw-icon-omit:before {
content: "\c9f8";
}
.cw-icon-order:before {
content: "\c9f9";
}
.cw-icon-ower:before {
content: "\c9fa";
}
.cw-icon-park:before {
content: "\c9fb";
}
.cw-icon-party:before {
content: "\c9fc";
}
.cw-icon-payment:before {
content: "\c9fd";
}
.cw-icon-pet:before {
content: "\c9fe";
}
.cw-icon-pledge:before {
content: "\c9ff";
}
.cw-icon-promise:before {
content: "\ca00";
}
.cw-icon-question:before {
content: "\ca01";
}
.cw-icon-refound:before {
content: "\ca02";
}
.cw-icon-refresh:before {
content: "\ca03";
}
.cw-icon-report:before {
content: "\ca04";
}
.cw-icon-screen:before {
content: "\ca05";
}
.cw-icon-service:before {
content: "\ca06";
}
.cw-icon-setting:before {
content: "\ca07";
}
.cw-icon-sign:before {
content: "\ca08";
}
.cw-icon-statistic:before {
content: "\ca09";
}
.cw-icon-struct:before {
content: "\ca0a";
}
.cw-icon-topic:before {
content: "\ca0b";
}
.cw-icon-update:before {
content: "\ca0c";
}
.cw-icon-vistor:before {
content: "\ca0d";
}
.cw-icon-warehouse:before {
content: "\ca0e";
}
.cw-icon-warning:before {
content: "\ca0f";
}
.cw-icon-wechat:before {
content: "\ca10";
}
.cw-icon-xgfy:before {
content: "\ca11";
}
</style>
</head>
<body>
<section class="container">
<header>
<a href="https://github.com/chowa/cwfont">
<img class="logo" src="http://upload.ouliu.net/i/202001081600304i7x6.png" />
<h1>cwfont</h1>
</a>
</header>
<ul class="glyphs">
<!-- <li>
<div class="icon">
<i class="icon icon-test"></i>
</div>
<div class="name">test</div>
</li> -->
<li title=".ivu-icon-address">
<div class="icon">
<i class="cw-icon cw-icon-address"></i>
</div>
<div class="name">.ivu-icon-address</div>
</li>
<li title=".ivu-icon-all-mission">
<div class="icon">
<i class="cw-icon cw-icon-all-mission"></i>
</div>
<div class="name">.ivu-icon-all-mission</div>
</li>
<li title=".ivu-icon-approver">
<div class="icon">
<i class="cw-icon cw-icon-approver"></i>
</div>
<div class="name">.ivu-icon-approver</div>
</li>
<li title=".ivu-icon-bussinese">
<div class="icon">
<i class="cw-icon cw-icon-bussinese"></i>
</div>
<div class="name">.ivu-icon-bussinese</div>
</li>
<li title=".ivu-icon-charging">
<div class="icon">
<i class="cw-icon cw-icon-charging"></i>
</div>
<div class="name">.ivu-icon-charging</div>
</li>
<li title=".ivu-icon-community">
<div class="icon">
<i class="cw-icon cw-icon-community"></i>
</div>
<div class="name">.ivu-icon-community</div>
</li>
<li title=".ivu-icon-contract">
<div class="icon">
<i class="cw-icon cw-icon-contract"></i>
</div>
<div class="name">.ivu-icon-contract</div>
</li>
<li title=".ivu-icon-dashboard">
<div class="icon">
<i class="cw-icon cw-icon-dashboard"></i>
</div>
<div class="name">.ivu-icon-dashboard</div>
</li>
<li title=".ivu-icon-dispose-mission">
<div class="icon">
<i class="cw-icon cw-icon-dispose-mission"></i>
</div>
<div class="name">.ivu-icon-dispose-mission</div>
</li>
<li title=".ivu-icon-elevator">
<div class="icon">
<i class="cw-icon cw-icon-elevator"></i>
</div>
<div class="name">.ivu-icon-elevator</div>
</li>
<li title=".ivu-icon-energy">
<div class="icon">
<i class="cw-icon cw-icon-energy"></i>
</div>
<div class="name">.ivu-icon-energy</div>
</li>
<li title=".ivu-icon-entrance">
<div class="icon">
<i class="cw-icon cw-icon-entrance"></i>
</div>
<div class="name">.ivu-icon-entrance</div>
</li>
<li title=".ivu-icon-exit-full-screen">
<div class="icon">
<i class="cw-icon cw-icon-exit-full-screen"></i>
</div>
<div class="name">.ivu-icon-exit-full-screen</div>
</li>
<li title=".ivu-icon-finance">
<div class="icon">
<i class="cw-icon cw-icon-finance"></i>
</div>
<div class="name">.ivu-icon-finance</div>
</li>
<li title=".ivu-icon-fitment">
<div class="icon">
<i class="cw-icon cw-icon-fitment"></i>
</div>
<div class="name">.ivu-icon-fitment</div>
</li>
<li title=".ivu-icon-flow">
<div class="icon">
<i class="cw-icon cw-icon-flow"></i>
</div>
<div class="name">.ivu-icon-flow</div>
</li>
<li title=".ivu-icon-full-screen">
<div class="icon">
<i class="cw-icon cw-icon-full-screen"></i>
</div>
<div class="name">.ivu-icon-full-screen</div>
</li>
<li title=".ivu-icon-home">
<div class="icon">
<i class="cw-icon cw-icon-home"></i>
</div>
<div class="name">.ivu-icon-home</div>
</li>
<li title=".ivu-icon-hr">
<div class="icon">
<i class="cw-icon cw-icon-hr"></i>
</div>
<div class="name">.ivu-icon-hr</div>
</li>
<li title=".ivu-icon-inform">
<div class="icon">
<i class="cw-icon cw-icon-inform"></i>
</div>
<div class="name">.ivu-icon-inform</div>
</li>
<li title=".ivu-icon-iot">
<div class="icon">
<i class="cw-icon cw-icon-iot"></i>
</div>
<div class="name">.ivu-icon-iot</div>
</li>
<li title=".ivu-icon-judge">
<div class="icon">
<i class="cw-icon cw-icon-judge"></i>
</div>
<div class="name">.ivu-icon-judge</div>
</li>
<li title=".ivu-icon-lamp">
<div class="icon">
<i class="cw-icon cw-icon-lamp"></i>
</div>
<div class="name">.ivu-icon-lamp</div>
</li>
<li title=".ivu-icon-leave">
<div class="icon">
<i class="cw-icon cw-icon-leave"></i>
</div>
<div class="name">.ivu-icon-leave</div>
</li>
<li title=".ivu-icon-maintain">
<div class="icon">
<i class="cw-icon cw-icon-maintain"></i>
</div>
<div class="name">.ivu-icon-maintain</div>
</li>
<li title=".ivu-icon-meeting-create">
<div class="icon">
<i class="cw-icon cw-icon-meeting-create"></i>
</div>
<div class="name">.ivu-icon-meeting-create</div>
</li>
<li title=".ivu-icon-meeting-participant">
<div class="icon">
<i class="cw-icon cw-icon-meeting-participant"></i>
</div>
<div class="name">.ivu-icon-meeting-participant</div>
</li>
<li title=".ivu-icon-meeting">
<div class="icon">
<i class="cw-icon cw-icon-meeting"></i>
</div>
<div class="name">.ivu-icon-meeting</div>
</li>
<li title=".ivu-icon-menu-fold">
<div class="icon">
<i class="cw-icon cw-icon-menu-fold"></i>
</div>
<div class="name">.ivu-icon-menu-fold</div>
</li>
<li title=".ivu-icon-menu-unfold">
<div class="icon">
<i class="cw-icon cw-icon-menu-unfold"></i>
</div>
<div class="name">.ivu-icon-menu-unfold</div>
</li>
<li title=".ivu-icon-mission">
<div class="icon">
<i class="cw-icon cw-icon-mission"></i>
</div>
<div class="name">.ivu-icon-mission</div>
</li>
<li title=".ivu-icon-monitor">
<div class="icon">
<i class="cw-icon cw-icon-monitor"></i>
</div>
<div class="name">.ivu-icon-monitor</div>
</li>
<li title=".ivu-icon-more">
<div class="icon">
<i class="cw-icon cw-icon-more"></i>
</div>
<div class="name">.ivu-icon-more</div>
</li>
<li title=".ivu-icon-movecar">
<div class="icon">
<i class="cw-icon cw-icon-movecar"></i>
</div>
<div class="name">.ivu-icon-movecar</div>
</li>
<li title=".ivu-icon-my-mission">
<div class="icon">
<i class="cw-icon cw-icon-my-mission"></i>
</div>
<div class="name">.ivu-icon-my-mission</div>
</li>
<li title=".ivu-icon-notication">
<div class="icon">
<i class="cw-icon cw-icon-notication"></i>
</div>
<div class="name">.ivu-icon-notication</div>
</li>
<li title=".ivu-icon-notice">
<div class="icon">
<i class="cw-icon cw-icon-notice"></i>
</div>
<div class="name">.ivu-icon-notice</div>
</li>
<li title=".ivu-icon-oa">
<div class="icon">
<i class="cw-icon cw-icon-oa"></i>
</div>
<div class="name">.ivu-icon-oa</div>
</li>
<li title=".ivu-icon-omit">
<div class="icon">
<i class="cw-icon cw-icon-omit"></i>
</div>
<div class="name">.ivu-icon-omit</div>
</li>
<li title=".ivu-icon-order">
<div class="icon">
<i class="cw-icon cw-icon-order"></i>
</div>
<div class="name">.ivu-icon-order</div>
</li>
<li title=".ivu-icon-ower">
<div class="icon">
<i class="cw-icon cw-icon-ower"></i>
</div>
<div class="name">.ivu-icon-ower</div>
</li>
<li title=".ivu-icon-park">
<div class="icon">
<i class="cw-icon cw-icon-park"></i>
</div>
<div class="name">.ivu-icon-park</div>
</li>
<li title=".ivu-icon-party">
<div class="icon">
<i class="cw-icon cw-icon-party"></i>
</div>
<div class="name">.ivu-icon-party</div>
</li>
<li title=".ivu-icon-payment">
<div class="icon">
<i class="cw-icon cw-icon-payment"></i>
</div>
<div class="name">.ivu-icon-payment</div>
</li>
<li title=".ivu-icon-pet">
<div class="icon">
<i class="cw-icon cw-icon-pet"></i>
</div>
<div class="name">.ivu-icon-pet</div>
</li>
<li title=".ivu-icon-pledge">
<div class="icon">
<i class="cw-icon cw-icon-pledge"></i>
</div>
<div class="name">.ivu-icon-pledge</div>
</li>
<li title=".ivu-icon-promise">
<div class="icon">
<i class="cw-icon cw-icon-promise"></i>
</div>
<div class="name">.ivu-icon-promise</div>
</li>
<li title=".ivu-icon-question">
<div class="icon">
<i class="cw-icon cw-icon-question"></i>
</div>
<div class="name">.ivu-icon-question</div>
</li>
<li title=".ivu-icon-refound">
<div class="icon">
<i class="cw-icon cw-icon-refound"></i>
</div>
<div class="name">.ivu-icon-refound</div>
</li>
<li title=".ivu-icon-refresh">
<div class="icon">
<i class="cw-icon cw-icon-refresh"></i>
</div>
<div class="name">.ivu-icon-refresh</div>
</li>
<li title=".ivu-icon-report">
<div class="icon">
<i class="cw-icon cw-icon-report"></i>
</div>
<div class="name">.ivu-icon-report</div>
</li>
<li title=".ivu-icon-screen">
<div class="icon">
<i class="cw-icon cw-icon-screen"></i>
</div>
<div class="name">.ivu-icon-screen</div>
</li>
<li title=".ivu-icon-service">
<div class="icon">
<i class="cw-icon cw-icon-service"></i>
</div>
<div class="name">.ivu-icon-service</div>
</li>
<li title=".ivu-icon-setting">
<div class="icon">
<i class="cw-icon cw-icon-setting"></i>
</div>
<div class="name">.ivu-icon-setting</div>
</li>
<li title=".ivu-icon-sign">
<div class="icon">
<i class="cw-icon cw-icon-sign"></i>
</div>
<div class="name">.ivu-icon-sign</div>
</li>
<li title=".ivu-icon-statistic">
<div class="icon">
<i class="cw-icon cw-icon-statistic"></i>
</div>
<div class="name">.ivu-icon-statistic</div>
</li>
<li title=".ivu-icon-struct">
<div class="icon">
<i class="cw-icon cw-icon-struct"></i>
</div>
<div class="name">.ivu-icon-struct</div>
</li>
<li title=".ivu-icon-topic">
<div class="icon">
<i class="cw-icon cw-icon-topic"></i>
</div>
<div class="name">.ivu-icon-topic</div>
</li>
<li title=".ivu-icon-update">
<div class="icon">
<i class="cw-icon cw-icon-update"></i>
</div>
<div class="name">.ivu-icon-update</div>
</li>
<li title=".ivu-icon-vistor">
<div class="icon">
<i class="cw-icon cw-icon-vistor"></i>
</div>
<div class="name">.ivu-icon-vistor</div>
</li>
<li title=".ivu-icon-warehouse">
<div class="icon">
<i class="cw-icon cw-icon-warehouse"></i>
</div>
<div class="name">.ivu-icon-warehouse</div>
</li>
<li title=".ivu-icon-warning">
<div class="icon">
<i class="cw-icon cw-icon-warning"></i>
</div>
<div class="name">.ivu-icon-warning</div>
</li>
<li title=".ivu-icon-wechat">
<div class="icon">
<i class="cw-icon cw-icon-wechat"></i>
</div>
<div class="name">.ivu-icon-wechat</div>
</li>
<li title=".ivu-icon-xgfy">
<div class="icon">
<i class="cw-icon cw-icon-xgfy"></i>
</div>
<div class="name">.ivu-icon-xgfy</div>
</li>
</ul>
</section>
</body>
</html>