@nuitral/icons
Version:
nuitral - Icons
162 lines (134 loc) • 4.15 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<title>nuitral-icons</title>
<style>
body {
font-family: sans-serif;
margin: 0;
padding: 10px 20px;
text-align: center;
}
.preview {
width: 100px;
display: inline-block;
margin: 10px;
}
.preview .inner {
display: inline-block;
width: 100%;
text-align: center;
background: #f5f5f5;
-webkit-border-radius: 3px 3px 0 0;
-moz-border-radius: 3px 3px 0 0;
border-radius: 3px 3px 0 0;
}
.preview .inner {
line-height: 85px;
font-size: 40px;
color: #333;
padding-top: .5rem;
padding-bottom: .5rem;
}
.label {
display: inline-block;
width: 100%;
box-sizing: border-box;
padding: 5px;
font-size: 10px;
font-family: Monaco, monospace;
color: #666;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
background: #ddd;
-webkit-border-radius: 0 0 3px 3px;
-moz-border-radius: 0 0 3px 3px;
border-radius: 0 0 3px 3px;
color: #666;
}
</style>
<link rel="stylesheet" type="text/css" href="nuitral-icons.css" />
</head>
<body>
<h1>nuitral-icons</h1>
<div class="preview">
<span class="inner">
<div class="nuitral-icon nuitral-icon-user"></div>
</span>
<br>
<span class='label'>user</span>
</div>
<div class="preview">
<span class="inner">
<div class="nuitral-icon nuitral-icon-notebook"></div>
</span>
<br>
<span class='label'>notebook</span>
</div>
<div class="preview">
<span class="inner">
<div class="nuitral-icon nuitral-icon-clock"></div>
</span>
<br>
<span class='label'>clock</span>
</div>
<div class="preview">
<span class="inner">
<div class="nuitral-icon nuitral-icon-chevron-up"></div>
</span>
<br>
<span class='label'>chevron-up</span>
</div>
<div class="preview">
<span class="inner">
<div class="nuitral-icon nuitral-icon-chevron-right"></div>
</span>
<br>
<span class='label'>chevron-right</span>
</div>
<div class="preview">
<span class="inner">
<div class="nuitral-icon nuitral-icon-chevron-left"></div>
</span>
<br>
<span class='label'>chevron-left</span>
</div>
<div class="preview">
<span class="inner">
<div class="nuitral-icon nuitral-icon-chevron-down"></div>
</span>
<br>
<span class='label'>chevron-down</span>
</div>
<div class="preview">
<span class="inner">
<div class="nuitral-icon nuitral-icon-check"></div>
</span>
<br>
<span class='label'>check</span>
</div>
<div class="preview">
<span class="inner">
<div class="nuitral-icon nuitral-icon-check-circle"></div>
</span>
<br>
<span class='label'>check-circle</span>
</div>
<div class="preview">
<span class="inner">
<div class="nuitral-icon nuitral-icon-camera"></div>
</span>
<br>
<span class='label'>camera</span>
</div>
<div class="preview">
<span class="inner">
<div class="nuitral-icon nuitral-icon-basket"></div>
</span>
<br>
<span class='label'>basket</span>
</div>
</body>
</html>