demo.html (11769B)
1 <!DOCTYPE html>
2 <html>
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>/*
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 }
25 html {
26 font-size: 100%;
27 -webkit-text-size-adjust: 100%;
28 -ms-text-size-adjust: 100%;
29 }
30 a:focus {
31 outline: thin dotted #333;
32 outline: 5px auto -webkit-focus-ring-color;
33 outline-offset: -2px;
34 }
35 a:hover,
36 a:active {
37 outline: 0;
38 }
39 button,
40 input,
41 select,
42 textarea {
43 margin: 0;
44 font-size: 100%;
45 vertical-align: middle;
46 }
47 button,
48 input {
49 *overflow: visible;
50 line-height: normal;
51 }
52 button::-moz-focus-inner,
53 input::-moz-focus-inner {
54 padding: 0;
55 border: 0;
56 }
57 body {
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 }
65 a {
66 color: #08c;
67 text-decoration: none;
68 }
69 a: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 }
151 p {
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 }
160 small {
161 font-size: 85%;
162 }
163 h1 {
164 margin: 10px 0;
165 font-family: inherit;
166 font-weight: bold;
167 line-height: 20px;
168 color: inherit;
169 text-rendering: optimizelegibility;
170 }
171 h1 small {
172 font-weight: normal;
173 line-height: 1;
174 color: #999;
175 }
176 h1 {
177 line-height: 40px;
178 }
179 h1 {
180 font-size: 38.5px;
181 }
182 h1 small {
183 font-size: 24.5px;
184 }
185 body {
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 @font-face {
231 font-family: 'fontello';
232 src: url('./font/fontello.eot?32487936');
233 src: url('./font/fontello.eot?32487936#iefix') format('embedded-opentype'),
234 url('./font/fontello.woff?32487936') format('woff'),
235 url('./font/fontello.ttf?32487936') format('truetype'),
236 url('./font/fontello.svg?32487936#fontello') format('svg');
237 font-weight: normal;
238 font-style: normal;
239 }
240
241
242 .demo-icon
243 {
244 font-family: "fontello";
245 font-style: normal;
246 font-weight: normal;
247 speak: none;
248
249 display: inline-block;
250 text-decoration: inherit;
251 width: 1em;
252 margin-right: .2em;
253 text-align: center;
254 /* opacity: .8; */
255
256 /* For safety - reset parent styles, that can break glyph codes*/
257 font-variant: normal;
258 text-transform: none;
259
260 /* fix buttons height, for twitter bootstrap */
261 line-height: 1em;
262
263 /* Animation center compensation - margins should be symmetric */
264 /* remove if not needed */
265 margin-left: .2em;
266
267 /* You can be more comfortable with increased icons size */
268 /* font-size: 120%; */
269
270 /* Font smoothing. That was taken from TWBS */
271 -webkit-font-smoothing: antialiased;
272 -moz-osx-font-smoothing: grayscale;
273
274 /* Uncomment for 3D effect */
275 /* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */
276 }
277 </style>
278 <link rel="stylesheet" href="css/animation.css"><!--[if IE 7]><link rel="stylesheet" href="css/" + font.fontname + "-ie7.css"><![endif]-->
279 <script>
280 function toggleCodes(on) {
281 var obj = document.getElementById('icons');
282
283 if (on) {
284 obj.className += ' codesOn';
285 } else {
286 obj.className = obj.className.replace(' codesOn', '');
287 }
288 }
289
290 </script>
291 </head>
292 <body>
293 <div class="container header">
294 <h1>fontello <small>font demo</small></h1>
295 <label class="switch">
296 <input type="checkbox" onclick="toggleCodes(this.checked)">show codes
297 </label>
298 </div>
299 <div class="container" id="icons">
300 <div class="row">
301 <div class="the-icons span3" title="Code: 0xe800"><i class="demo-icon icon-cancel"></i> <span class="i-name">icon-cancel</span><span class="i-code">0xe800</span></div>
302 <div class="the-icons span3" title="Code: 0xe801"><i class="demo-icon icon-upload"></i> <span class="i-name">icon-upload</span><span class="i-code">0xe801</span></div>
303 <div class="the-icons span3" title="Code: 0xe802"><i class="demo-icon icon-star"></i> <span class="i-name">icon-star</span><span class="i-code">0xe802</span></div>
304 <div class="the-icons span3" title="Code: 0xe803"><i class="demo-icon icon-star-empty"></i> <span class="i-name">icon-star-empty</span><span class="i-code">0xe803</span></div>
305 </div>
306 <div class="row">
307 <div class="the-icons span3" title="Code: 0xe804"><i class="demo-icon icon-retweet"></i> <span class="i-name">icon-retweet</span><span class="i-code">0xe804</span></div>
308 <div class="the-icons span3" title="Code: 0xe805"><i class="demo-icon icon-eye-off"></i> <span class="i-name">icon-eye-off</span><span class="i-code">0xe805</span></div>
309 <div class="the-icons span3" title="Code: 0xe806"><i class="demo-icon icon-plus-squared"></i> <span class="i-name">icon-plus-squared</span><span class="i-code">0xe806</span></div>
310 <div class="the-icons span3" title="Code: 0xe807"><i class="demo-icon icon-cog"></i> <span class="i-name">icon-cog</span><span class="i-code">0xe807</span></div>
311 </div>
312 <div class="row">
313 <div class="the-icons span3" title="Code: 0xe808"><i class="demo-icon icon-logout"></i> <span class="i-name">icon-logout</span><span class="i-code">0xe808</span></div>
314 <div class="the-icons span3" title="Code: 0xe809"><i class="demo-icon icon-down-open"></i> <span class="i-name">icon-down-open</span><span class="i-code">0xe809</span></div>
315 <div class="the-icons span3" title="Code: 0xe80a"><i class="demo-icon icon-attach"></i> <span class="i-name">icon-attach</span><span class="i-code">0xe80a</span></div>
316 <div class="the-icons span3" title="Code: 0xe80b"><i class="demo-icon icon-picture"></i> <span class="i-name">icon-picture</span><span class="i-code">0xe80b</span></div>
317 </div>
318 <div class="row">
319 <div class="the-icons span3" title="Code: 0xe80c"><i class="demo-icon icon-video"></i> <span class="i-name">icon-video</span><span class="i-code">0xe80c</span></div>
320 <div class="the-icons span3" title="Code: 0xe80d"><i class="demo-icon icon-right-open"></i> <span class="i-name">icon-right-open</span><span class="i-code">0xe80d</span></div>
321 <div class="the-icons span3" title="Code: 0xe80e"><i class="demo-icon icon-left-open"></i> <span class="i-name">icon-left-open</span><span class="i-code">0xe80e</span></div>
322 <div class="the-icons span3" title="Code: 0xe80f"><i class="demo-icon icon-up-open"></i> <span class="i-name">icon-up-open</span><span class="i-code">0xe80f</span></div>
323 </div>
324 <div class="row">
325 <div class="the-icons span3" title="Code: 0xe810"><i class="demo-icon icon-bell"></i> <span class="i-name">icon-bell</span><span class="i-code">0xe810</span></div>
326 <div class="the-icons span3" title="Code: 0xe811"><i class="demo-icon icon-lock"></i> <span class="i-name">icon-lock</span><span class="i-code">0xe811</span></div>
327 <div class="the-icons span3" title="Code: 0xe812"><i class="demo-icon icon-globe"></i> <span class="i-name">icon-globe</span><span class="i-code">0xe812</span></div>
328 <div class="the-icons span3" title="Code: 0xe813"><i class="demo-icon icon-brush"></i> <span class="i-name">icon-brush</span><span class="i-code">0xe813</span></div>
329 </div>
330 <div class="row">
331 <div class="the-icons span3" title="Code: 0xe832"><i class="demo-icon icon-spin3 animate-spin"></i> <span class="i-name">icon-spin3</span><span class="i-code">0xe832</span></div>
332 <div class="the-icons span3" title="Code: 0xe834"><i class="demo-icon icon-spin4 animate-spin"></i> <span class="i-name">icon-spin4</span><span class="i-code">0xe834</span></div>
333 <div class="the-icons span3" title="Code: 0xf08e"><i class="demo-icon icon-link-ext"></i> <span class="i-name">icon-link-ext</span><span class="i-code">0xf08e</span></div>
334 <div class="the-icons span3" title="Code: 0xf08f"><i class="demo-icon icon-link-ext-alt"></i> <span class="i-name">icon-link-ext-alt</span><span class="i-code">0xf08f</span></div>
335 </div>
336 <div class="row">
337 <div class="the-icons span3" title="Code: 0xf0c9"><i class="demo-icon icon-menu"></i> <span class="i-name">icon-menu</span><span class="i-code">0xf0c9</span></div>
338 <div class="the-icons span3" title="Code: 0xf0e0"><i class="demo-icon icon-mail-alt"></i> <span class="i-name">icon-mail-alt</span><span class="i-code">0xf0e0</span></div>
339 <div class="the-icons span3" title="Code: 0xf0e5"><i class="demo-icon icon-comment-empty"></i> <span class="i-name">icon-comment-empty</span><span class="i-code">0xf0e5</span></div>
340 <div class="the-icons span3" title="Code: 0xf112"><i class="demo-icon icon-reply"></i> <span class="i-name">icon-reply</span><span class="i-code">0xf112</span></div>
341 </div>
342 <div class="row">
343 <div class="the-icons span3" title="Code: 0xf13e"><i class="demo-icon icon-lock-open-alt"></i> <span class="i-name">icon-lock-open-alt</span><span class="i-code">0xf13e</span></div>
344 <div class="the-icons span3" title="Code: 0xf1e5"><i class="demo-icon icon-binoculars"></i> <span class="i-name">icon-binoculars</span><span class="i-code">0xf1e5</span></div>
345 <div class="the-icons span3" title="Code: 0xf234"><i class="demo-icon icon-user-plus"></i> <span class="i-name">icon-user-plus</span><span class="i-code">0xf234</span></div>
346 </div>
347 </div>
348 <div class="container footer">Generated by <a href="http://fontello.com">fontello.com</a></div>
349 </body>
350 </html>