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

Last change on this file since 29557 was 29557, checked in by mistic100, 10 years ago

use icon-ok for forced multi sizes + icon-zoom-in for preview boxes
File size: 15.6 KB
RevLine 
[23029]1<!DOCTYPE html>
2<html>
[28497]3  <head><!--[if lt IE 9]><script language="javascript" type="text/javascript" src="//html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
4    <meta charset="UTF-8"><style>/*
[23029]5 * Bootstrap v2.2.1
6 *
7 * Copyright 2012 Twitter, Inc
8 * Licensed under the Apache License v2.0
9 * http://www.apache.org/licenses/LICENSE-2.0
10 *
11 * Designed and built with all the love in the world @twitter by @mdo and @fat.
12 */
13.clearfix {
14  *zoom: 1;
15}
16.clearfix:before,
17.clearfix:after {
18  display: table;
19  content: "";
20  line-height: 0;
21}
22.clearfix:after {
23  clear: both;
24}
25html {
26  font-size: 100%;
27  -webkit-text-size-adjust: 100%;
28  -ms-text-size-adjust: 100%;
29}
30a:focus {
31  outline: thin dotted #333;
32  outline: 5px auto -webkit-focus-ring-color;
33  outline-offset: -2px;
34}
35a:hover,
36a:active {
37  outline: 0;
38}
39button,
40input,
41select,
42textarea {
43  margin: 0;
44  font-size: 100%;
45  vertical-align: middle;
46}
47button,
48input {
49  *overflow: visible;
50  line-height: normal;
51}
52button::-moz-focus-inner,
53input::-moz-focus-inner {
54  padding: 0;
55  border: 0;
56}
57body {
58  margin: 0;
59  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
60  font-size: 14px;
61  line-height: 20px;
62  color: #333;
63  background-color: #fff;
64}
65a {
66  color: #08c;
67  text-decoration: none;
68}
69a:hover {
70  color: #005580;
71  text-decoration: underline;
72}
73.row {
74  margin-left: -20px;
75  *zoom: 1;
76}
77.row:before,
78.row:after {
79  display: table;
80  content: "";
81  line-height: 0;
82}
83.row:after {
84  clear: both;
85}
86[class*="span"] {
87  float: left;
88  min-height: 1px;
89  margin-left: 20px;
90}
91.container,
92.navbar-static-top .container,
93.navbar-fixed-top .container,
94.navbar-fixed-bottom .container {
95  width: 940px;
96}
97.span12 {
98  width: 940px;
99}
100.span11 {
101  width: 860px;
102}
103.span10 {
104  width: 780px;
105}
106.span9 {
107  width: 700px;
108}
109.span8 {
110  width: 620px;
111}
112.span7 {
113  width: 540px;
114}
115.span6 {
116  width: 460px;
117}
118.span5 {
119  width: 380px;
120}
121.span4 {
122  width: 300px;
123}
124.span3 {
125  width: 220px;
126}
127.span2 {
128  width: 140px;
129}
130.span1 {
131  width: 60px;
132}
133[class*="span"].pull-right,
134.row-fluid [class*="span"].pull-right {
135  float: right;
136}
137.container {
138  margin-right: auto;
139  margin-left: auto;
140  *zoom: 1;
141}
142.container:before,
143.container:after {
144  display: table;
145  content: "";
146  line-height: 0;
147}
148.container:after {
149  clear: both;
150}
151p {
152  margin: 0 0 10px;
153}
154.lead {
155  margin-bottom: 20px;
156  font-size: 21px;
157  font-weight: 200;
158  line-height: 30px;
159}
160small {
161  font-size: 85%;
162}
163h1 {
164  margin: 10px 0;
165  font-family: inherit;
166  font-weight: bold;
167  line-height: 20px;
168  color: inherit;
169  text-rendering: optimizelegibility;
170}
171h1 small {
172  font-weight: normal;
173  line-height: 1;
174  color: #999;
175}
176h1 {
177  line-height: 40px;
178}
179h1 {
180  font-size: 38.5px;
181}
182h1 small {
183  font-size: 24.5px;
184}
185body {
186  margin-top: 90px;
187}
188.header {
189  position: fixed;
190  top: 0;
191  left: 50%;
192  margin-left: -480px;
193  background-color: #fff;
194  border-bottom: 1px solid #ddd;
195  padding-top: 10px;
196  z-index: 10;
197}
198.footer {
199  color: #ddd;
200  font-size: 12px;
201  text-align: center;
202  margin-top: 20px;
203}
204.footer a {
205  color: #ccc;
206  text-decoration: underline;
207}
208.the-icons {
209  font-size: 14px;
210  line-height: 24px;
211}
212.switch {
213  position: absolute;
214  right: 0;
215  bottom: 10px;
216  color: #666;
217}
218.switch input {
219  margin-right: 0.3em;
220}
221.codesOn .i-name {
222  display: none;
223}
224.codesOn .i-code {
225  display: inline;
226}
227.i-code {
228  display: none;
229}
230</style>
231    <link rel="stylesheet" href="css/fontello.css">
[28497]232    <link rel="stylesheet" href="css/animation.css"><!--[if IE 7]><link rel="stylesheet" href="css/fontello-ie7.css"><![endif]-->
[23029]233    <script>
234      function toggleCodes(on) {
235        var obj = document.getElementById('icons');
236       
237        if (on) {
238          obj.className += ' codesOn';
239        } else {
240          obj.className = obj.className.replace(' codesOn', '');
241        }
242      }
243     
244    </script>
245  </head>
246  <body>
247    <div class="container header">
248      <h1>
249        fontello
250         <small>font demo</small>
251      </h1>
252      <label class="switch">
253        <input type="checkbox" onclick="toggleCodes(this.checked)">show codes
254      </label>
255    </div>
256    <div id="icons" class="container">
257      <div class="row">
258        <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>
[25752]259        <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>
[29557]260        <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>
261        <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>
[23382]262      </div>
263      <div class="row">
[29557]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: 0x270e" class="the-icons span3"><i class="icon-pencil"></i> <span class="i-name">icon-pencil</span><span class="i-code">0x270e</span></div>
[26230]266        <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>
[29557]267        <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>
[23029]268      </div>
269      <div class="row">
[29557]270        <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>
[26230]271        <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>
[25457]272        <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>
[26230]273        <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>
[23357]274      </div>
275      <div class="row">
[25457]276        <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>
[29557]277        <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>
278        <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>
279        <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>
[23029]280      </div>
281      <div class="row">
[29557]282        <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>
283        <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>
[25752]284        <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>
285        <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>
[23029]286      </div>
287      <div class="row">
[29557]288        <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>
289        <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>
290        <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>
291        <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>
[23029]292      </div>
293      <div class="row">
[29557]294        <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>
295        <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>
296        <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>
297        <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>
[25457]298      </div>
299      <div class="row">
[25752]300        <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>
[29557]301        <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>
302        <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>
303        <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>
[25748]304      </div>
305      <div class="row">
[29557]306        <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>
[23382]307        <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>
[25748]308        <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>
[29557]309        <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>
[23382]310      </div>
311      <div class="row">
[25457]312        <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>
[29557]313        <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>
314        <div title="Code: 0xe818" class="the-icons span3"><i class="icon-calendar"></i> <span class="i-name">icon-calendar</span><span class="i-code">0xe818</span></div>
315        <div title="Code: 0xe819" class="the-icons span3"><i class="icon-ok"></i> <span class="i-name">icon-ok</span><span class="i-code">0xe819</span></div>
[25457]316      </div>
317      <div class="row">
[29557]318        <div title="Code: 0xe81a" class="the-icons span3"><i class="icon-help-circled"></i> <span class="i-name">icon-help-circled</span><span class="i-code">0xe81a</span></div>
319        <div title="Code: 0xe81b" class="the-icons span3"><i class="icon-logout"></i> <span class="i-name">icon-logout</span><span class="i-code">0xe81b</span></div>
320        <div title="Code: 0xe81c" class="the-icons span3"><i class="icon-flag"></i> <span class="i-name">icon-flag</span><span class="i-code">0xe81c</span></div>
321        <div title="Code: 0xe81d" class="the-icons span3"><i class="icon-spin6 animate-spin"></i> <span class="i-name">icon-spin6</span><span class="i-code">0xe81d</span></div>
[23357]322      </div>
323      <div class="row">
[29557]324        <div title="Code: 0xe81e" class="the-icons span3"><i class="icon-hourglass"></i> <span class="i-name">icon-hourglass</span><span class="i-code">0xe81e</span></div>
325        <div title="Code: 0xe81f" class="the-icons span3"><i class="icon-check"></i> <span class="i-name">icon-check</span><span class="i-code">0xe81f</span></div>
326        <div title="Code: 0xe820" class="the-icons span3"><i class="icon-check-empty"></i> <span class="i-name">icon-check-empty</span><span class="i-code">0xe820</span></div>
327        <div title="Code: 0xe821" class="the-icons span3"><i class="icon-cancel-circled"></i> <span class="i-name">icon-cancel-circled</span><span class="i-code">0xe821</span></div>
328      </div>
329      <div class="row">
330        <div title="Code: 0xe822" class="the-icons span3"><i class="icon-cancel"></i> <span class="i-name">icon-cancel</span><span class="i-code">0xe822</span></div>
331        <div title="Code: 0xe823" class="the-icons span3"><i class="icon-plus"></i> <span class="i-name">icon-plus</span><span class="i-code">0xe823</span></div>
332        <div title="Code: 0xe824" class="the-icons span3"><i class="icon-ok-circled"></i> <span class="i-name">icon-ok-circled</span><span class="i-code">0xe824</span></div>
333        <div title="Code: 0xe827" class="the-icons span3"><i class="icon-zoom-in"></i> <span class="i-name">icon-zoom-in</span><span class="i-code">0xe827</span></div>
334      </div>
335      <div class="row">
336        <div title="Code: 0xe828" class="the-icons span3"><i class="icon-zoom-out"></i> <span class="i-name">icon-zoom-out</span><span class="i-code">0xe828</span></div>
337        <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>
338        <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>
339        <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>
340      </div>
341      <div class="row">
342        <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>
343        <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>
344        <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>
345        <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>
346      </div>
347      <div class="row">
[25752]348        <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>
[29557]349        <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>
350        <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>
351        <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>
[25457]352      </div>
[29557]353      <div class="row">
354        <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>
355        <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>
356      </div>
[23029]357    </div>
358    <div class="container footer">Generated by <a href="http://fontello.com">fontello.com</a></div>
359  </body>
360</html>
Note: See TracBrowser for help on using the repository browser.