pejava.js
Version:
Javascript ecosystem pejava.js
217 lines (207 loc) • 8.59 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Pejava.js: Icons</title>
<link rel="stylesheet" href="https://unpkg.com/pejava.js@1.0.7/css/pejava.full.css"/>
</head>
<style>
* {
user-select: auto ;
}
.icon {
font-size: 2rem;
}
.icon:before {
font-size: 2rem;
}
.icon-btn {
display: inline-block;
padding: .5rem;
width: 6rem;
min-height: 4.5rem;
vertical-align: top;
}
.icon-btn:hover {
background-color: #073642;
}
.icon-btn span {
display: block;
}
</style>
<body>
<div class="Application">
<div class="wrapper">
<div class="Container padding" cols="6">
<div class="header">
<div class="title">
<h1>Icons</h1>
<h2>Obligatory for pejava.js</h2>
</div>
</div>
<div class="blocks">
<div class="blocks-wrapper wrapper">
<div class="Txt margin">
<p>
The library of
<a href="https://icomoon.io/" target="_blank">
https://icomoon.io/
</a> required for Pejava.js interface.
</p>
</div>
<div class="Txt">
<a class="icon-btn center">
<span class="icon icon-gear"></span>
<span>gear</span>
</a>
<a class="icon-btn center">
<span class="icon icon-check-on"></span>
<span>check-on</span>
</a>
<a class="icon-btn center">
<span class="icon icon-check-off"></span>
<span>check-off</span>
</a>
<a class="icon-btn center">
<span class="icon icon-group"></span>
<span>group</span>
</a>
<a class="icon-btn center">
<span class="icon icon-logo"></span>
<span>logo</span>
</a>
<a class="icon-btn center">
<span class="icon icon-logo2"></span>
<span>logo2</span>
</a>
<a class="icon-btn center">
<span class="icon icon-left"></span>
<span>left</span>
</a>
<a class="icon-btn center">
<span class="icon icon-card"></span>
<span>card</span>
</a>
<a class="icon-btn center">
<span class="icon icon-right"></span>
<span>right</span>
</a>
<a class="icon-btn center">
<span class="icon icon-time"></span>
<span>time</span>
</a>
<a class="icon-btn center">
<span class="icon icon-up"></span>
<span>up</span>
</a>
<a class="icon-btn center">
<span class="icon icon-lecture"></span>
<span>lecture</span>
</a>
<a class="icon-btn center">
<span class="icon icon-reward"></span>
<span>reward</span>
</a>
<a class="icon-btn center">
<span class="icon icon-dot"></span>
<span>dot</span>
</a>
<a class="icon-btn center">
<span class="icon icon-fb"></span>
<span>fb</span>
</a>
<a class="icon-btn center">
<span class="icon icon-home"></span>
<span>home</span>
</a>
<a class="icon-btn center">
<span class="icon icon-link"></span>
<span>link</span>
</a>
<a class="icon-btn center">
<span class="icon icon-ok"></span>
<span>ok</span>
</a>
<a class="icon-btn center">
<span class="icon icon-plus"></span>
<span>plus</span>
</a>
<a class="icon-btn center">
<span class="icon icon-radio-on"></span>
<span>radio-on</span>
</a>
<a class="icon-btn center">
<span class="icon icon-radio-off"></span>
<span>radio-off</span>
</a>
<a class="icon-btn center">
<span class="icon icon-skype"></span>
<span>skype</span>
</a>
<a class="icon-btn center">
<span class="icon icon-telegram"></span>
<span>telegram</span>
</a>
<a class="icon-btn center">
<span class="icon icon-remove"></span>
<span>remove</span>
</a>
<a class="icon-btn center">
<span class="icon icon-mail"></span>
<span>mail</span>
</a>
<a class="icon-btn center">
<span class="icon icon-space"></span>
<span>space</span>
</a>
<a class="icon-btn center">
<span class="icon icon-refresh"></span>
<span>refresh</span>
</a>
</div>
</div>
</div>
</div>
<div class="Container padding" cols="6">
<div class="header">
<div class="title">
<h1>Icons</h1>
<h2>Material icons</h2>
</div>
</div>
<div class="blocks">
<div class="blocks-wrapper wrapper">
<div class="Txt margin">
<p>
The library of
<a href="https://material.io/resources/icons/" target="_blank">
https://material.io/resources/icons/
</a> can be included into your project (or use pejava.full.css)<br>
Below some examples:
</p>
</div>
<div class="Txt">
<a class="icon-btn center">
<span class="icon mi icon-3d-rotation"></span>
<span>mi 3d-rotation</span>
</a>
<a class="icon-btn center">
<span class="icon mi icon-airplane-off"></span>
<span>mi airplane-off</span>
</a>
<a class="icon-btn center">
<span class="icon mi icon-assignment-account"></span>
<span>mi assignment-account</span>
</a>
<a class="icon-btn center">
<span class="icon mi icon-more-horiz"></span>
<span>mi more-horiz</span>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>