Mercurial > libervia-media

comparison fonts/fontello/demo.html @ 42:9a8a5d8f5b86

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
fonts: added a set of icon fonts generated by fontello + their plain svg version (cf. README_SAT)
author Goffi <goffi@goffi.org>
date Sun, 11 Mar 2018 19:13:35 +0100
parents
children edbbdece2a68
comparison
equal deleted inserted replaced
41:f8ece5fe01ec 42:9a8a5d8f5b86
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?35623923');
233 src: url('./font/fontello.eot?35623923#iefix') format('embedded-opentype'),
234 url('./font/fontello.woff?35623923') format('woff'),
235 url('./font/fontello.ttf?35623923') format('truetype'),
236 url('./font/fontello.svg?35623923#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-doc">&#xe800;</i> <span class="i-name">icon-doc</span><span class="i-code">0xe800</span></div>
302 <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>
303 <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>
304 <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>
305 </div>
306 <div class="row">
307 <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>
308 <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>
309 </div>
310 </div>
311 <div class="container footer">Generated by <a href="http://fontello.com">fontello.com</a></div>
312 </body>
313 </html>