-
Notifications
You must be signed in to change notification settings - Fork 1
/
atoms.icons.html
224 lines (219 loc) · 9.27 KB
/
atoms.icons.html
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
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
<!DOCTYPE html>
<html>
<head>
<title>Atoms.Icons 0.0.2</title>
<link href="atoms.icons.css" rel="stylesheet" type="text/css" />
<style>
body {
background: #fff;
color: #444;
font: 16px/1.5 "Helvetica Neue", Helvetica, Arial, sans-seri;
}
.container {
margin: 0 auto;
max-width: 1200px;
min-width: 960px;
padding: 0 20px;
width: 95%;
}
ul, h2 {
display: block;
clear: both;
}
li {
list-style: none;
float: left;
width: 5rem;
margin: 0 0 1rem 0;
text-align: center;
font-size: .7rem;
}
li .icon {
font-size: 3rem;
display: block;
margin-bottom: .25rem;
}
</style>
</head>
<body>
<div class="container">
<h2>Normal</h2>
<ul>
<li><span class="icon cloud-upload"></li>
<li><span class="icon cash"></li>
<li><span class="icon close"></li>
<li><span class="icon bluetooth"></li>
<li><span class="icon cloud-download"></li>
<li><span class="icon way"></li>
<li><span class="icon close-circle"></li>
<li><span class="icon id"></li>
<li><span class="icon angle-up"></li>
<li><span class="icon wristwatch"></li>
<li><span class="icon angle-up-circle"></li>
<li><span class="icon world"></li>
<li><span class="icon angle-right"></li>
<li><span class="icon volume"></li>
<li><span class="icon angle-right-circle"></li>
<li><span class="icon users"></li>
<li><span class="icon angle-left"></li>
<li><span class="icon user-female"></li>
<li><span class="icon angle-left-circle"></li>
<li><span class="icon up-arrow"></li>
<li><span class="icon angle-down"></li>
<li><span class="icon switch"></span></li>
<li><span class="icon angle-down-circle"></span></li>
<li><span class="icon scissors"></span></li>
<li><span class="icon wallet"></span></li>
<li><span class="icon safe"></span></li>
<li><span class="icon volume2"></span></li>
<li><span class="icon volume1"></span></li>
<li><span class="icon voicemail"></span></li>
<li><span class="icon video"></span></li>
<li><span class="icon user"></span></li>
<li><span class="icon upload"></span></li>
<li><span class="icon unlock"></span></li>
<li><span class="icon umbrella"></span></li>
<li><span class="icon trash"></span></li>
<li><span class="icon tools"></span></li>
<li><span class="icon timer"></span></li>
<li><span class="icon ticket"></span></li>
<li><span class="icon target"></span></li>
<li><span class="icon sun"></span></li>
<li><span class="icon study"></span></li>
<li><span class="icon stopwatch"></span></li>
<li><span class="icon star"></span></li>
<li><span class="icon speaker"></span></li>
<li><span class="icon signal"></span></li>
<li><span class="icon shuffle"></span></li>
<li><span class="icon shopbag"></span></li>
<li><span class="icon share"></span></li>
<li><span class="icon server"></span></li>
<li><span class="icon search"></span></li>
<li><span class="icon film"></span></li>
<li><span class="icon science"></span></li>
<li><span class="icon disk"></span></li>
<li><span class="icon ribbon"></span></li>
<li><span class="icon repeat"></span></li>
<li><span class="icon refresh"></span></li>
<li><span class="icon add-user"></span></li>
<li><span class="icon refresh-cloud"></span></li>
<li><span class="icon paperclip"></span></li>
<li><span class="icon radio"></span></li>
<li><span class="icon note2"></span></li>
<li><span class="icon print"></span></li>
<li><span class="icon network"></span></li>
<li><span class="icon prev"></span></li>
<li><span class="icon mute"></span></li>
<li><span class="icon power"></span></li>
<li><span class="icon medal"></span></li>
<li><span class="icon portfolio"></span></li>
<li><span class="icon like2"></span></li>
<li><span class="icon plus"></span></li>
<li><span class="icon left-arrow"></span></li>
<li><span class="icon play"></span></li>
<li><span class="icon key"></span></li>
<li><span class="icon plane"></span></li>
<li><span class="icon joy"></span></li>
<li><span class="icon photo-gallery"></span></li>
<li><span class="icon pin"></span></li>
<li><span class="icon phone"></span></li>
<li><span class="icon plug"></span></li>
<li><span class="icon pen"></span></li>
<li><span class="icon right-arrow"></span></li>
<li><span class="icon paper-plane"></span></li>
<li><span class="icon delete-user"></span></li>
<li><span class="icon paint"></span></li>
<li><span class="icon bottom-arrow"></span></li>
<li><span class="icon notebook"></span></li>
<li><span class="icon note"></span></li>
<li><span class="icon next"></span></li>
<li><span class="icon news-paper"></span></li>
<li><span class="icon musiclist"></span></li>
<li><span class="icon music"></span></li>
<li><span class="icon mouse"></span></li>
<li><span class="icon more"></span></li>
<li><span class="icon moon"></span></li>
<li><span class="icon monitor"></span></li>
<li><span class="icon micro"></span></li>
<li><span class="icon menu"></span></li>
<li><span class="icon map"></span></li>
<li><span class="icon map-marker"></span></li>
<li><span class="icon mail"></span></li>
<li><span class="icon mail-open"></span></li>
<li><span class="icon mail-open-file"></span></li>
<li><span class="icon magnet"></span></li>
<li><span class="icon loop"></span></li>
<li><span class="icon look"></span></li>
<li><span class="icon lock"></span></li>
<li><span class="icon lintern"></span></li>
<li><span class="icon link"></span></li>
<li><span class="icon like"></span></li>
<li><span class="icon light"></span></li>
<li><span class="icon less"></span></li>
<li><span class="icon keypad"></span></li>
<li><span class="icon junk"></span></li>
<li><span class="icon info"></span></li>
<li><span class="icon home"></span></li>
<li><span class="icon help2"></span></li>
<li><span class="icon help1"></span></li>
<li><span class="icon graph3"></span></li>
<li><span class="icon graph2"></span></li>
<li><span class="icon graph1"></span></li>
<li><span class="icon graph"></span></li>
<li><span class="icon global"></span></li>
<li><span class="icon gleam"></span></li>
<li><span class="icon glasses"></span></li>
<li><span class="icon gift"></span></li>
<li><span class="icon folder"></span></li>
<li><span class="icon flag"></span></li>
<li><span class="icon filter"></span></li>
<li><span class="icon file"></span></li>
<li><span class="icon expand1"></span></li>
<li><span class="icon exapnd2"></span></li>
<li><span class="icon edit"></span></li>
<li><span class="icon drop"></span></li>
<li><span class="icon drawer"></span></li>
<li><span class="icon download"></span></li>
<li><span class="icon display2"></span></li>
<li><span class="icon display1"></span></li>
<li><span class="icon diskette"></span></li>
<li><span class="icon date"></span></li>
<li><span class="icon cup"></span></li>
<li><span class="icon culture"></span></li>
<li><span class="icon crop"></span></li>
<li><span class="icon credit"></span></li>
<li><span class="icon copy-file"></span></li>
<li><span class="icon config"></span></li>
<li><span class="icon compass"></span></li>
<li><span class="icon comment"></span></li>
<li><span class="icon coffee"></span></li>
<li><span class="icon cloud"></span></li>
<li><span class="icon clock"></span></li>
<li><span class="icon check"></span></li>
<li><span class="icon chat"></span></li>
<li><span class="icon cart"></span></li>
<li><span class="icon camera"></span></li>
<li><span class="icon call"></span></li>
<li><span class="icon calculator"></span></li>
<li><span class="icon browser"></span></li>
<li><span class="icon box2"></span></li>
<li><span class="icon box1"></span></li>
<li><span class="icon bookmarks"></span></li>
<li><span class="icon bicycle"></span></li>
<li><span class="icon bell"></span></li>
<li><span class="icon battery"></span></li>
<li><span class="icon ball"></span></li>
<li><span class="icon back"></li>
<li><span class="icon attention"></li>
<li><span class="icon anchor"></li>
<li><span class="icon albums"></li>
<li><span class="icon alarm"></li>
<li><span class="icon airplay"></li>
</ul>
<h2>Special</h2>
<ul>
<li><span class="icon loading"></li>
</ul>
</div>
</body>
</html>