source: trunk/admin/themes/default/fontello/demo.html @ 25457

Last change on this file since 25457 was 25457, checked in by plg, 10 years ago

feature 1668: visual enhancement for user manager redesign. Appropriate
(fontello) icons for open/close user details, appropriate colors for
DataTables.
File size: 13.4 KB
Line 
1<!DOCTYPE html>
2<html>
3  <head>
4    <!--[if lt IE 9]>
5    <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
6    <![endif]-->
7    <meta charset="UTF-8"><style type="text/css">/*
8 * Bootstrap v2.2.1
9 *
10 * Copyright 2012 Twitter, Inc
11 * Licensed under the Apache License v2.0
12 * http://www.apache.org/licenses/LICENSE-2.0
13 *
14 * Designed and built with all the love in the world @twitter by @mdo and @fat.
15 */
16.clearfix {
17  *zoom: 1;
18}
19.clearfix:before,
20.clearfix:after {
21  display: table;
22  content: "";
23  line-height: 0;
24}
25.clearfix:after {
26  clear: both;
27}
28html {
29  font-size: 100%;
30  -webkit-text-size-adjust: 100%;
31  -ms-text-size-adjust: 100%;
32}
33a:focus {
34  outline: thin dotted #333;
35  outline: 5px auto -webkit-focus-ring-color;
36  outline-offset: -2px;
37}
38a:hover,
39a:active {
40  outline: 0;
41}
42button,
43input,
44select,
45textarea {
46  margin: 0;
47  font-size: 100%;
48  vertical-align: middle;
49}
50button,
51input {
52  *overflow: visible;
53  line-height: normal;
54}
55button::-moz-focus-inner,
56input::-moz-focus-inner {
57  padding: 0;
58  border: 0;
59}
60body {
61  margin: 0;
62  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
63  font-size: 14px;
64  line-height: 20px;
65  color: #333;
66  background-color: #fff;
67}
68a {
69  color: #08c;
70  text-decoration: none;
71}
72a:hover {
73  color: #005580;
74  text-decoration: underline;
75}
76.row {
77  margin-left: -20px;
78  *zoom: 1;
79}
80.row:before,
81.row:after {
82  display: table;
83  content: "";
84  line-height: 0;
85}
86.row:after {
87  clear: both;
88}
89[class*="span"] {
90  float: left;
91  min-height: 1px;
92  margin-left: 20px;
93}
94.container,
95.navbar-static-top .container,
96.navbar-fixed-top .container,
97.navbar-fixed-bottom .container {
98  width: 940px;
99}
100.span12 {
101  width: 940px;
102}
103.span11 {
104  width: 860px;
105}
106.span10 {
107  width: 780px;
108}
109.span9 {
110  width: 700px;
111}
112.span8 {
113  width: 620px;
114}
115.span7 {
116  width: 540px;
117}
118.span6 {
119  width: 460px;
120}
121.span5 {
122  width: 380px;
123}
124.span4 {
125  width: 300px;
126}
127.span3 {
128  width: 220px;
129}
130.span2 {
131  width: 140px;
132}
133.span1 {
134  width: 60px;
135}
136[class*="span"].pull-right,
137.row-fluid [class*="span"].pull-right {
138  float: right;
139}
140.container {
141  margin-right: auto;
142  margin-left: auto;
143  *zoom: 1;
144}
145.container:before,
146.container:after {
147  display: table;
148  content: "";
149  line-height: 0;
150}
151.container:after {
152  clear: both;
153}
154p {
155  margin: 0 0 10px;
156}
157.lead {
158  margin-bottom: 20px;
159  font-size: 21px;
160  font-weight: 200;
161  line-height: 30px;
162}
163small {
164  font-size: 85%;
165}
166h1 {
167  margin: 10px 0;
168  font-family: inherit;
169  font-weight: bold;
170  line-height: 20px;
171  color: inherit;
172  text-rendering: optimizelegibility;
173}
174h1 small {
175  font-weight: normal;
176  line-height: 1;
177  color: #999;
178}
179h1 {
180  line-height: 40px;
181}
182h1 {
183  font-size: 38.5px;
184}
185h1 small {
186  font-size: 24.5px;
187}
188body {
189  margin-top: 90px;
190}
191.header {
192  position: fixed;
193  top: 0;
194  left: 50%;
195  margin-left: -480px;
196  background-color: #fff;
197  border-bottom: 1px solid #ddd;
198  padding-top: 10px;
199  z-index: 10;
200}
201.footer {
202  color: #ddd;
203  font-size: 12px;
204  text-align: center;
205  margin-top: 20px;
206}
207.footer a {
208  color: #ccc;
209  text-decoration: underline;
210}
211.the-icons {
212  font-size: 14px;
213  line-height: 24px;
214}
215.switch {
216  position: absolute;
217  right: 0;
218  bottom: 10px;
219  color: #666;
220}
221.switch input {
222  margin-right: 0.3em;
223}
224.codesOn .i-name {
225  display: none;
226}
227.codesOn .i-code {
228  display: inline;
229}
230.i-code {
231  display: none;
232}
233</style>
234    <link rel="stylesheet" href="css/fontello.css">
235    <link rel="stylesheet" href="css/animation.css">
236    <!--[if IE 7]>
237    <link rel="stylesheet" href="css/fontello-ie7.css">
238    <![endif]-->
239    <script>
240      function toggleCodes(on) {
241        var obj = document.getElementById('icons');
242       
243        if (on) {
244          obj.className += ' codesOn';
245        } else {
246          obj.className = obj.className.replace(' codesOn', '');
247        }
248      }
249     
250    </script>
251  </head>
252  <body>
253    <div class="container header">
254      <h1>
255        fontello
256         <small>font demo</small>
257      </h1>
258      <label class="switch">
259        <input type="checkbox" onclick="toggleCodes(this.checked)">show codes
260      </label>
261    </div>
262    <div id="icons" class="container">
263      <div class="row">
264        <div title="Code: 0x2709" class="the-icons span3"><i class="icon-mail"></i> <span class="i-name">icon-mail</span><span class="i-code">0x2709</span></div>
265        <div title="Code: 0xe0ad" class="the-icons span3"><i class="icon-asl"></i> <span class="i-name">icon-asl</span><span class="i-code">0xe0ad</span></div>
266        <div title="Code: 0x2605" class="the-icons span3"><i class="icon-star"></i> <span class="i-name">icon-star</span><span class="i-code">0x2605</span></div>
267        <div title="Code: 0x2606" class="the-icons span3"><i class="icon-star-empty"></i> <span class="i-name">icon-star-empty</span><span class="i-code">0x2606</span></div>
268      </div>
269      <div class="row">
270        <div title="Code: 0x1f464" class="the-icons span3"><i class="icon-user"></i> <span class="i-name">icon-user</span><span class="i-code">0x1f464</span></div>
271        <div title="Code: 0x1f304" class="the-icons span3"><i class="icon-picture"></i> <span class="i-name">icon-picture</span><span class="i-code">0x1f304</span></div>
272        <div title="Code: 0x2795" class="the-icons span3"><i class="icon-plus-circled"></i> <span class="i-name">icon-plus-circled</span><span class="i-code">0x2795</span></div>
273        <div title="Code: 0x1f517" class="the-icons span3"><i class="icon-link"></i> <span class="i-name">icon-link</span><span class="i-code">0x1f517</span></div>
274      </div>
275      <div class="row">
276        <div title="Code: 0x1f512" class="the-icons span3"><i class="icon-lock"></i> <span class="i-name">icon-lock</span><span class="i-code">0x1f512</span></div>
277        <div title="Code: 0xe70a" class="the-icons span3"><i class="icon-eye"></i> <span class="i-name">icon-eye</span><span class="i-code">0xe70a</span></div>
278        <div title="Code: 0xe70d" class="the-icons span3"><i class="icon-tags"></i> <span class="i-name">icon-tags</span><span class="i-code">0xe70d</span></div>
279        <div title="Code: 0xe80a" class="the-icons span3"><i class="icon-code"></i> <span class="i-name">icon-code</span><span class="i-code">0xe80a</span></div>
280      </div>
281      <div class="row">
282        <div title="Code: 0x270e" class="the-icons span3"><i class="icon-pencil"></i> <span class="i-name">icon-pencil</span><span class="i-code">0x270e</span></div>
283        <div title="Code: 0xe720" class="the-icons span3"><i class="icon-chat"></i> <span class="i-name">icon-chat</span><span class="i-code">0xe720</span></div>
284        <div title="Code: 0xe729" class="the-icons span3"><i class="icon-trash"></i> <span class="i-name">icon-trash</span><span class="i-code">0xe729</span></div>
285        <div title="Code: 0xe806" class="the-icons span3"><i class="icon-folder-open"></i> <span class="i-name">icon-folder-open</span><span class="i-code">0xe806</span></div>
286      </div>
287      <div class="row">
288        <div title="Code: 0xe809" class="the-icons span3"><i class="icon-menu"></i> <span class="i-name">icon-menu</span><span class="i-code">0xe809</span></div>
289        <div title="Code: 0x2699" class="the-icons span3"><i class="icon-cog"></i> <span class="i-name">icon-cog</span><span class="i-code">0x2699</span></div>
290        <div title="Code: 0x26ef" class="the-icons span3"><i class="icon-cog-alt"></i> <span class="i-name">icon-cog-alt</span><span class="i-code">0x26ef</span></div>
291        <div title="Code: 0x1f527" class="the-icons span3"><i class="icon-wrench"></i> <span class="i-name">icon-wrench</span><span class="i-code">0x1f527</span></div>
292      </div>
293      <div class="row">
294        <div title="Code: 0xe73d" class="the-icons span3"><i class="icon-basket"></i> <span class="i-name">icon-basket</span><span class="i-code">0xe73d</span></div>
295        <div title="Code: 0x1f554" class="the-icons span3"><i class="icon-clock"></i> <span class="i-name">icon-clock</span><span class="i-code">0x1f554</span></div>
296        <div title="Code: 0x1f6ab" class="the-icons span3"><i class="icon-block"></i> <span class="i-name">icon-block</span><span class="i-code">0x1f6ab</span></div>
297        <div title="Code: 0xe812" class="the-icons span3"><i class="icon-move"></i> <span class="i-name">icon-move</span><span class="i-code">0xe812</span></div>
298      </div>
299      <div class="row">
300        <div title="Code: 0xe819" class="the-icons span3"><i class="icon-angle-circled-up"></i> <span class="i-name">icon-angle-circled-up</span><span class="i-code">0xe819</span></div>
301        <div title="Code: 0xe818" class="the-icons span3"><i class="icon-angle-circled-down"></i> <span class="i-name">icon-angle-circled-down</span><span class="i-code">0xe818</span></div>
302        <div title="Code: 0xf0e0" class="the-icons span3"><i class="icon-mail-alt"></i> <span class="i-name">icon-mail-alt</span><span class="i-code">0xf0e0</span></div>
303        <div title="Code: 0xe804" class="the-icons span3"><i class="icon-arrows-cw"></i> <span class="i-name">icon-arrows-cw</span><span class="i-code">0xe804</span></div>
304      </div>
305      <div class="row">
306        <div title="Code: 0x1f500" class="the-icons span3"><i class="icon-shuffle"></i> <span class="i-name">icon-shuffle</span><span class="i-code">0x1f500</span></div>
307        <div title="Code: 0xe805" class="the-icons span3"><i class="icon-exchange"></i> <span class="i-name">icon-exchange</span><span class="i-code">0xe805</span></div>
308        <div title="Code: 0xe801" class="the-icons span3"><i class="icon-signal"></i> <span class="i-name">icon-signal</span><span class="i-code">0xe801</span></div>
309        <div title="Code: 0xf125" class="the-icons span3"><i class="icon-crop"></i> <span class="i-name">icon-crop</span><span class="i-code">0xf125</span></div>
310      </div>
311      <div class="row">
312        <div title="Code: 0xf0ae" class="the-icons span3"><i class="icon-tasks"></i> <span class="i-name">icon-tasks</span><span class="i-code">0xf0ae</span></div>
313        <div title="Code: 0xf0b0" class="the-icons span3"><i class="icon-filter"></i> <span class="i-name">icon-filter</span><span class="i-code">0xf0b0</span></div>
314        <div title="Code: 0xf0e8" class="the-icons span3"><i class="icon-sitemap"></i> <span class="i-name">icon-sitemap</span><span class="i-code">0xf0e8</span></div>
315        <div title="Code: 0xe811" class="the-icons span3"><i class="icon-search"></i> <span class="i-name">icon-search</span><span class="i-code">0xe811</span></div>
316      </div>
317      <div class="row">
318        <div title="Code: 0xe80b" class="the-icons span3"><i class="icon-user-add"></i> <span class="i-name">icon-user-add</span><span class="i-code">0xe80b</span></div>
319        <div title="Code: 0xe817" class="the-icons span3"><i class="icon-info-circled-1"></i> <span class="i-name">icon-info-circled-1</span><span class="i-code">0xe817</span></div>
320        <div title="Code: 0xe80e" class="the-icons span3"><i class="icon-home"></i> <span class="i-name">icon-home</span><span class="i-code">0xe80e</span></div>
321        <div title="Code: 0xe813" class="the-icons span3"><i class="icon-upload"></i> <span class="i-name">icon-upload</span><span class="i-code">0xe813</span></div>
322      </div>
323      <div class="row">
324        <div title="Code: 0xe814" class="the-icons span3"><i class="icon-upload-cloud"></i> <span class="i-name">icon-upload-cloud</span><span class="i-code">0xe814</span></div>
325        <div title="Code: 0xe803" class="the-icons span3"><i class="icon-tools"></i> <span class="i-name">icon-tools</span><span class="i-code">0xe803</span></div>
326        <div title="Code: 0xe816" class="the-icons span3"><i class="icon-network"></i> <span class="i-name">icon-network</span><span class="i-code">0xe816</span></div>
327        <div title="Code: 0xe807" class="the-icons span3"><i class="icon-brush"></i> <span class="i-name">icon-brush</span><span class="i-code">0xe807</span></div>
328      </div>
329      <div class="row">
330        <div title="Code: 0xe800" class="the-icons span3"><i class="icon-language"></i> <span class="i-name">icon-language</span><span class="i-code">0xe800</span></div>
331        <div title="Code: 0xe815" class="the-icons span3"><i class="icon-key"></i> <span class="i-name">icon-key</span><span class="i-code">0xe815</span></div>
332        <div title="Code: 0xe808" class="the-icons span3"><i class="icon-flow-branch"></i> <span class="i-name">icon-flow-branch</span><span class="i-code">0xe808</span></div>
333        <div title="Code: 0xe7b6" class="the-icons span3"><i class="icon-puzzle"></i> <span class="i-name">icon-puzzle</span><span class="i-code">0xe7b6</span></div>
334      </div>
335      <div class="row">
336        <div title="Code: 0xe810" class="the-icons span3"><i class="icon-mail-1"></i> <span class="i-name">icon-mail-1</span><span class="i-code">0xe810</span></div>
337        <div title="Code: 0xe80f" class="the-icons span3"><i class="icon-equalizer"></i> <span class="i-name">icon-equalizer</span><span class="i-code">0xe80f</span></div>
338        <div title="Code: 0xe802" class="the-icons span3"><i class="icon-users"></i> <span class="i-name">icon-users</span><span class="i-code">0xe802</span></div>
339        <div title="Code: 0xe80d" class="the-icons span3"><i class="icon-group"></i> <span class="i-name">icon-group</span><span class="i-code">0xe80d</span></div>
340      </div>
341      <div class="row">
342        <div title="Code: 0xe80c" class="the-icons span3"><i class="icon-cw"></i> <span class="i-name">icon-cw</span><span class="i-code">0xe80c</span></div>
343      </div>
344    </div>
345    <div class="container footer">Generated by <a href="http://fontello.com">fontello.com</a></div>
346  </body>
347</html>
Note: See TracBrowser for help on using the repository browser.