comparison fonts/fontello/demo.html @ 85:7575f644b20e

fonts (icons): add "videocam", "user-circle", "phone" and "angle-down" icons rel 423
author Goffi <goffi@goffi.org>
date Tue, 08 Aug 2023 23:35:19 +0200
parents b0816cd750fa
children b8386ab727ec
comparison
equal deleted inserted replaced
84:b0816cd750fa 85:7575f644b20e
144 .i-code { 144 .i-code {
145 display: none; 145 display: none;
146 } 146 }
147 @font-face { 147 @font-face {
148 font-family: 'fontello'; 148 font-family: 'fontello';
149 src: url('./font/fontello.eot?26277375'); 149 src: url('./font/fontello.eot?41263184');
150 src: url('./font/fontello.eot?26277375#iefix') format('embedded-opentype'), 150 src: url('./font/fontello.eot?41263184#iefix') format('embedded-opentype'),
151 url('./font/fontello.woff?26277375') format('woff'), 151 url('./font/fontello.woff?41263184') format('woff'),
152 url('./font/fontello.ttf?26277375') format('truetype'), 152 url('./font/fontello.ttf?41263184') format('truetype'),
153 url('./font/fontello.svg?26277375#fontello') format('svg'); 153 url('./font/fontello.svg?41263184#fontello') format('svg');
154 font-weight: normal; 154 font-weight: normal;
155 font-style: normal; 155 font-style: normal;
156 } 156 }
157 .demo-icon { 157 .demo-icon {
158 font-family: "fontello"; 158 font-family: "fontello";
408 </div> 408 </div>
409 <div class="row"> 409 <div class="row">
410 <div class="span3" title="Code: 0xe837"> 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> 411 <i class="demo-icon icon-eye">&#xe837;</i> <span class="i-name">icon-eye</span><span class="i-code">0xe837</span>
412 </div> 412 </div>
413 <div class="span3" title="Code: 0xe838">
414 <i class="demo-icon icon-videocam">&#xe838;</i> <span class="i-name">icon-videocam</span><span class="i-code">0xe838</span>
415 </div>
416 <div class="span3" title="Code: 0xe839">
417 <i class="demo-icon icon-phone">&#xe839;</i> <span class="i-name">icon-phone</span><span class="i-code">0xe839</span>
418 </div>
413 <div class="span3" title="Code: 0xf0e0"> 419 <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> 420 <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> 421 </div>
422 </div>
423 <div class="row">
416 <div class="span3" title="Code: 0xf0e5"> 424 <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> 425 <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> 426 </div>
419 <div class="span3" title="Code: 0xf100"> 427 <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> 428 <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> 429 </div>
422 </div>
423 <div class="row">
424 <div class="span3" title="Code: 0xf101"> 430 <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> 431 <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> 432 </div>
433 <div class="span3" title="Code: 0xf107">
434 <i class="demo-icon icon-angle-down">&#xf107;</i> <span class="i-name">icon-angle-down</span><span class="i-code">0xf107</span>
435 </div>
436 </div>
437 <div class="row">
427 <div class="span3" title="Code: 0xf115"> 438 <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> 439 <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> 440 </div>
430 <div class="span3" title="Code: 0xf127"> 441 <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> 442 <i class="demo-icon icon-unlink">&#xf127;</i> <span class="i-name">icon-unlink</span><span class="i-code">0xf127</span>
432 </div> 443 </div>
433 <div class="span3" title="Code: 0xf132"> 444 <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> 445 <i class="demo-icon icon-shield">&#xf132;</i> <span class="i-name">icon-shield</span><span class="i-code">0xf132</span>
435 </div> 446 </div>
436 </div>
437 <div class="row">
438 <div class="span3" title="Code: 0xf142"> 447 <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> 448 <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> 449 </div>
450 </div>
451 <div class="row">
441 <div class="span3" title="Code: 0xf144"> 452 <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> 453 <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> 454 </div>
444 <div class="span3" title="Code: 0xf148"> 455 <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> 456 <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> 457 </div>
447 <div class="span3" title="Code: 0xf1c5"> 458 <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> 459 <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> 460 </div>
450 </div>
451 <div class="row">
452 <div class="span3" title="Code: 0xf1c7"> 461 <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> 462 <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> 463 </div>
464 </div>
465 <div class="row">
455 <div class="span3" title="Code: 0xf1c8"> 466 <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> 467 <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> 468 </div>
458 <div class="span3" title="Code: 0xf1d9"> 469 <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> 470 <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> 471 </div>
461 <div class="span3" title="Code: 0xf1e0"> 472 <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> 473 <i class="demo-icon icon-share">&#xf1e0;</i> <span class="i-name">icon-share</span><span class="i-code">0xf1e0</span>
463 </div> 474 </div>
464 </div>
465 <div class="row">
466 <div class="span3" title="Code: 0xf1e6"> 475 <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> 476 <i class="demo-icon icon-plug">&#xf1e6;</i> <span class="i-name">icon-plug</span><span class="i-code">0xf1e6</span>
468 </div> 477 </div>
478 </div>
479 <div class="row">
469 <div class="span3" title="Code: 0xf1fc"> 480 <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> 481 <i class="demo-icon icon-brush">&#xf1fc;</i> <span class="i-name">icon-brush</span><span class="i-code">0xf1fc</span>
471 </div> 482 </div>
472 <div class="span3" title="Code: 0xf233"> 483 <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> 484 <i class="demo-icon icon-server">&#xf233;</i> <span class="i-name">icon-server</span><span class="i-code">0xf233</span>
474 </div> 485 </div>
475 <div class="span3" title="Code: 0xf291"> 486 <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> 487 <i class="demo-icon icon-basket">&#xf291;</i> <span class="i-name">icon-basket</span><span class="i-code">0xf291</span>
488 </div>
489 <div class="span3" title="Code: 0xf2bd">
490 <i class="demo-icon icon-user-circle">&#xf2bd;</i> <span class="i-name">icon-user-circle</span><span class="i-code">0xf2bd</span>
477 </div> 491 </div>
478 </div> 492 </div>
479 <div class="row"> 493 <div class="row">
480 <div class="span3" title="Code: 0xf50d"> 494 <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> 495 <i class="demo-icon icon-search">&#xf50d;</i> <span class="i-name">icon-search</span><span class="i-code">0xf50d</span>