Mercurial > libervia-media

comparison fonts/fontello/demo.html @ 84:b0816cd750fa

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
fonts (icons): add "attach", "paper-plane-empty" and "eye" icons
author Goffi <goffi@goffi.org>
date Wed, 28 Jun 2023 10:43:55 +0200
parents d31fac1efcee
children 7575f644b20e
comparison
equal deleted inserted replaced
83:8427bdf59ea7 84:b0816cd750fa
1 <!DOCTYPE html> 1 <!DOCTYPE html>
2 <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]--> 3 <head>
4 <meta charset="UTF-8"><style>/* 4 <!--[if lt IE 9]><script language="javascript" type="text/javascript" src="//html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
5 * Bootstrap v2.2.1 5 <meta charset="UTF-8">
6 * 6 <style>
7 * Copyright 2012 Twitter, Inc 7 html {
8 * Licensed under the Apache License v2.0 8 font-size: 100%;
9 * http://www.apache.org/licenses/LICENSE-2.0 9 -webkit-text-size-adjust: 100%;
10 * 10 -ms-text-size-adjust: 100%;
11 * Designed and built with all the love in the world @twitter by @mdo and @fat. 11 }
12 */ 12 a:focus {
13 .clearfix { 13 outline: thin dotted #333;
14 *zoom: 1; 14 outline: 5px auto -webkit-focus-ring-color;
15 } 15 outline-offset: -2px;
16 .clearfix:before, 16 }
17 .clearfix:after { 17 a:hover,
18 display: table; 18 a:active {
19 content: ""; 19 outline: 0;
20 line-height: 0; 20 }
21 } 21 input {
22 .clearfix:after { 22 margin: 0;
23 clear: both; 23 font-size: 100%;
24 } 24 vertical-align: middle;
25 html { 25 *overflow: visible;
26 font-size: 100%; 26 line-height: normal;
27 -webkit-text-size-adjust: 100%; 27 }
28 -ms-text-size-adjust: 100%; 28 input::-moz-focus-inner {
29 } 29 padding: 0;
30 a:focus { 30 border: 0;
31 outline: thin dotted #333; 31 }
32 outline: 5px auto -webkit-focus-ring-color; 32 body {
33 outline-offset: -2px; 33 margin: 0;
34 } 34 font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
35 a:hover, 35 font-size: 14px;
36 a:active { 36 line-height: 20px;
37 outline: 0; 37 color: #333;
38 } 38 background-color: #fff;
39 button, 39 }
40 input, 40 a {
41 select, 41 color: #08c;
42 textarea { 42 text-decoration: none;
43 margin: 0; 43 }
44 font-size: 100%; 44 a:hover {
45 vertical-align: middle; 45 color: #005580;
46 } 46 text-decoration: underline;
47 button, 47 }
48 input { 48 .row {
49 *overflow: visible; 49 margin-left: -20px;
50 line-height: normal; 50 *zoom: 1;
51 } 51 }
52 button::-moz-focus-inner, 52 .row:before,
53 input::-moz-focus-inner { 53 .row:after {
54 padding: 0; 54 display: table;
55 border: 0; 55 content: "";
56 } 56 line-height: 0;
57 body { 57 }
58 margin: 0; 58 .row:after {
59 font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; 59 clear: both;
60 font-size: 14px; 60 }
61 line-height: 20px; 61 .span3 {
62 color: #333; 62 float: left;
63 background-color: #fff; 63 min-height: 1px;
64 } 64 margin-left: 20px;
65 a { 65 width: 220px;
66 color: #08c; 66 }
67 text-decoration: none; 67 .container {
68 } 68 width: 940px;
69 a:hover { 69 margin-right: auto;
70 color: #005580; 70 margin-left: auto;
71 text-decoration: underline; 71 *zoom: 1;
72 } 72 }
73 .row { 73 .container:before,
74 margin-left: -20px; 74 .container:after {
75 *zoom: 1; 75 display: table;
76 } 76 content: "";
77 .row:before, 77 line-height: 0;
78 .row:after { 78 }
79 display: table; 79 .container:after {
80 content: ""; 80 clear: both;
81 line-height: 0; 81 }
82 } 82 small {
83 .row:after { 83 font-size: 85%;
84 clear: both; 84 }
85 } 85 h1 {
86 [class*="span"] { 86 margin: 10px 0;
87 float: left; 87 font-family: inherit;
88 min-height: 1px; 88 font-weight: bold;
89 margin-left: 20px; 89 line-height: 20px;
90 } 90 color: inherit;
91 .container, 91 text-rendering: optimizelegibility;
92 .navbar-static-top .container, 92 line-height: 40px;
93 .navbar-fixed-top .container, 93 font-size: 38.5px;
94 .navbar-fixed-bottom .container { 94 }
95 width: 940px; 95 h1 small {
96 } 96 font-weight: normal;
97 .span12 { 97 line-height: 1;
98 width: 940px; 98 color: #999;
99 } 99 font-size: 24.5px;
100 .span11 { 100 }
101 width: 860px; 101
102 } 102 body {
103 .span10 { 103 margin-top: 90px;
104 width: 780px; 104 }
105 } 105 .header {
106 .span9 { 106 position: fixed;
107 width: 700px; 107 top: 0;
108 } 108 left: 50%;
109 .span8 { 109 margin-left: -480px;
110 width: 620px; 110 background-color: #fff;
111 } 111 border-bottom: 1px solid #ddd;
112 .span7 { 112 padding-top: 10px;
113 width: 540px; 113 z-index: 10;
114 } 114 }
115 .span6 { 115 .footer {
116 width: 460px; 116 color: #ddd;
117 } 117 font-size: 12px;
118 .span5 { 118 text-align: center;
119 width: 380px; 119 margin-top: 20px;
120 } 120 }
121 .span4 { 121 .footer a {
122 width: 300px; 122 color: #ccc;
123 } 123 text-decoration: underline;
124 .span3 { 124 }
125 width: 220px; 125 .the-icons {
126 } 126 font-size: 14px;
127 .span2 { 127 line-height: 24px;
128 width: 140px; 128 }
129 } 129 .switch {
130 .span1 { 130 position: absolute;
131 width: 60px; 131 right: 0;
132 } 132 bottom: 10px;
133 [class*="span"].pull-right, 133 color: #666;
134 .row-fluid [class*="span"].pull-right { 134 }
135 float: right; 135 .switch input {
136 } 136 margin-right: 0.3em;
137 .container { 137 }
138 margin-right: auto; 138 .codesOn .i-name {
139 margin-left: auto; 139 display: none;
140 *zoom: 1; 140 }
141 } 141 .codesOn .i-code {
142 .container:before, 142 display: inline;
143 .container:after { 143 }
144 display: table; 144 .i-code {
145 content: ""; 145 display: none;
146 line-height: 0; 146 }
147 } 147 @font-face {
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'; 148 font-family: 'fontello';
232 src: url('./font/fontello.eot?96750476'); 149 src: url('./font/fontello.eot?26277375');
233 src: url('./font/fontello.eot?96750476#iefix') format('embedded-opentype'), 150 src: url('./font/fontello.eot?26277375#iefix') format('embedded-opentype'),
234 url('./font/fontello.woff?96750476') format('woff'), 151 url('./font/fontello.woff?26277375') format('woff'),
235 url('./font/fontello.ttf?96750476') format('truetype'), 152 url('./font/fontello.ttf?26277375') format('truetype'),
236 url('./font/fontello.svg?96750476#fontello') format('svg'); 153 url('./font/fontello.svg?26277375#fontello') format('svg');
237 font-weight: normal; 154 font-weight: normal;
238 font-style: normal; 155 font-style: normal;
239 } 156 }
240 157 .demo-icon {
241
242 .demo-icon
243 {
244 font-family: "fontello"; 158 font-family: "fontello";
245 font-style: normal; 159 font-style: normal;
246 font-weight: normal; 160 font-weight: normal;
247 speak: never; 161 speak: never;
248 162
272 -moz-osx-font-smoothing: grayscale; 186 -moz-osx-font-smoothing: grayscale;
273 187
274 /* Uncomment for 3D effect */ 188 /* Uncomment for 3D effect */
275 /* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */ 189 /* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */
276 } 190 }
277 </style> 191 </style>
278 <link rel="stylesheet" href="css/animation.css"><!--[if IE 7]><link rel="stylesheet" href="css/" + font.fontname + "-ie7.css"><![endif]--> 192 <link rel="stylesheet" href="css/animation.css"><!--[if IE 7]><link rel="stylesheet" href="css/" + font.fontname + "-ie7.css"><![endif]-->
279 <script> 193 <script>
280 function toggleCodes(on) { 194 function toggleCodes(on) {
281 var obj = document.getElementById('icons'); 195 var obj = document.getElementById('icons');
282 196
284 obj.className += ' codesOn'; 198 obj.className += ' codesOn';
285 } else { 199 } else {
286 obj.className = obj.className.replace(' codesOn', ''); 200 obj.className = obj.className.replace(' codesOn', '');
287 } 201 }
288 } 202 }
289
290 </script> 203 </script>
291 </head> 204 </head>
292 <body> 205 <body>
293 <div class="container header"> 206 <div class="container header">
294 <h1>fontello <small>font demo</small></h1> 207 <h1>fontello <small>font demo</small></h1>
296 <input type="checkbox" onclick="toggleCodes(this.checked)">show codes 209 <input type="checkbox" onclick="toggleCodes(this.checked)">show codes
297 </label> 210 </label>
298 </div> 211 </div>
299 <div class="container" id="icons"> 212 <div class="container" id="icons">
300 <div class="row"> 213 <div class="row">
301 <div class="the-icons span3" title="Code: 0xe744"><i class="demo-icon icon-loading animate-spin">&#xe744;</i> <span class="i-name">icon-loading</span><span class="i-code">0xe744</span></div> 214 <div class="span3" title="Code: 0xe744">
302 <div class="the-icons span3" title="Code: 0xe800"><i class="demo-icon icon-doc">&#xe800;</i> <span class="i-name">icon-doc</span><span class="i-code">0xe800</span></div> 215 <i class="demo-icon icon-loading animate-spin">&#xe744;</i> <span class="i-name">icon-loading</span><span class="i-code">0xe744</span>
303 <div class="the-icons span3" title="Code: 0xe801"><i class="demo-icon icon-desktop">&#xe801;</i> <span class="i-name">icon-desktop</span><span class="i-code">0xe801</span></div> 216 </div>
304 <div class="the-icons span3" title="Code: 0xe802"><i class="demo-icon icon-mobile">&#xe802;</i> <span class="i-name">icon-mobile</span><span class="i-code">0xe802</span></div> 217 <div class="span3" title="Code: 0xe800">
305 </div> 218 <i class="demo-icon icon-doc">&#xe800;</i> <span class="i-name">icon-doc</span><span class="i-code">0xe800</span>
306 <div class="row"> 219 </div>
307 <div class="the-icons span3" title="Code: 0xe803"><i class="demo-icon icon-globe">&#xe803;</i> <span class="i-name">icon-globe</span><span class="i-code">0xe803</span></div> 220 <div class="span3" title="Code: 0xe801">
308 <div class="the-icons span3" title="Code: 0xe804"><i class="demo-icon icon-terminal">&#xe804;</i> <span class="i-name">icon-terminal</span><span class="i-code">0xe804</span></div> 221 <i class="demo-icon icon-desktop">&#xe801;</i> <span class="i-name">icon-desktop</span><span class="i-code">0xe801</span>
309 <div class="the-icons span3" title="Code: 0xe805"><i class="demo-icon icon-blog">&#xe805;</i> <span class="i-name">icon-blog</span><span class="i-code">0xe805</span></div> 222 </div>
310 <div class="the-icons span3" title="Code: 0xe806"><i class="demo-icon icon-clipboard">&#xe806;</i> <span class="i-name">icon-clipboard</span><span class="i-code">0xe806</span></div> 223 <div class="span3" title="Code: 0xe802">
311 </div> 224 <i class="demo-icon icon-mobile">&#xe802;</i> <span class="i-name">icon-mobile</span><span class="i-code">0xe802</span>
312 <div class="row"> 225 </div>
313 <div class="the-icons span3" title="Code: 0xe807"><i class="demo-icon icon-merge">&#xe807;</i> <span class="i-name">icon-merge</span><span class="i-code">0xe807</span></div> 226 </div>
314 <div class="the-icons span3" title="Code: 0xe808"><i class="demo-icon icon-lock">&#xe808;</i> <span class="i-name">icon-lock</span><span class="i-code">0xe808</span></div> 227 <div class="row">
315 <div class="the-icons span3" title="Code: 0xe809"><i class="demo-icon icon-lock-filled">&#xe809;</i> <span class="i-name">icon-lock-filled</span><span class="i-code">0xe809</span></div> 228 <div class="span3" title="Code: 0xe803">
316 <div class="the-icons span3" title="Code: 0xe80a"><i class="demo-icon icon-lock-open">&#xe80a;</i> <span class="i-name">icon-lock-open</span><span class="i-code">0xe80a</span></div> 229 <i class="demo-icon icon-globe">&#xe803;</i> <span class="i-name">icon-globe</span><span class="i-code">0xe803</span>
317 </div> 230 </div>
318 <div class="row"> 231 <div class="span3" title="Code: 0xe804">
319 <div class="the-icons span3" title="Code: 0xe80b"><i class="demo-icon icon-lock-open-filled">&#xe80b;</i> <span class="i-name">icon-lock-open-filled</span><span class="i-code">0xe80b</span></div> 232 <i class="demo-icon icon-terminal">&#xe804;</i> <span class="i-name">icon-terminal</span><span class="i-code">0xe804</span>
320 <div class="the-icons span3" title="Code: 0xe80c"><i class="demo-icon icon-plus-circled">&#xe80c;</i> <span class="i-name">icon-plus-circled</span><span class="i-code">0xe80c</span></div> 233 </div>
321 <div class="the-icons span3" title="Code: 0xe80d"><i class="demo-icon icon-resize-vertical">&#xe80d;</i> <span class="i-name">icon-resize-vertical</span><span class="i-code">0xe80d</span></div> 234 <div class="span3" title="Code: 0xe805">
322 <div class="the-icons span3" title="Code: 0xe80e"><i class="demo-icon icon-dot-3">&#xe80e;</i> <span class="i-name">icon-dot-3</span><span class="i-code">0xe80e</span></div> 235 <i class="demo-icon icon-blog">&#xe805;</i> <span class="i-name">icon-blog</span><span class="i-code">0xe805</span>
323 </div> 236 </div>
324 <div class="row"> 237 <div class="span3" title="Code: 0xe806">
325 <div class="the-icons span3" title="Code: 0xe80f"><i class="demo-icon icon-chat">&#xe80f;</i> <span class="i-name">icon-chat</span><span class="i-code">0xe80f</span></div> 238 <i class="demo-icon icon-clipboard">&#xe806;</i> <span class="i-name">icon-clipboard</span><span class="i-code">0xe806</span>
326 <div class="the-icons span3" title="Code: 0xe810"><i class="demo-icon icon-exchange">&#xe810;</i> <span class="i-name">icon-exchange</span><span class="i-code">0xe810</span></div> 239 </div>
327 <div class="the-icons span3" title="Code: 0xe811"><i class="demo-icon icon-wrench">&#xe811;</i> <span class="i-name">icon-wrench</span><span class="i-code">0xe811</span></div> 240 </div>
328 <div class="the-icons span3" title="Code: 0xe812"><i class="demo-icon icon-pencil">&#xe812;</i> <span class="i-name">icon-pencil</span><span class="i-code">0xe812</span></div> 241 <div class="row">
329 </div> 242 <div class="span3" title="Code: 0xe807">
330 <div class="row"> 243 <i class="demo-icon icon-merge">&#xe807;</i> <span class="i-name">icon-merge</span><span class="i-code">0xe807</span>
331 <div class="the-icons span3" title="Code: 0xe813"><i class="demo-icon icon-signal">&#xe813;</i> <span class="i-name">icon-signal</span><span class="i-code">0xe813</span></div> 244 </div>
332 <div class="the-icons span3" title="Code: 0xe814"><i class="demo-icon icon-play">&#xe814;</i> <span class="i-name">icon-play</span><span class="i-code">0xe814</span></div> 245 <div class="span3" title="Code: 0xe808">
333 <div class="the-icons span3" title="Code: 0xe815"><i class="demo-icon icon-video">&#xe815;</i> <span class="i-name">icon-video</span><span class="i-code">0xe815</span></div> 246 <i class="demo-icon icon-lock">&#xe808;</i> <span class="i-name">icon-lock</span><span class="i-code">0xe808</span>
334 <div class="the-icons span3" title="Code: 0xe816"><i class="demo-icon icon-stop">&#xe816;</i> <span class="i-name">icon-stop</span><span class="i-code">0xe816</span></div> 247 </div>
335 </div> 248 <div class="span3" title="Code: 0xe809">
336 <div class="row"> 249 <i class="demo-icon icon-lock-filled">&#xe809;</i> <span class="i-name">icon-lock-filled</span><span class="i-code">0xe809</span>
337 <div class="the-icons span3" title="Code: 0xe817"><i class="demo-icon icon-pause">&#xe817;</i> <span class="i-name">icon-pause</span><span class="i-code">0xe817</span></div> 250 </div>
338 <div class="the-icons span3" title="Code: 0xe818"><i class="demo-icon icon-fast-fw">&#xe818;</i> <span class="i-name">icon-fast-fw</span><span class="i-code">0xe818</span></div> 251 <div class="span3" title="Code: 0xe80a">
339 <div class="the-icons span3" title="Code: 0xe819"><i class="demo-icon icon-fast-bw">&#xe819;</i> <span class="i-name">icon-fast-bw</span><span class="i-code">0xe819</span></div> 252 <i class="demo-icon icon-lock-open">&#xe80a;</i> <span class="i-name">icon-lock-open</span><span class="i-code">0xe80a</span>
340 <div class="the-icons span3" title="Code: 0xe81a"><i class="demo-icon icon-previous">&#xe81a;</i> <span class="i-name">icon-previous</span><span class="i-code">0xe81a</span></div> 253 </div>
341 </div> 254 </div>
342 <div class="row"> 255 <div class="row">
343 <div class="the-icons span3" title="Code: 0xe81b"><i class="demo-icon icon-next">&#xe81b;</i> <span class="i-name">icon-next</span><span class="i-code">0xe81b</span></div> 256 <div class="span3" title="Code: 0xe80b">
344 <div class="the-icons span3" title="Code: 0xe81c"><i class="demo-icon icon-warning">&#xe81c;</i> <span class="i-name">icon-warning</span><span class="i-code">0xe81c</span></div> 257 <i class="demo-icon icon-lock-open-filled">&#xe80b;</i> <span class="i-name">icon-lock-open-filled</span><span class="i-code">0xe80b</span>
345 <div class="the-icons span3" title="Code: 0xe81d"><i class="demo-icon icon-info">&#xe81d;</i> <span class="i-name">icon-info</span><span class="i-code">0xe81d</span></div> 258 </div>
346 <div class="the-icons span3" title="Code: 0xe81e"><i class="demo-icon icon-error">&#xe81e;</i> <span class="i-name">icon-error</span><span class="i-code">0xe81e</span></div> 259 <div class="span3" title="Code: 0xe80c">
347 </div> 260 <i class="demo-icon icon-plus-circled">&#xe80c;</i> <span class="i-name">icon-plus-circled</span><span class="i-code">0xe80c</span>
348 <div class="row"> 261 </div>
349 <div class="the-icons span3" title="Code: 0xe81f"><i class="demo-icon icon-picture">&#xe81f;</i> <span class="i-name">icon-picture</span><span class="i-code">0xe81f</span></div> 262 <div class="span3" title="Code: 0xe80d">
350 <div class="the-icons span3" title="Code: 0xe820"><i class="demo-icon icon-calendar">&#xe820;</i> <span class="i-name">icon-calendar</span><span class="i-code">0xe820</span></div> 263 <i class="demo-icon icon-resize-vertical">&#xe80d;</i> <span class="i-name">icon-resize-vertical</span><span class="i-code">0xe80d</span>
351 <div class="the-icons span3" title="Code: 0xe821"><i class="demo-icon icon-heart-filled">&#xe821;</i> <span class="i-name">icon-heart-filled</span><span class="i-code">0xe821</span></div> 264 </div>
352 <div class="the-icons span3" title="Code: 0xe822"><i class="demo-icon icon-group">&#xe822;</i> <span class="i-name">icon-group</span><span class="i-code">0xe822</span></div> 265 <div class="span3" title="Code: 0xe80e">
353 </div> 266 <i class="demo-icon icon-dot-3">&#xe80e;</i> <span class="i-name">icon-dot-3</span><span class="i-code">0xe80e</span>
354 <div class="row"> 267 </div>
355 <div class="the-icons span3" title="Code: 0xe823"><i class="demo-icon icon-ok">&#xe823;</i> <span class="i-name">icon-ok</span><span class="i-code">0xe823</span></div> 268 </div>
356 <div class="the-icons span3" title="Code: 0xe824"><i class="demo-icon icon-forward">&#xe824;</i> <span class="i-name">icon-forward</span><span class="i-code">0xe824</span></div> 269 <div class="row">
357 <div class="the-icons span3" title="Code: 0xe825"><i class="demo-icon icon-box">&#xe825;</i> <span class="i-name">icon-box</span><span class="i-code">0xe825</span></div> 270 <div class="span3" title="Code: 0xe80f">
358 <div class="the-icons span3" title="Code: 0xe826"><i class="demo-icon icon-feed">&#xe826;</i> <span class="i-name">icon-feed</span><span class="i-code">0xe826</span></div> 271 <i class="demo-icon icon-chat">&#xe80f;</i> <span class="i-name">icon-chat</span><span class="i-code">0xe80f</span>
359 </div> 272 </div>
360 <div class="row"> 273 <div class="span3" title="Code: 0xe810">
361 <div class="the-icons span3" title="Code: 0xe827"><i class="demo-icon icon-upload">&#xe827;</i> <span class="i-name">icon-upload</span><span class="i-code">0xe827</span></div> 274 <i class="demo-icon icon-exchange">&#xe810;</i> <span class="i-name">icon-exchange</span><span class="i-code">0xe810</span>
362 <div class="the-icons span3" title="Code: 0xe828"><i class="demo-icon icon-cancel-circled">&#xe828;</i> <span class="i-name">icon-cancel-circled</span><span class="i-code">0xe828</span></div> 275 </div>
363 <div class="the-icons span3" title="Code: 0xe829"><i class="demo-icon icon-loop-alt">&#xe829;</i> <span class="i-name">icon-loop-alt</span><span class="i-code">0xe829</span></div> 276 <div class="span3" title="Code: 0xe811">
364 <div class="the-icons span3" title="Code: 0xe82a"><i class="demo-icon icon-person">&#xe82a;</i> <span class="i-name">icon-person</span><span class="i-code">0xe82a</span></div> 277 <i class="demo-icon icon-wrench">&#xe811;</i> <span class="i-name">icon-wrench</span><span class="i-code">0xe811</span>
365 </div> 278 </div>
366 <div class="row"> 279 <div class="span3" title="Code: 0xe812">
367 <div class="the-icons span3" title="Code: 0xe82b"><i class="demo-icon icon-key">&#xe82b;</i> <span class="i-name">icon-key</span><span class="i-code">0xe82b</span></div> 280 <i class="demo-icon icon-pencil">&#xe812;</i> <span class="i-name">icon-pencil</span><span class="i-code">0xe812</span>
368 <div class="the-icons span3" title="Code: 0xe82c"><i class="demo-icon icon-mail">&#xe82c;</i> <span class="i-name">icon-mail</span><span class="i-code">0xe82c</span></div> 281 </div>
369 <div class="the-icons span3" title="Code: 0xe82d"><i class="demo-icon icon-download">&#xe82d;</i> <span class="i-name">icon-download</span><span class="i-code">0xe82d</span></div> 282 </div>
370 <div class="the-icons span3" title="Code: 0xe82e"><i class="demo-icon icon-trash-empty">&#xe82e;</i> <span class="i-name">icon-trash-empty</span><span class="i-code">0xe82e</span></div> 283 <div class="row">
371 </div> 284 <div class="span3" title="Code: 0xe813">
372 <div class="row"> 285 <i class="demo-icon icon-signal">&#xe813;</i> <span class="i-name">icon-signal</span><span class="i-code">0xe813</span>
373 <div class="the-icons span3" title="Code: 0xe82f"><i class="demo-icon icon-volume-off">&#xe82f;</i> <span class="i-name">icon-volume-off</span><span class="i-code">0xe82f</span></div> 286 </div>
374 <div class="the-icons span3" title="Code: 0xe830"><i class="demo-icon icon-volume-up">&#xe830;</i> <span class="i-name">icon-volume-up</span><span class="i-code">0xe830</span></div> 287 <div class="span3" title="Code: 0xe814">
375 <div class="the-icons span3" title="Code: 0xe831"><i class="demo-icon icon-resize-full">&#xe831;</i> <span class="i-name">icon-resize-full</span><span class="i-code">0xe831</span></div> 288 <i class="demo-icon icon-play">&#xe814;</i> <span class="i-name">icon-play</span><span class="i-code">0xe814</span>
376 <div class="the-icons span3" title="Code: 0xe832"><i class="demo-icon icon-resize-small">&#xe832;</i> <span class="i-name">icon-resize-small</span><span class="i-code">0xe832</span></div> 289 </div>
377 </div> 290 <div class="span3" title="Code: 0xe815">
378 <div class="row"> 291 <i class="demo-icon icon-video">&#xe815;</i> <span class="i-name">icon-video</span><span class="i-code">0xe815</span>
379 <div class="the-icons span3" title="Code: 0xe833"><i class="demo-icon icon-check">&#xe833;</i> <span class="i-name">icon-check</span><span class="i-code">0xe833</span></div> 292 </div>
380 <div class="the-icons span3" title="Code: 0xe834"><i class="demo-icon icon-publish">&#xe834;</i> <span class="i-name">icon-publish</span><span class="i-code">0xe834</span></div> 293 <div class="span3" title="Code: 0xe816">
381 <div class="the-icons span3" title="Code: 0xe836"><i class="demo-icon icon-plus">&#xe836;</i> <span class="i-name">icon-plus</span><span class="i-code">0xe836</span></div> 294 <i class="demo-icon icon-stop">&#xe816;</i> <span class="i-name">icon-stop</span><span class="i-code">0xe816</span>
382 <div class="the-icons span3" title="Code: 0xf0e0"><i class="demo-icon icon-mail-filled">&#xf0e0;</i> <span class="i-name">icon-mail-filled</span><span class="i-code">0xf0e0</span></div> 295 </div>
383 </div> 296 </div>
384 <div class="row"> 297 <div class="row">
385 <div class="the-icons span3" title="Code: 0xf0e5"><i class="demo-icon icon-comment-empty">&#xf0e5;</i> <span class="i-name">icon-comment-empty</span><span class="i-code">0xf0e5</span></div> 298 <div class="span3" title="Code: 0xe817">
386 <div class="the-icons span3" title="Code: 0xf100"><i class="demo-icon icon-angle-double-left">&#xf100;</i> <span class="i-name">icon-angle-double-left</span><span class="i-code">0xf100</span></div> 299 <i class="demo-icon icon-pause">&#xe817;</i> <span class="i-name">icon-pause</span><span class="i-code">0xe817</span>
387 <div class="the-icons span3" title="Code: 0xf101"><i class="demo-icon icon-angle-double-right">&#xf101;</i> <span class="i-name">icon-angle-double-right</span><span class="i-code">0xf101</span></div> 300 </div>
388 <div class="the-icons span3" title="Code: 0xf115"><i class="demo-icon icon-folder-open-empty">&#xf115;</i> <span class="i-name">icon-folder-open-empty</span><span class="i-code">0xf115</span></div> 301 <div class="span3" title="Code: 0xe818">
389 </div> 302 <i class="demo-icon icon-fast-fw">&#xe818;</i> <span class="i-name">icon-fast-fw</span><span class="i-code">0xe818</span>
390 <div class="row"> 303 </div>
391 <div class="the-icons span3" title="Code: 0xf127"><i class="demo-icon icon-unlink">&#xf127;</i> <span class="i-name">icon-unlink</span><span class="i-code">0xf127</span></div> 304 <div class="span3" title="Code: 0xe819">
392 <div class="the-icons span3" title="Code: 0xf132"><i class="demo-icon icon-shield">&#xf132;</i> <span class="i-name">icon-shield</span><span class="i-code">0xf132</span></div> 305 <i class="demo-icon icon-fast-bw">&#xe819;</i> <span class="i-name">icon-fast-bw</span><span class="i-code">0xe819</span>
393 <div class="the-icons span3" title="Code: 0xf142"><i class="demo-icon icon-dot-3-vert">&#xf142;</i> <span class="i-name">icon-dot-3-vert</span><span class="i-code">0xf142</span></div> 306 </div>
394 <div class="the-icons span3" title="Code: 0xf144"><i class="demo-icon icon-play-circled">&#xf144;</i> <span class="i-name">icon-play-circled</span><span class="i-code">0xf144</span></div> 307 <div class="span3" title="Code: 0xe81a">
395 </div> 308 <i class="demo-icon icon-previous">&#xe81a;</i> <span class="i-name">icon-previous</span><span class="i-code">0xe81a</span>
396 <div class="row"> 309 </div>
397 <div class="the-icons span3" title="Code: 0xf148"><i class="demo-icon icon-level-up">&#xf148;</i> <span class="i-name">icon-level-up</span><span class="i-code">0xf148</span></div> 310 </div>
398 <div class="the-icons span3" title="Code: 0xf1c5"><i class="demo-icon icon-file-image">&#xf1c5;</i> <span class="i-name">icon-file-image</span><span class="i-code">0xf1c5</span></div> 311 <div class="row">
399 <div class="the-icons span3" title="Code: 0xf1c7"><i class="demo-icon icon-file-audio">&#xf1c7;</i> <span class="i-name">icon-file-audio</span><span class="i-code">0xf1c7</span></div> 312 <div class="span3" title="Code: 0xe81b">
400 <div class="the-icons span3" title="Code: 0xf1c8"><i class="demo-icon icon-file-video">&#xf1c8;</i> <span class="i-name">icon-file-video</span><span class="i-code">0xf1c8</span></div> 313 <i class="demo-icon icon-next">&#xe81b;</i> <span class="i-name">icon-next</span><span class="i-code">0xe81b</span>
401 </div> 314 </div>
402 <div class="row"> 315 <div class="span3" title="Code: 0xe81c">
403 <div class="the-icons span3" title="Code: 0xf1e0"><i class="demo-icon icon-share">&#xf1e0;</i> <span class="i-name">icon-share</span><span class="i-code">0xf1e0</span></div> 316 <i class="demo-icon icon-warning">&#xe81c;</i> <span class="i-name">icon-warning</span><span class="i-code">0xe81c</span>
404 <div class="the-icons span3" title="Code: 0xf1e6"><i class="demo-icon icon-plug">&#xf1e6;</i> <span class="i-name">icon-plug</span><span class="i-code">0xf1e6</span></div> 317 </div>
405 <div class="the-icons span3" title="Code: 0xf1fc"><i class="demo-icon icon-brush">&#xf1fc;</i> <span class="i-name">icon-brush</span><span class="i-code">0xf1fc</span></div> 318 <div class="span3" title="Code: 0xe81d">
406 <div class="the-icons span3" title="Code: 0xf233"><i class="demo-icon icon-server">&#xf233;</i> <span class="i-name">icon-server</span><span class="i-code">0xf233</span></div> 319 <i class="demo-icon icon-info">&#xe81d;</i> <span class="i-name">icon-info</span><span class="i-code">0xe81d</span>
407 </div> 320 </div>
408 <div class="row"> 321 <div class="span3" title="Code: 0xe81e">
409 <div class="the-icons span3" title="Code: 0xf291"><i class="demo-icon icon-basket">&#xf291;</i> <span class="i-name">icon-basket</span><span class="i-code">0xf291</span></div> 322 <i class="demo-icon icon-error">&#xe81e;</i> <span class="i-name">icon-error</span><span class="i-code">0xe81e</span>
410 <div class="the-icons span3" title="Code: 0xf50d"><i class="demo-icon icon-search">&#xf50d;</i> <span class="i-name">icon-search</span><span class="i-code">0xf50d</span></div> 323 </div>
324 </div>
325 <div class="row">
326 <div class="span3" title="Code: 0xe81f">
327 <i class="demo-icon icon-picture">&#xe81f;</i> <span class="i-name">icon-picture</span><span class="i-code">0xe81f</span>
328 </div>
329 <div class="span3" title="Code: 0xe820">
330 <i class="demo-icon icon-calendar">&#xe820;</i> <span class="i-name">icon-calendar</span><span class="i-code">0xe820</span>
331 </div>
332 <div class="span3" title="Code: 0xe821">
333 <i class="demo-icon icon-heart-filled">&#xe821;</i> <span class="i-name">icon-heart-filled</span><span class="i-code">0xe821</span>
334 </div>
335 <div class="span3" title="Code: 0xe822">
336 <i class="demo-icon icon-group">&#xe822;</i> <span class="i-name">icon-group</span><span class="i-code">0xe822</span>
337 </div>
338 </div>
339 <div class="row">
340 <div class="span3" title="Code: 0xe823">
341 <i class="demo-icon icon-ok">&#xe823;</i> <span class="i-name">icon-ok</span><span class="i-code">0xe823</span>
342 </div>
343 <div class="span3" title="Code: 0xe824">
344 <i class="demo-icon icon-forward">&#xe824;</i> <span class="i-name">icon-forward</span><span class="i-code">0xe824</span>
345 </div>
346 <div class="span3" title="Code: 0xe825">
347 <i class="demo-icon icon-box">&#xe825;</i> <span class="i-name">icon-box</span><span class="i-code">0xe825</span>
348 </div>
349 <div class="span3" title="Code: 0xe826">
350 <i class="demo-icon icon-feed">&#xe826;</i> <span class="i-name">icon-feed</span><span class="i-code">0xe826</span>
351 </div>
352 </div>
353 <div class="row">
354 <div class="span3" title="Code: 0xe827">
355 <i class="demo-icon icon-upload">&#xe827;</i> <span class="i-name">icon-upload</span><span class="i-code">0xe827</span>
356 </div>
357 <div class="span3" title="Code: 0xe828">
358 <i class="demo-icon icon-cancel-circled">&#xe828;</i> <span class="i-name">icon-cancel-circled</span><span class="i-code">0xe828</span>
359 </div>
360 <div class="span3" title="Code: 0xe829">
361 <i class="demo-icon icon-loop-alt">&#xe829;</i> <span class="i-name">icon-loop-alt</span><span class="i-code">0xe829</span>
362 </div>
363 <div class="span3" title="Code: 0xe82a">
364 <i class="demo-icon icon-person">&#xe82a;</i> <span class="i-name">icon-person</span><span class="i-code">0xe82a</span>
365 </div>
366 </div>
367 <div class="row">
368 <div class="span3" title="Code: 0xe82b">
369 <i class="demo-icon icon-key">&#xe82b;</i> <span class="i-name">icon-key</span><span class="i-code">0xe82b</span>
370 </div>
371 <div class="span3" title="Code: 0xe82c">
372 <i class="demo-icon icon-mail">&#xe82c;</i> <span class="i-name">icon-mail</span><span class="i-code">0xe82c</span>
373 </div>
374 <div class="span3" title="Code: 0xe82d">
375 <i class="demo-icon icon-download">&#xe82d;</i> <span class="i-name">icon-download</span><span class="i-code">0xe82d</span>
376 </div>
377 <div class="span3" title="Code: 0xe82e">
378 <i class="demo-icon icon-trash-empty">&#xe82e;</i> <span class="i-name">icon-trash-empty</span><span class="i-code">0xe82e</span>
379 </div>
380 </div>
381 <div class="row">
382 <div class="span3" title="Code: 0xe82f">
383 <i class="demo-icon icon-volume-off">&#xe82f;</i> <span class="i-name">icon-volume-off</span><span class="i-code">0xe82f</span>
384 </div>
385 <div class="span3" title="Code: 0xe830">
386 <i class="demo-icon icon-volume-up">&#xe830;</i> <span class="i-name">icon-volume-up</span><span class="i-code">0xe830</span>
387 </div>
388 <div class="span3" title="Code: 0xe831">
389 <i class="demo-icon icon-resize-full">&#xe831;</i> <span class="i-name">icon-resize-full</span><span class="i-code">0xe831</span>
390 </div>
391 <div class="span3" title="Code: 0xe832">
392 <i class="demo-icon icon-resize-small">&#xe832;</i> <span class="i-name">icon-resize-small</span><span class="i-code">0xe832</span>
393 </div>
394 </div>
395 <div class="row">
396 <div class="span3" title="Code: 0xe833">
397 <i class="demo-icon icon-check">&#xe833;</i> <span class="i-name">icon-check</span><span class="i-code">0xe833</span>
398 </div>
399 <div class="span3" title="Code: 0xe834">
400 <i class="demo-icon icon-publish">&#xe834;</i> <span class="i-name">icon-publish</span><span class="i-code">0xe834</span>
401 </div>
402 <div class="span3" title="Code: 0xe835">
403 <i class="demo-icon icon-attach">&#xe835;</i> <span class="i-name">icon-attach</span><span class="i-code">0xe835</span>
404 </div>
405 <div class="span3" title="Code: 0xe836">
406 <i class="demo-icon icon-plus">&#xe836;</i> <span class="i-name">icon-plus</span><span class="i-code">0xe836</span>
407 </div>
408 </div>
409 <div class="row">
410 <div class="span3" title="Code: 0xe837">
411 <i class="demo-icon icon-eye">&#xe837;</i> <span class="i-name">icon-eye</span><span class="i-code">0xe837</span>
412 </div>
413 <div class="span3" title="Code: 0xf0e0">
414 <i class="demo-icon icon-mail-filled">&#xf0e0;</i> <span class="i-name">icon-mail-filled</span><span class="i-code">0xf0e0</span>
415 </div>
416 <div class="span3" title="Code: 0xf0e5">
417 <i class="demo-icon icon-comment-empty">&#xf0e5;</i> <span class="i-name">icon-comment-empty</span><span class="i-code">0xf0e5</span>
418 </div>
419 <div class="span3" title="Code: 0xf100">
420 <i class="demo-icon icon-angle-double-left">&#xf100;</i> <span class="i-name">icon-angle-double-left</span><span class="i-code">0xf100</span>
421 </div>
422 </div>
423 <div class="row">
424 <div class="span3" title="Code: 0xf101">
425 <i class="demo-icon icon-angle-double-right">&#xf101;</i> <span class="i-name">icon-angle-double-right</span><span class="i-code">0xf101</span>
426 </div>
427 <div class="span3" title="Code: 0xf115">
428 <i class="demo-icon icon-folder-open-empty">&#xf115;</i> <span class="i-name">icon-folder-open-empty</span><span class="i-code">0xf115</span>
429 </div>
430 <div class="span3" title="Code: 0xf127">
431 <i class="demo-icon icon-unlink">&#xf127;</i> <span class="i-name">icon-unlink</span><span class="i-code">0xf127</span>
432 </div>
433 <div class="span3" title="Code: 0xf132">
434 <i class="demo-icon icon-shield">&#xf132;</i> <span class="i-name">icon-shield</span><span class="i-code">0xf132</span>
435 </div>
436 </div>
437 <div class="row">
438 <div class="span3" title="Code: 0xf142">
439 <i class="demo-icon icon-dot-3-vert">&#xf142;</i> <span class="i-name">icon-dot-3-vert</span><span class="i-code">0xf142</span>
440 </div>
441 <div class="span3" title="Code: 0xf144">
442 <i class="demo-icon icon-play-circled">&#xf144;</i> <span class="i-name">icon-play-circled</span><span class="i-code">0xf144</span>
443 </div>
444 <div class="span3" title="Code: 0xf148">
445 <i class="demo-icon icon-level-up">&#xf148;</i> <span class="i-name">icon-level-up</span><span class="i-code">0xf148</span>
446 </div>
447 <div class="span3" title="Code: 0xf1c5">
448 <i class="demo-icon icon-file-image">&#xf1c5;</i> <span class="i-name">icon-file-image</span><span class="i-code">0xf1c5</span>
449 </div>
450 </div>
451 <div class="row">
452 <div class="span3" title="Code: 0xf1c7">
453 <i class="demo-icon icon-file-audio">&#xf1c7;</i> <span class="i-name">icon-file-audio</span><span class="i-code">0xf1c7</span>
454 </div>
455 <div class="span3" title="Code: 0xf1c8">
456 <i class="demo-icon icon-file-video">&#xf1c8;</i> <span class="i-name">icon-file-video</span><span class="i-code">0xf1c8</span>
457 </div>
458 <div class="span3" title="Code: 0xf1d9">
459 <i class="demo-icon icon-paper-plane-empty">&#xf1d9;</i> <span class="i-name">icon-paper-plane-empty</span><span class="i-code">0xf1d9</span>
460 </div>
461 <div class="span3" title="Code: 0xf1e0">
462 <i class="demo-icon icon-share">&#xf1e0;</i> <span class="i-name">icon-share</span><span class="i-code">0xf1e0</span>
463 </div>
464 </div>
465 <div class="row">
466 <div class="span3" title="Code: 0xf1e6">
467 <i class="demo-icon icon-plug">&#xf1e6;</i> <span class="i-name">icon-plug</span><span class="i-code">0xf1e6</span>
468 </div>
469 <div class="span3" title="Code: 0xf1fc">
470 <i class="demo-icon icon-brush">&#xf1fc;</i> <span class="i-name">icon-brush</span><span class="i-code">0xf1fc</span>
471 </div>
472 <div class="span3" title="Code: 0xf233">
473 <i class="demo-icon icon-server">&#xf233;</i> <span class="i-name">icon-server</span><span class="i-code">0xf233</span>
474 </div>
475 <div class="span3" title="Code: 0xf291">
476 <i class="demo-icon icon-basket">&#xf291;</i> <span class="i-name">icon-basket</span><span class="i-code">0xf291</span>
477 </div>
478 </div>
479 <div class="row">
480 <div class="span3" title="Code: 0xf50d">
481 <i class="demo-icon icon-search">&#xf50d;</i> <span class="i-name">icon-search</span><span class="i-code">0xf50d</span>
482 </div>
411 </div> 483 </div>
412 </div> 484 </div>
413 <div class="container footer">Generated by <a href="https://fontello.com">fontello.com</a></div> 485 <div class="container footer">Generated by <a href="https://fontello.com">fontello.com</a></div>
414 </body> 486 </body>
415 </html> 487 </html>