root / snf-cyclades-app / synnefo / ui / new_ui / ui / icon_guide.html @ 1eb800de
History | View | Annotate | Download (16.5 kB)
1 |
<!doctype html> |
---|---|
2 |
<html>
|
3 |
<head>
|
4 |
<meta charset='utf-8' /> |
5 |
<meta name='viewport' content='width=device-width' /> |
6 |
<title>snf fonts</title> |
7 |
<link rel='stylesheet' href='stylesheets/font_custom.css' /> |
8 |
<!--[if lte IE 7]><script src='lte-ie7.js'></script><![endif]-->
|
9 |
<style>
|
10 |
section, header, footer {display: block; overflow: hidden;} |
11 |
body { |
12 |
font-family: sans-serif; |
13 |
color: #444; |
14 |
line-height: 1.5; |
15 |
font-size: 1em; |
16 |
} |
17 |
* { |
18 |
-moz-box-sizing: border-box; |
19 |
-webkit-box-sizing: border-box; |
20 |
box-sizing: border-box; |
21 |
margin: 0; |
22 |
padding: 0; |
23 |
} |
24 |
.glyph { |
25 |
font-size: 14px; |
26 |
float: left; |
27 |
text-align: center; |
28 |
background: #eee; |
29 |
padding: .75em; |
30 |
margin: .75em 1.5em .75em 1px; |
31 |
width: 20em; |
32 |
border-radius: .25em; |
33 |
box-shadow: inset 0 0 0 1px #f8f8f8, 0 0 0 1px #CCC; |
34 |
} |
35 |
.glyph.aux { |
36 |
background-color: #f8f8e7; |
37 |
} |
38 |
.glyph input { |
39 |
font-family: consolas, monospace; |
40 |
font-size: 13px; |
41 |
width: 100%; |
42 |
text-align: center; |
43 |
border: 0; |
44 |
box-shadow: 0 0 0 1px #ccc; |
45 |
padding: .125em; |
46 |
} |
47 |
.w-main { |
48 |
width: 80%; |
49 |
} |
50 |
.centered { |
51 |
margin-left: auto; |
52 |
margin-right: auto; |
53 |
} |
54 |
.fs1 { |
55 |
font-size: 2em; |
56 |
color: rgb(71, 176, 233); |
57 |
} |
58 |
header { |
59 |
margin: 2em 0; |
60 |
padding-bottom: .5em; |
61 |
color: #666; |
62 |
box-shadow: 0 2px #eee; |
63 |
} |
64 |
header h1 { |
65 |
font-size: 2em; |
66 |
font-weight: normal; |
67 |
} |
68 |
.clearfix:before, .clearfix:after { content: ''; display: table; } |
69 |
.clearfix:after, .clear { clear: both; } |
70 |
footer { |
71 |
margin-top: 2em; |
72 |
padding: .5em 0; |
73 |
box-shadow: 0 -2px #eee; |
74 |
} |
75 |
a, a:visited { |
76 |
color: #B35047; |
77 |
text-decoration: none; |
78 |
} |
79 |
a:hover, a:focus {color: #000;} |
80 |
.box1 { |
81 |
font-size: 14px; |
82 |
display: inline-block; |
83 |
width: 15em; |
84 |
padding: .25em .5em; |
85 |
background: #eee; |
86 |
margin: .5em 1em .5em 0; |
87 |
} |
88 |
.general { |
89 |
font-weight: bold; |
90 |
} |
91 |
h1, h2 { |
92 |
color: #666; |
93 |
font-weight: normal; |
94 |
} |
95 |
|
96 |
.note { |
97 |
font-style: italic; |
98 |
} |
99 |
|
100 |
section ul { |
101 |
list-style-type:circle; |
102 |
margin: 18px; |
103 |
} |
104 |
li { |
105 |
font-size: 14px; |
106 |
} |
107 |
</style>
|
108 |
</head>
|
109 |
<body>
|
110 |
<div class='w-main centered'> |
111 |
<section class='mtm clearfix' > |
112 |
<header>
|
113 |
<h1>Icons included in snf-font-1</h1> |
114 |
|
115 |
</header>
|
116 |
|
117 |
<section>
|
118 |
<h2>snf icons</h2> |
119 |
<div class='glyph'> |
120 |
<div class='fs1' aria-hidden='true' data-icon='v'></div> |
121 |
<input type='text' readonly='readonly' value='snf-network-outline [v]' /> |
122 |
</div>
|
123 |
<div class='glyph'> |
124 |
<div class='fs1' aria-hidden='true' data-icon='K'></div> |
125 |
<input type='text' readonly='readonly' value='snf-network-full [K]' /> |
126 |
</div>
|
127 |
<div class='glyph'> |
128 |
<div class='fs1' aria-hidden='true' data-icon='T'></div> |
129 |
<input type='text' readonly='readonly' value='snf-network-create-outline [T]' /> |
130 |
</div>
|
131 |
<div class='glyph'> |
132 |
<div class='fs1' aria-hidden='true' data-icon='U'></div> |
133 |
<input type='text' readonly='readonly' value='snf-network-create-full [U]' /> |
134 |
</div>
|
135 |
<div class='glyph'> |
136 |
<div class='fs1' aria-hidden='true' data-icon='7'></div> |
137 |
<input type='text' readonly='readonly' value='snf-network-broken-1-outline [7]' /> |
138 |
</div>
|
139 |
<div class='glyph'> |
140 |
<div class='fs1' aria-hidden='true' data-icon='V'></div> |
141 |
<input type='text' readonly='readonly' value='snf-network-broken-1-full [V]' /> |
142 |
</div>
|
143 |
<div class='glyph'> |
144 |
<div class='fs1' aria-hidden='true' data-icon='8'></div> |
145 |
<input type='text' readonly='readonly' value='snf-network-broken-2-outline [8]' /> |
146 |
</div>
|
147 |
<div class='glyph'> |
148 |
<div class='fs1' aria-hidden='true' data-icon='W'></div> |
149 |
<input type='text' readonly='readonly' value='snf-network-broken-2-full [W]' /> |
150 |
</div>
|
151 |
<div class='glyph'> |
152 |
<div class='fs1' aria-hidden='true' data-icon='w'></div> |
153 |
<input type='text' readonly='readonly' value='snf-pc-outline [w]' /> |
154 |
</div>
|
155 |
<div class='glyph'> |
156 |
<div class='fs1' aria-hidden='true' data-icon='x'></div> |
157 |
<input type='text' readonly='readonly' value='snf-pc-full [x]' /> |
158 |
</div>
|
159 |
<div class='glyph'> |
160 |
<div class='fs1' aria-hidden='true' data-icon='S'></div> |
161 |
<input type='text' readonly='readonly' value='snf-pc-create-full [S]' /> |
162 |
</div>
|
163 |
<div class='glyph'> |
164 |
<div class='fs1' aria-hidden='true' data-icon='9'></div> |
165 |
<input type='text' readonly='readonly' value='snf-pc-broken-outline [9]' /> |
166 |
</div>
|
167 |
<div class='glyph'> |
168 |
<div class='fs1' aria-hidden='true' data-icon='X'></div> |
169 |
<input type='text' readonly='readonly' value='snf-pc-broken-full [X]' /> |
170 |
</div>
|
171 |
<div class='glyph'> |
172 |
<div class='fs1' aria-hidden='true' data-icon='!'></div> |
173 |
<input type='text' readonly='readonly' value='snf-pc-reboot-outline [!]' /> |
174 |
</div>
|
175 |
<div class='glyph'> |
176 |
<div class='fs1' aria-hidden='true' data-icon='Y'></div> |
177 |
<input type='text' readonly='readonly' value='snf-pc-reboot-full [Y]' /> |
178 |
</div>
|
179 |
<div class='glyph'> |
180 |
<div class='fs1' aria-hidden='true' data-icon='@'></div> |
181 |
<input type='text' readonly='readonly' value='snf-pc-switch-outline [@]' /> |
182 |
</div>
|
183 |
<div class='glyph'> |
184 |
<div class='fs1' aria-hidden='true' data-icon='Z'></div> |
185 |
<input type='text' readonly='readonly' value='snf-pc-switch-full [Z]' /> |
186 |
</div>
|
187 |
<div class='glyph'> |
188 |
<div class='fs1' aria-hidden='true' data-icon='u'></div> |
189 |
<input type='text' readonly='readonly' value='snf-volume-outline [u]' /> |
190 |
</div>
|
191 |
<div class='glyph'> |
192 |
<div class='fs1' aria-hidden='true' data-icon='O'></div> |
193 |
<input type='text' readonly='readonly' value='snf-volume-full [O]' /> |
194 |
</div>
|
195 |
<div class='glyph'> |
196 |
<div class='fs1' aria-hidden='true' data-icon='6'></div> |
197 |
<input type='text' readonly='readonly' value='snf-volume-create-full [6]' /> |
198 |
</div>
|
199 |
<div class='glyph'> |
200 |
<div class='fs1' aria-hidden='true' data-icon='0'></div> |
201 |
<input type='text' readonly='readonly' value='snf-volume-broken-outline [0]' /> |
202 |
</div>
|
203 |
<div class='glyph'> |
204 |
<div class='fs1' aria-hidden='true' data-icon='y'></div> |
205 |
<input type='text' readonly='readonly' value='snf-pithos-outline [y]' /> |
206 |
</div>
|
207 |
<div class='glyph'> |
208 |
<div class='fs1' aria-hidden='true' data-icon='5'></div> |
209 |
<input type='text' readonly='readonly' value='snf-pithos-full [5]' /> |
210 |
</div>
|
211 |
<div class='glyph'> |
212 |
<div class='fs1' aria-hidden='true' data-icon='z'></div> |
213 |
<input type='text' readonly='readonly' value='snf-dashboard-outline [z]' /> |
214 |
</div>
|
215 |
<div class='glyph'> |
216 |
<div class='fs1' aria-hidden='true' data-icon='E'></div> |
217 |
<input type='text' readonly='readonly' value='snf-chip-outline [E]' /> |
218 |
</div>
|
219 |
<div class='glyph'> |
220 |
<div class='fs1' aria-hidden='true' data-icon='3'></div> |
221 |
<input type='text' readonly='readonly' value='snf-chip-full [3]' /> |
222 |
</div>
|
223 |
<div class='glyph'> |
224 |
<div class='fs1' aria-hidden='true' data-icon='F'></div> |
225 |
<input type='text' readonly='readonly' value='snf-lock-closed-full [F]' /> |
226 |
</div>
|
227 |
<div class='glyph'> |
228 |
<div class='fs1' aria-hidden='true' data-icon='G'></div> |
229 |
<input type='text' readonly='readonly' value='snf-lock-open-full [G]' /> |
230 |
</div>
|
231 |
<div class='glyph'> |
232 |
<div class='fs1' aria-hidden='true' data-icon='H'></div> |
233 |
<input type='text' readonly='readonly' value='snf-router-outline [H]' /> |
234 |
</div>
|
235 |
<div class='glyph'> |
236 |
<div class='fs1' aria-hidden='true' data-icon='2'></div> |
237 |
<input type='text' readonly='readonly' value='snf-router-full [2]' /> |
238 |
</div>
|
239 |
<div class='glyph'> |
240 |
<div class='fs1' aria-hidden='true' data-icon='I'></div> |
241 |
<input type='text' readonly='readonly' value='snf-www [I]' /> |
242 |
</div>
|
243 |
<div class='glyph'> |
244 |
<div class='fs1' aria-hidden='true' data-icon='J'></div> |
245 |
<input type='text' readonly='readonly' value='snf-ram-outline [J]' /> |
246 |
</div>
|
247 |
<div class='glyph'> |
248 |
<div class='fs1' aria-hidden='true' data-icon='R'></div> |
249 |
<input type='text' readonly='readonly' value='snf-ram-full [R]' /> |
250 |
</div>
|
251 |
<div class='glyph'> |
252 |
<div class='fs1' aria-hidden='true' data-icon='e'></div> |
253 |
<input type='text' readonly='readonly' value='snf-snapshot-outline [e]' /> |
254 |
</div>
|
255 |
<div class='glyph'> |
256 |
<div class='fs1' aria-hidden='true' data-icon='N'></div> |
257 |
<input type='text' readonly='readonly' value='snf-snapshot-full [N]' /> |
258 |
</div>
|
259 |
<div class='glyph'> |
260 |
<div class='fs1' aria-hidden='true' data-icon='f'></div> |
261 |
<input type='text' readonly='readonly' value='snf-image-outline [f]' /> |
262 |
</div>
|
263 |
<div class='glyph'> |
264 |
<div class='fs1' aria-hidden='true' data-icon='Q'></div> |
265 |
<input type='text' readonly='readonly' value='snf-image-full [Q]' /> |
266 |
</div>
|
267 |
<div class='glyph'> |
268 |
<div class='fs1' aria-hidden='true' data-icon='m'></div> |
269 |
<input type='text' readonly='readonly' value='snf-plus-outline [m]' /> |
270 |
</div>
|
271 |
<div class='glyph'> |
272 |
<div class='fs1' aria-hidden='true' data-icon='4'></div> |
273 |
<input type='text' readonly='readonly' value='snf-plus-full [4]' /> |
274 |
</div>
|
275 |
<div class='glyph'> |
276 |
<div class='fs1' aria-hidden='true' data-icon='P'></div> |
277 |
<input type='text' readonly='readonly' value='snf-nic-outline [P]' /> |
278 |
</div>
|
279 |
<div class='glyph'> |
280 |
<div class='fs1' aria-hidden='true' data-icon='r'></div> |
281 |
<input type='text' readonly='readonly' value='snf-nic-full [r]' /> |
282 |
</div>
|
283 |
<div class='glyph'> |
284 |
<div class='fs1' aria-hidden='true' data-icon='#'></div> |
285 |
<input type='text' readonly='readonly' value='snf-key-outline [#]' /> |
286 |
</div>
|
287 |
<div class='glyph'> |
288 |
<div class='fs1' aria-hidden='true' data-icon='1'></div> |
289 |
<input type='text' readonly='readonly' value='snf-key-full [1]' /> |
290 |
</div>
|
291 |
</section>
|
292 |
|
293 |
<section>
|
294 |
<h2>checkboxes - radiobuttons</h2> |
295 |
<div class='glyph'> |
296 |
<div class='fs1' aria-hidden='true' data-icon='a'></div> |
297 |
<input type='text' readonly='readonly' value='snf-checkbox-unchecked [a]' /> |
298 |
</div>
|
299 |
<div class='glyph'> |
300 |
<div class='fs1' aria-hidden='true' data-icon='b'></div> |
301 |
<input type='text' readonly='readonly' value='snf-checkbox-checked [b]' /> |
302 |
</div>
|
303 |
<div class='glyph'> |
304 |
<div class='fs1' aria-hidden='true' data-icon='C'></div> |
305 |
<input type='text' readonly='readonly' value='snf-radio-unchecked [C]' /> |
306 |
</div>
|
307 |
<div class='glyph'> |
308 |
<div class='fs1' aria-hidden='true' data-icon='B'></div> |
309 |
<input type='text' readonly='readonly' value='snf-radio-checked [B]' /> |
310 |
</div>
|
311 |
</section>
|
312 |
|
313 |
<section>
|
314 |
<h2>close - cancel - remove</h2> |
315 |
<div class='glyph'> |
316 |
<div class='fs1' aria-hidden='true' data-icon='D'></div> |
317 |
<input type='text' readonly='readonly' value='snf-close [D]' /> |
318 |
</div>
|
319 |
<div class='glyph'> |
320 |
<div class='fs1' aria-hidden='true' data-icon='c'></div> |
321 |
<input type='text' readonly='readonly' value='snf-cancel-circled [c]' /> |
322 |
</div>
|
323 |
<div class='glyph'> |
324 |
<div class='fs1' aria-hidden='true' data-icon='n'></div> |
325 |
<input type='text' readonly='readonly' value='snf-minus-sign [n]' /> |
326 |
</div>
|
327 |
<div class='glyph'> |
328 |
<div class='fs1' aria-hidden='true' data-icon='j'></div> |
329 |
<input type='text' readonly='readonly' value='snf-ban-circle [j]' /> |
330 |
</div>
|
331 |
<div class='glyph'> |
332 |
<div class='fs1' aria-hidden='true' data-icon='$'></div> |
333 |
<input type='text' readonly='readonly' value='snf-trash-outline [$]' /> |
334 |
</div>
|
335 |
<div class='glyph'> |
336 |
<div class='fs1' aria-hidden='true' data-icon='='></div> |
337 |
<input type='text' readonly='readonly' value='snf-trash-full [=]' /> |
338 |
</div>
|
339 |
</section>
|
340 |
|
341 |
<section>
|
342 |
<h2>ok - confirm</h2> |
343 |
<div class='glyph'> |
344 |
<div class='fs1' aria-hidden='true' data-icon='l'></div> |
345 |
<input type='text' readonly='readonly' value='snf-ok-sign [l]' /> |
346 |
</div>
|
347 |
<div class='glyph'> |
348 |
<div class='fs1' aria-hidden='true' data-icon='h'></div> |
349 |
<input type='text' readonly='readonly' value='snf-ok [h]' /> |
350 |
</div>
|
351 |
</section>
|
352 |
|
353 |
<section>
|
354 |
<h2>show - preview - view type</h2> |
355 |
<div class='glyph'> |
356 |
<div class='fs1' aria-hidden='true' data-icon='A'></div> |
357 |
<input type='text' readonly='readonly' value='snf-eye [A]' /> |
358 |
</div>
|
359 |
<div class='glyph'> |
360 |
<div class='fs1' aria-hidden='true' data-icon='t'></div> |
361 |
<input type='text' readonly='readonly' value='ssnf-gridview [t]' /> |
362 |
</div>
|
363 |
<div class='glyph'> |
364 |
<div class='fs1' aria-hidden='true' data-icon='s'></div> |
365 |
<input type='text' readonly='readonly' value='snf-listview [s]' /> |
366 |
</div>
|
367 |
</section>
|
368 |
|
369 |
<section>
|
370 |
<h2>arrows</h2> |
371 |
<div class='glyph'> |
372 |
<div class='fs1' aria-hidden='true' data-icon='L'></div> |
373 |
<input type='text' readonly='readonly' value='snf-arrow-up [L]' /> |
374 |
</div>
|
375 |
<div class='glyph'> |
376 |
<div class='fs1' aria-hidden='true' data-icon='M'></div> |
377 |
<input type='text' readonly='readonly' value='snf-arrow-down [M]' /> |
378 |
</div>
|
379 |
<div class='glyph'> |
380 |
<div class='fs1' aria-hidden='true' data-icon='_'></div> |
381 |
<input type='text' readonly='readonly' value='snf-arrow-left-small-full [_]' /> |
382 |
</div>
|
383 |
<div class='glyph'> |
384 |
<div class='fs1' aria-hidden='true' data-icon='-'></div> |
385 |
<input type='text' readonly='readonly' value='snf-arrow-right-small-full [-]' /> |
386 |
</div>
|
387 |
<div class='glyph'> |
388 |
<div class='fs1' aria-hidden='true' data-icon='('></div> |
389 |
<input type='text' readonly='readonly' value='snf-upload-full [()]' /> |
390 |
</div>
|
391 |
<div class='glyph'> |
392 |
<div class='fs1' aria-hidden='true' data-icon='%'></div> |
393 |
<input type='text' readonly='readonly' value='snf-download-full [%]' /> |
394 |
</div>
|
395 |
<div class='glyph'> |
396 |
<div class='fs1' aria-hidden='true' data-icon=')'></div> |
397 |
<input type='text' readonly='readonly' value='snf-refresh-outline [)]' /> |
398 |
</div>
|
399 |
</section>
|
400 |
|
401 |
<section>
|
402 |
<h2>misc</h2> |
403 |
<div class='glyph'> |
404 |
<div class='fs1' aria-hidden='true' data-icon='q'></div> |
405 |
<input type='text' readonly='readonly' value='snf-edit [q]' /> |
406 |
</div>
|
407 |
<div class='glyph'> |
408 |
<div class='fs1' aria-hidden='true' data-icon='d'></div> |
409 |
<input type='text' readonly='readonly' value='snf-search [d]' /> |
410 |
</div>
|
411 |
<div class='glyph'> |
412 |
<div class='fs1' aria-hidden='true' data-icon='g'></div> |
413 |
<input type='text' readonly='readonly' value='snf-twitter-logo [g]' /> |
414 |
</div>
|
415 |
<div class='glyph'> |
416 |
<div class='fs1' aria-hidden='true' data-icon='i'></div> |
417 |
<input type='text' readonly='readonly' value='snf-switch [i]' /> |
418 |
</div>
|
419 |
<div class='glyph'> |
420 |
<div class='fs1' aria-hidden='true' data-icon='k'></div> |
421 |
<input type='text' readonly='readonly' value='snf-thunder-full [k]' /> |
422 |
</div>
|
423 |
<div class='glyph'> |
424 |
<div class='fs1' aria-hidden='true' data-icon='o'></div> |
425 |
<input type='text' readonly='readonly' value='snf-info-outline [o]' /> |
426 |
</div>
|
427 |
<div class='glyph'> |
428 |
<div class='fs1' aria-hidden='true' data-icon='p'></div> |
429 |
<input type='text' readonly='readonly' value='snf-info-full [p]' /> |
430 |
</div>
|
431 |
<div class='glyph'> |
432 |
<div class='fs1' aria-hidden='true' data-icon='*'></div> |
433 |
<input type='text' readonly='readonly' value='snf-person-outline [*]' /> |
434 |
</div>
|
435 |
<div class='glyph'> |
436 |
<div class='fs1' aria-hidden='true' data-icon='?'></div> |
437 |
<input type='text' readonly='readonly' value='snf-copy-outline [?]' /> |
438 |
</div>
|
439 |
<div class='glyph'> |
440 |
<div class='fs1' aria-hidden='true' data-icon= '"'></div> |
441 |
<input type='text' readonly='readonly' value='snf-copy-full ["]' /> |
442 |
</div>
|
443 |
<div class='glyph'> |
444 |
<div class='fs1' aria-hidden='true' data-icon='&'></div> |
445 |
<input type='text' readonly='readonly' value='snf-link-outline [&]' /> |
446 |
</div>
|
447 |
<div class='glyph aux'> |
448 |
<div class='fs1' aria-hidden='true' data-icon-aux='f'></div> |
449 |
<input type='text' readonly='readonly' value='snf-folder-outline [f]' /> |
450 |
</div>
|
451 |
<div class='glyph aux'> |
452 |
<div class='fs1' aria-hidden='true' data-icon-aux='F'></div> |
453 |
<input type='text' readonly='readonly' value='snf-folder-full [F]' /> |
454 |
</div>
|
455 |
<div class='glyph aux'> |
456 |
<div class='fs1' aria-hidden='true' data-icon-aux='a'></div> |
457 |
<input type='text' readonly='readonly' value='snf-folder-create-outline [a]' /> |
458 |
</div>
|
459 |
<div class='glyph aux'> |
460 |
<div class='fs1' aria-hidden='true' data-icon-aux= 'A'></div> |
461 |
<input type='text' readonly='readonly' value='snf-folder-create-full [A]' /> |
462 |
</div>
|
463 |
<div class='glyph aux'> |
464 |
<div class='fs1' aria-hidden='true' data-icon-aux='e'></div> |
465 |
<input type='text' readonly='readonly' value='snf-folder-move-outline [e]' /> |
466 |
</div>
|
467 |
<div class='glyph aux'> |
468 |
<div class='fs1' aria-hidden='true' data-icon-aux='E'></div> |
469 |
<input type='text' readonly='readonly' value='snf-folder-move-full [E]' /> |
470 |
</div>
|
471 |
<div class='glyph aux'> |
472 |
<div class='fs1' aria-hidden='true' data-icon-aux='c'></div> |
473 |
<input type='text' readonly='readonly' value='snf-shared-by-me-outline [c]' /> |
474 |
</div>
|
475 |
<div class='glyph aux'> |
476 |
<div class='fs1' aria-hidden='true' data-icon-aux='C'></div> |
477 |
<input type='text' readonly='readonly' value='snf-shared-by-me-full [C]' /> |
478 |
</div>
|
479 |
<div class='glyph aux'> |
480 |
<div class='fs1' aria-hidden='true' data-icon-aux='d'></div> |
481 |
<input type='text' readonly='readonly' value='snf-shared-to-me-outline [d]' /> |
482 |
</div>
|
483 |
<div class='glyph aux'> |
484 |
<div class='fs1' aria-hidden='true' data-icon-aux='D'></div> |
485 |
<input type='text' readonly='readonly' value='snf-shared-to-me-full [D]' /> |
486 |
</div>
|
487 |
</section>
|
488 |
|
489 |
</section>
|
490 |
</div>
|
491 |
</body>
|
492 |
</html>
|