painterro
Version:
HTML5 image editing widget (js paint plugin)
381 lines (372 loc) • 8.11 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ptroiconfont</title>
<style>
body {
font-family: sans-serif;
margin: 0;
padding: 10px 20px;
}
.preview {
line-height: 2em;
}
.preview__icon {
display: inline-block;
width: 32px;
text-align: center;
}
.ptro-icon {
display: inline-block;
font-size: 16px;
}
@font-face {
font-family: "ptroiconfont";
src: url("ptroiconfont.woff?ebe1a4332c0507d6283582e66d937ed1") format("woff"),
url("ptroiconfont.ttf?ebe1a4332c0507d6283582e66d937ed1") format("truetype");
font-weight: normal;
font-style: normal;
}
.ptro-icon {
}
.ptro-icon:before {
font-family: ptroiconfont ;
font-style: normal ;
font-weight: normal ;
font-variant: normal ;
text-transform: none ;
speak: none;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.ptro-icon-apply:before {
content: "\f101";
}
.ptro-icon-arrow:before {
content: "\f102";
}
.ptro-icon-brush:before {
content: "\f103";
}
.ptro-icon-bucket:before {
content: "\f104";
}
.ptro-icon-clear:before {
content: "\f105";
}
.ptro-icon-close:before {
content: "\f106";
}
.ptro-icon-crop:before {
content: "\f107";
}
.ptro-icon-ellipse:before {
content: "\f108";
}
.ptro-icon-eraser:before {
content: "\f109";
}
.ptro-icon-filters:before {
content: "\f10a";
}
.ptro-icon-line:before {
content: "\f10b";
}
.ptro-icon-linked:before {
content: "\f10c";
}
.ptro-icon-loading:before {
content: "\f10d";
}
.ptro-icon-mirror:before {
content: "\f10e";
}
.ptro-icon-open:before {
content: "\f10f";
}
.ptro-icon-painterro0:before {
content: "\f110";
}
.ptro-icon-paste_extend_down:before {
content: "\f111";
}
.ptro-icon-paste_extend_left:before {
content: "\f112";
}
.ptro-icon-paste_extend_right:before {
content: "\f113";
}
.ptro-icon-paste_extend_top:before {
content: "\f114";
}
.ptro-icon-paste_fit:before {
content: "\f115";
}
.ptro-icon-paste_over:before {
content: "\f116";
}
.ptro-icon-pipette:before {
content: "\f117";
}
.ptro-icon-pixelize:before {
content: "\f118";
}
.ptro-icon-rect:before {
content: "\f119";
}
.ptro-icon-redo:before {
content: "\f11a";
}
.ptro-icon-resize:before {
content: "\f11b";
}
.ptro-icon-rotate:before {
content: "\f11c";
}
.ptro-icon-save:before {
content: "\f11d";
}
.ptro-icon-select:before {
content: "\f11e";
}
.ptro-icon-settings:before {
content: "\f11f";
}
.ptro-icon-text:before {
content: "\f120";
}
.ptro-icon-undo:before {
content: "\f121";
}
.ptro-icon-unlinked:before {
content: "\f122";
}
.ptro-icon-zoomin:before {
content: "\f123";
}
.ptro-icon-zoomout:before {
content: "\f124";
}
</style>
</head>
<body>
<h1>ptroiconfont</h1>
<div class="preview">
<span class="preview__icon">
<span class="ptro-icon ptro-icon-apply"></span>
</span>
<span>apply</span>
</div>
<div class="preview">
<span class="preview__icon">
<span class="ptro-icon ptro-icon-arrow"></span>
</span>
<span>arrow</span>
</div>
<div class="preview">
<span class="preview__icon">
<span class="ptro-icon ptro-icon-brush"></span>
</span>
<span>brush</span>
</div>
<div class="preview">
<span class="preview__icon">
<span class="ptro-icon ptro-icon-bucket"></span>
</span>
<span>bucket</span>
</div>
<div class="preview">
<span class="preview__icon">
<span class="ptro-icon ptro-icon-clear"></span>
</span>
<span>clear</span>
</div>
<div class="preview">
<span class="preview__icon">
<span class="ptro-icon ptro-icon-close"></span>
</span>
<span>close</span>
</div>
<div class="preview">
<span class="preview__icon">
<span class="ptro-icon ptro-icon-crop"></span>
</span>
<span>crop</span>
</div>
<div class="preview">
<span class="preview__icon">
<span class="ptro-icon ptro-icon-ellipse"></span>
</span>
<span>ellipse</span>
</div>
<div class="preview">
<span class="preview__icon">
<span class="ptro-icon ptro-icon-eraser"></span>
</span>
<span>eraser</span>
</div>
<div class="preview">
<span class="preview__icon">
<span class="ptro-icon ptro-icon-filters"></span>
</span>
<span>filters</span>
</div>
<div class="preview">
<span class="preview__icon">
<span class="ptro-icon ptro-icon-line"></span>
</span>
<span>line</span>
</div>
<div class="preview">
<span class="preview__icon">
<span class="ptro-icon ptro-icon-linked"></span>
</span>
<span>linked</span>
</div>
<div class="preview">
<span class="preview__icon">
<span class="ptro-icon ptro-icon-loading"></span>
</span>
<span>loading</span>
</div>
<div class="preview">
<span class="preview__icon">
<span class="ptro-icon ptro-icon-mirror"></span>
</span>
<span>mirror</span>
</div>
<div class="preview">
<span class="preview__icon">
<span class="ptro-icon ptro-icon-open"></span>
</span>
<span>open</span>
</div>
<div class="preview">
<span class="preview__icon">
<span class="ptro-icon ptro-icon-painterro0"></span>
</span>
<span>painterro0</span>
</div>
<div class="preview">
<span class="preview__icon">
<span class="ptro-icon ptro-icon-paste_extend_down"></span>
</span>
<span>paste_extend_down</span>
</div>
<div class="preview">
<span class="preview__icon">
<span class="ptro-icon ptro-icon-paste_extend_left"></span>
</span>
<span>paste_extend_left</span>
</div>
<div class="preview">
<span class="preview__icon">
<span class="ptro-icon ptro-icon-paste_extend_right"></span>
</span>
<span>paste_extend_right</span>
</div>
<div class="preview">
<span class="preview__icon">
<span class="ptro-icon ptro-icon-paste_extend_top"></span>
</span>
<span>paste_extend_top</span>
</div>
<div class="preview">
<span class="preview__icon">
<span class="ptro-icon ptro-icon-paste_fit"></span>
</span>
<span>paste_fit</span>
</div>
<div class="preview">
<span class="preview__icon">
<span class="ptro-icon ptro-icon-paste_over"></span>
</span>
<span>paste_over</span>
</div>
<div class="preview">
<span class="preview__icon">
<span class="ptro-icon ptro-icon-pipette"></span>
</span>
<span>pipette</span>
</div>
<div class="preview">
<span class="preview__icon">
<span class="ptro-icon ptro-icon-pixelize"></span>
</span>
<span>pixelize</span>
</div>
<div class="preview">
<span class="preview__icon">
<span class="ptro-icon ptro-icon-rect"></span>
</span>
<span>rect</span>
</div>
<div class="preview">
<span class="preview__icon">
<span class="ptro-icon ptro-icon-redo"></span>
</span>
<span>redo</span>
</div>
<div class="preview">
<span class="preview__icon">
<span class="ptro-icon ptro-icon-resize"></span>
</span>
<span>resize</span>
</div>
<div class="preview">
<span class="preview__icon">
<span class="ptro-icon ptro-icon-rotate"></span>
</span>
<span>rotate</span>
</div>
<div class="preview">
<span class="preview__icon">
<span class="ptro-icon ptro-icon-save"></span>
</span>
<span>save</span>
</div>
<div class="preview">
<span class="preview__icon">
<span class="ptro-icon ptro-icon-select"></span>
</span>
<span>select</span>
</div>
<div class="preview">
<span class="preview__icon">
<span class="ptro-icon ptro-icon-settings"></span>
</span>
<span>settings</span>
</div>
<div class="preview">
<span class="preview__icon">
<span class="ptro-icon ptro-icon-text"></span>
</span>
<span>text</span>
</div>
<div class="preview">
<span class="preview__icon">
<span class="ptro-icon ptro-icon-undo"></span>
</span>
<span>undo</span>
</div>
<div class="preview">
<span class="preview__icon">
<span class="ptro-icon ptro-icon-unlinked"></span>
</span>
<span>unlinked</span>
</div>
<div class="preview">
<span class="preview__icon">
<span class="ptro-icon ptro-icon-zoomin"></span>
</span>
<span>zoomin</span>
</div>
<div class="preview">
<span class="preview__icon">
<span class="ptro-icon ptro-icon-zoomout"></span>
</span>
<span>zoomout</span>
</div>
</body>
</html>