yetangitu/canvas-based-HTML5-Comic-Book-Reader
1
0
Fork 0
Code Issues Pull requests Releases Wiki Activity
canvas-based-HTML5-Comic-Bo.../fonts/icomoon-toolbar/index.html

351 lines
No EOL
10 KiB
HTML
Raw Blame History

<!doctype html>
<html>
<head>
<title>Your Font/Glyphs</title>
<link rel="stylesheet" href="style.css" />
<!--[if lte IE 7]><script src="lte-ie7.js"></script><![endif]-->
<style>
section, header, footer {display: block;}
body {
font-family: sans-serif;
color: #444;
line-height: 1.5;
font-size: 1em;
}
* {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
margin: 0;
padding: 0;
}
.glyph {
font-size: 20px;
float: left;
text-align: center;
background: #eee;
padding: .75em;
margin: .75em 1.5em .75em 0;
width: 7.5em;
border-radius: .25em;
box-shadow: inset 0 0 0 1px #f8f8f8, 0 0 0 1px #CCC;
}
.glyph input {
font-family: consolas, monospace;
font-size: 13px;
width: 100%;
text-align: center;
border: 0;
box-shadow: 0 0 0 1px #ccc;
padding: .125em;
}
.w-main {
width: 80%;
}
.centered {
margin-left: auto;
margin-right: auto;
}
.fs1 {
font-size: 2em;
}
header {
margin: 2em 0;
padding-bottom: .5em;
color: #666;
box-shadow: 0 2px #eee;
}
header h1 {
font-size: 2em;
font-weight: normal;
}
.clearfix:before, .clearfix:after { content: ""; display: table; }
.clearfix:after, .clear { clear: both; }
footer {
margin-top: 2em;
padding: .5em 0;
box-shadow: 0 -2px #eee;
}
a, a:visited {
color: #B35047;
text-decoration: none;
}
a:hover, a:focus {color: #000;}
.box1 {
font-size: 20px;
display: inline-block;
width: 15em;
padding: .25em .5em;
background: #eee;
margin: .5em 1em .5em 0;
}
</style>
</head>
<body>
<div class="w-main centered">
<section class="mtm clearfix" id="glyphs">
<header>
<h1>Your font contains the following glyphs</h1>
<p>The generated SVG font can be imported back to <a href="http://icomoon.io/app">IcoMoon</a> for modification.</p>
</header>
<div class="glyph">
<div class="fs1" aria-hidden="true" data-icon="&#xe000;"></div>
<input type="text" readonly="readonly" value="&amp;#xe000;" />
</div>
<div class="glyph">
<div class="fs1" aria-hidden="true" data-icon="&#xe001;"></div>
<input type="text" readonly="readonly" value="&amp;#xe001;" />
</div>
<div class="glyph">
<div class="fs1" aria-hidden="true" data-icon="&#xe002;"></div>
<input type="text" readonly="readonly" value="&amp;#xe002;" />
</div>
<div class="glyph">
<div class="fs1" aria-hidden="true" data-icon="&#xe003;"></div>
<input type="text" readonly="readonly" value="&amp;#xe003;" />
</div>
<div class="glyph">
<div class="fs1" aria-hidden="true" data-icon="&#xe004;"></div>
<input type="text" readonly="readonly" value="&amp;#xe004;" />
</div>
<div class="glyph">
<div class="fs1" aria-hidden="true" data-icon="&#xe005;"></div>
<input type="text" readonly="readonly" value="&amp;#xe005;" />
</div>
<div class="glyph">
<div class="fs1" aria-hidden="true" data-icon="&#xe006;"></div>
<input type="text" readonly="readonly" value="&amp;#xe006;" />
</div>
<div class="glyph">
<div class="fs1" aria-hidden="true" data-icon="&#xe007;"></div>
<input type="text" readonly="readonly" value="&amp;#xe007;" />
</div>
<div class="glyph">
<div class="fs1" aria-hidden="true" data-icon="&#xe008;"></div>
<input type="text" readonly="readonly" value="&amp;#xe008;" />
</div>
<div class="glyph">
<div class="fs1" aria-hidden="true" data-icon="&#xe009;"></div>
<input type="text" readonly="readonly" value="&amp;#xe009;" />
</div>
<div class="glyph">
<div class="fs1" aria-hidden="true" data-icon="&#xe00a;"></div>
<input type="text" readonly="readonly" value="&amp;#xe00a;" />
</div>
<div class="glyph">
<div class="fs1" aria-hidden="true" data-icon="&#xe00b;"></div>
<input type="text" readonly="readonly" value="&amp;#xe00b;" />
</div>
<div class="glyph">
<div class="fs1" aria-hidden="true" data-icon="&#xe00c;"></div>
<input type="text" readonly="readonly" value="&amp;#xe00c;" />
</div>
<div class="glyph">
<div class="fs1" aria-hidden="true" data-icon="&#xe00d;"></div>
<input type="text" readonly="readonly" value="&amp;#xe00d;" />
</div>
<div class="glyph">
<div class="fs1" aria-hidden="true" data-icon="&#xe00e;"></div>
<input type="text" readonly="readonly" value="&amp;#xe00e;" />
</div>
<div class="glyph">
<div class="fs1" aria-hidden="true" data-icon="&#xe00f;"></div>
<input type="text" readonly="readonly" value="&amp;#xe00f;" />
</div>
<div class="glyph">
<div class="fs1" aria-hidden="true" data-icon="&#xe011;"></div>
<input type="text" readonly="readonly" value="&amp;#xe011;" />
</div>
<div class="glyph">
<div class="fs1" aria-hidden="true" data-icon="&#xe010;"></div>
<input type="text" readonly="readonly" value="&amp;#xe010;" />
</div>
<div class="glyph">
<div class="fs1" aria-hidden="true" data-icon="&#xe012;"></div>
<input type="text" readonly="readonly" value="&amp;#xe012;" />
</div>
<div class="glyph">
<div class="fs1" aria-hidden="true" data-icon="&#xe013;"></div>
<input type="text" readonly="readonly" value="&amp;#xe013;" />
</div>
<div class="glyph">
<div class="fs1" aria-hidden="true" data-icon="&#xe014;"></div>
<input type="text" readonly="readonly" value="&amp;#xe014;" />
</div>
<div class="glyph">
<div class="fs1" aria-hidden="true" data-icon="&#xe015;"></div>
<input type="text" readonly="readonly" value="&amp;#xe015;" />
</div>
<div class="glyph">
<div class="fs1" aria-hidden="true" data-icon="&#xe016;"></div>
<input type="text" readonly="readonly" value="&amp;#xe016;" />
</div>
<div class="glyph">
<div class="fs1" aria-hidden="true" data-icon="&#xe017;"></div>
<input type="text" readonly="readonly" value="&amp;#xe017;" />
</div>
<div class="glyph">
<div class="fs1" aria-hidden="true" data-icon="&#xe01a;"></div>
<input type="text" readonly="readonly" value="&amp;#xe01a;" />
</div>
<div class="glyph">
<div class="fs1" aria-hidden="true" data-icon="&#xf042;"></div>
<input type="text" readonly="readonly" value="&amp;#xf042;" />
</div>
<div class="glyph">
<div class="fs1" aria-hidden="true" data-icon="&#xe018;"></div>
<input type="text" readonly="readonly" value="&amp;#xe018;" />
</div>
<div class="glyph">
<div class="fs1" aria-hidden="true" data-icon="&#xf057;"></div>
<input type="text" readonly="readonly" value="&amp;#xf057;" />
</div>
<div class="glyph">
<div class="fs1" aria-hidden="true" data-icon="&#xf00d;"></div>
<input type="text" readonly="readonly" value="&amp;#xf00d;" />
</div>
<div class="glyph">
<div class="fs1" aria-hidden="true" data-icon="&#xe037;"></div>
<input type="text" readonly="readonly" value="&amp;#xe037;" />
</div>
</section>
<div class="clear"></div>
<section class="mtm clearfix" id="glyphs">
<header>
<h1>Class Names</h1>
</header>
<span class="box1">
<span aria-hidden="true" class="icon-file"></span>
&nbsp;icon-file
</span>
<span class="box1">
<span aria-hidden="true" class="icon-image"></span>
&nbsp;icon-image
</span>
<span class="box1">
<span aria-hidden="true" class="icon-zoom-out"></span>
&nbsp;icon-zoom-out
</span>
<span class="box1">
<span aria-hidden="true" class="icon-zoom-in"></span>
&nbsp;icon-zoom-in
</span>
<span class="box1">
<span aria-hidden="true" class="icon-expand"></span>
&nbsp;icon-expand
</span>
<span class="box1">
<span aria-hidden="true" class="icon-expand-2"></span>
&nbsp;icon-expand-2
</span>
<span class="box1">
<span aria-hidden="true" class="icon-folder-open"></span>
&nbsp;icon-folder-open
</span>
<span class="box1">
<span aria-hidden="true" class="icon-folder"></span>
&nbsp;icon-folder
</span>
<span class="box1">
<span aria-hidden="true" class="icon-cog"></span>
&nbsp;icon-cog
</span>
<span class="box1">
<span aria-hidden="true" class="icon-menu"></span>
&nbsp;icon-menu
</span>
<span class="box1">
<span aria-hidden="true" class="icon-wrench"></span>
&nbsp;icon-wrench
</span>
<span class="box1">
<span aria-hidden="true" class="icon-settings"></span>
&nbsp;icon-settings
</span>
<span class="box1">
<span aria-hidden="true" class="icon-loop"></span>
&nbsp;icon-loop
</span>
<span class="box1">
<span aria-hidden="true" class="icon-pin"></span>
&nbsp;icon-pin
</span>
<span class="box1">
<span aria-hidden="true" class="icon-first"></span>
&nbsp;icon-first
</span>
<span class="box1">
<span aria-hidden="true" class="icon-last"></span>
&nbsp;icon-last
</span>
<span class="box1">
<span aria-hidden="true" class="icon-arrow-left"></span>
&nbsp;icon-arrow-left
</span>
<span class="box1">
<span aria-hidden="true" class="icon-arrow-right"></span>
&nbsp;icon-arrow-right
</span>
<span class="box1">
<span aria-hidden="true" class="icon-arrow-left-2"></span>
&nbsp;icon-arrow-left-2
</span>
<span class="box1">
<span aria-hidden="true" class="icon-arrow-right-2"></span>
&nbsp;icon-arrow-right-2
</span>
<span class="box1">
<span aria-hidden="true" class="icon-arrow-left-3"></span>
&nbsp;icon-arrow-left-3
</span>
<span class="box1">
<span aria-hidden="true" class="icon-arrow-right-3"></span>
&nbsp;icon-arrow-right-3
</span>
<span class="box1">
<span aria-hidden="true" class="icon-previous"></span>
&nbsp;icon-previous
</span>
<span class="box1">
<span aria-hidden="true" class="icon-next"></span>
&nbsp;icon-next
</span>
<span class="box1">
<span aria-hidden="true" class="icon-droplet"></span>
&nbsp;icon-droplet
</span>
<span class="box1">
<span aria-hidden="true" class="icon-adjust"></span>
&nbsp;icon-adjust
</span>
<span class="box1">
<span aria-hidden="true" class="icon-sun"></span>
&nbsp;icon-sun
</span>
<span class="box1">
<span aria-hidden="true" class="icon-remove-sign"></span>
&nbsp;icon-remove-sign
</span>
<span class="box1">
<span aria-hidden="true" class="icon-remove"></span>
&nbsp;icon-remove
</span>
<span class="box1">
<span aria-hidden="true" class="icon-copy"></span>
&nbsp;icon-copy
</span>
</section>
<footer>
<p>Generated by <a href="http://icomoon.io">IcoMoon.io</a></p>
</footer>
</div>
<script>
document.getElementById("glyphs").addEventListener("click", function(e) {
var target = e.target;
if (target.tagName === "INPUT") {
target.select();
}
});
</script>
</body>
</html>
Reference in a new issue View git blame Copy permalink