forked from sshwsfc/xadmin
-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathicons.html
More file actions
143 lines (143 loc) · 3.25 KB
/
icons.html
File metadata and controls
143 lines (143 loc) · 3.25 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
<!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: 14px;
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: 14px;
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=""></div>
<input type="text" readonly="readonly" value="&#xe000;" />
</div>
<div class="glyph">
<div class="fs1" aria-hidden="true" data-icon=""></div>
<input type="text" readonly="readonly" value="&#xf0e4;" />
</div>
<div class="glyph">
<div class="fs1" aria-hidden="true" data-icon=""></div>
<input type="text" readonly="readonly" value="&#xf03e;" />
</div>
<div class="glyph">
<div class="fs1" aria-hidden="true" data-icon=""></div>
<input type="text" readonly="readonly" value="&#xf12e;" />
</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-cord"></span>
icon-cord
</span>
<span class="box1">
<span aria-hidden="true" class="icon-dashboard"></span>
icon-dashboard
</span>
<span class="box1">
<span aria-hidden="true" class="icon-picture"></span>
icon-picture
</span>
<span class="box1">
<span aria-hidden="true" class="icon-puzzle"></span>
icon-puzzle
</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>