comparison fonts/fontello/demo.html @ 88:731c65802477

font (icons): add "mic" and "keyboard" icons
author Goffi <goffi@goffi.org>
date Thu, 30 May 2024 23:39:29 +0200
parents 7ce2d2475363
children
comparison
equal deleted inserted replaced
87:7ce2d2475363 88:731c65802477
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?38010665'); 149 src: url('./font/fontello.eot?46224623');
150 src: url('./font/fontello.eot?38010665#iefix') format('embedded-opentype'), 150 src: url('./font/fontello.eot?46224623#iefix') format('embedded-opentype'),
151 url('./font/fontello.woff?38010665') format('woff'), 151 url('./font/fontello.woff?46224623') format('woff'),
152 url('./font/fontello.ttf?38010665') format('truetype'), 152 url('./font/fontello.ttf?46224623') format('truetype'),
153 url('./font/fontello.svg?38010665#fontello') format('svg'); 153 url('./font/fontello.svg?46224623#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";
442 <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> 442 <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>
443 </div> 443 </div>
444 <div class="span3" title="Code: 0xf118"> 444 <div class="span3" title="Code: 0xf118">
445 <i class="demo-icon icon-smile">&#xf118;</i> <span class="i-name">icon-smile</span><span class="i-code">0xf118</span> 445 <i class="demo-icon icon-smile">&#xf118;</i> <span class="i-name">icon-smile</span><span class="i-code">0xf118</span>
446 </div> 446 </div>
447 <div class="span3" title="Code: 0xf11c">
448 <i class="demo-icon icon-keyboard">&#xf11c;</i> <span class="i-name">icon-keyboard</span><span class="i-code">0xf11c</span>
449 </div>
450 </div>
451 <div class="row">
447 <div class="span3" title="Code: 0xf127"> 452 <div class="span3" title="Code: 0xf127">
448 <i class="demo-icon icon-unlink">&#xf127;</i> <span class="i-name">icon-unlink</span><span class="i-code">0xf127</span> 453 <i class="demo-icon icon-unlink">&#xf127;</i> <span class="i-name">icon-unlink</span><span class="i-code">0xf127</span>
449 </div> 454 </div>
450 </div> 455 <div class="span3" title="Code: 0xf130">
451 <div class="row"> 456 <i class="demo-icon icon-mic">&#xf130;</i> <span class="i-name">icon-mic</span><span class="i-code">0xf130</span>
457 </div>
452 <div class="span3" title="Code: 0xf132"> 458 <div class="span3" title="Code: 0xf132">
453 <i class="demo-icon icon-shield">&#xf132;</i> <span class="i-name">icon-shield</span><span class="i-code">0xf132</span> 459 <i class="demo-icon icon-shield">&#xf132;</i> <span class="i-name">icon-shield</span><span class="i-code">0xf132</span>
454 </div> 460 </div>
455 <div class="span3" title="Code: 0xf142"> 461 <div class="span3" title="Code: 0xf142">
456 <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> 462 <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>
457 </div> 463 </div>
464 </div>
465 <div class="row">
458 <div class="span3" title="Code: 0xf144"> 466 <div class="span3" title="Code: 0xf144">
459 <i class="demo-icon icon-play-circled">&#xf144;</i> <span class="i-name">icon-play-circled</span><span class="i-code">0xf144</span> 467 <i class="demo-icon icon-play-circled">&#xf144;</i> <span class="i-name">icon-play-circled</span><span class="i-code">0xf144</span>
460 </div> 468 </div>
461 <div class="span3" title="Code: 0xf148"> 469 <div class="span3" title="Code: 0xf148">
462 <i class="demo-icon icon-level-up">&#xf148;</i> <span class="i-name">icon-level-up</span><span class="i-code">0xf148</span> 470 <i class="demo-icon icon-level-up">&#xf148;</i> <span class="i-name">icon-level-up</span><span class="i-code">0xf148</span>
463 </div> 471 </div>
464 </div>
465 <div class="row">
466 <div class="span3" title="Code: 0xf1c5"> 472 <div class="span3" title="Code: 0xf1c5">
467 <i class="demo-icon icon-file-image">&#xf1c5;</i> <span class="i-name">icon-file-image</span><span class="i-code">0xf1c5</span> 473 <i class="demo-icon icon-file-image">&#xf1c5;</i> <span class="i-name">icon-file-image</span><span class="i-code">0xf1c5</span>
468 </div> 474 </div>
469 <div class="span3" title="Code: 0xf1c7"> 475 <div class="span3" title="Code: 0xf1c7">
470 <i class="demo-icon icon-file-audio">&#xf1c7;</i> <span class="i-name">icon-file-audio</span><span class="i-code">0xf1c7</span> 476 <i class="demo-icon icon-file-audio">&#xf1c7;</i> <span class="i-name">icon-file-audio</span><span class="i-code">0xf1c7</span>
471 </div> 477 </div>
478 </div>
479 <div class="row">
472 <div class="span3" title="Code: 0xf1c8"> 480 <div class="span3" title="Code: 0xf1c8">
473 <i class="demo-icon icon-file-video">&#xf1c8;</i> <span class="i-name">icon-file-video</span><span class="i-code">0xf1c8</span> 481 <i class="demo-icon icon-file-video">&#xf1c8;</i> <span class="i-name">icon-file-video</span><span class="i-code">0xf1c8</span>
474 </div> 482 </div>
475 <div class="span3" title="Code: 0xf1d9"> 483 <div class="span3" title="Code: 0xf1d9">
476 <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> 484 <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>
477 </div> 485 </div>
478 </div>
479 <div class="row">
480 <div class="span3" title="Code: 0xf1e0"> 486 <div class="span3" title="Code: 0xf1e0">
481 <i class="demo-icon icon-share">&#xf1e0;</i> <span class="i-name">icon-share</span><span class="i-code">0xf1e0</span> 487 <i class="demo-icon icon-share">&#xf1e0;</i> <span class="i-name">icon-share</span><span class="i-code">0xf1e0</span>
482 </div> 488 </div>
483 <div class="span3" title="Code: 0xf1e6"> 489 <div class="span3" title="Code: 0xf1e6">
484 <i class="demo-icon icon-plug">&#xf1e6;</i> <span class="i-name">icon-plug</span><span class="i-code">0xf1e6</span> 490 <i class="demo-icon icon-plug">&#xf1e6;</i> <span class="i-name">icon-plug</span><span class="i-code">0xf1e6</span>
485 </div> 491 </div>
492 </div>
493 <div class="row">
486 <div class="span3" title="Code: 0xf1fc"> 494 <div class="span3" title="Code: 0xf1fc">
487 <i class="demo-icon icon-brush">&#xf1fc;</i> <span class="i-name">icon-brush</span><span class="i-code">0xf1fc</span> 495 <i class="demo-icon icon-brush">&#xf1fc;</i> <span class="i-name">icon-brush</span><span class="i-code">0xf1fc</span>
488 </div> 496 </div>
489 <div class="span3" title="Code: 0xf233"> 497 <div class="span3" title="Code: 0xf233">
490 <i class="demo-icon icon-server">&#xf233;</i> <span class="i-name">icon-server</span><span class="i-code">0xf233</span> 498 <i class="demo-icon icon-server">&#xf233;</i> <span class="i-name">icon-server</span><span class="i-code">0xf233</span>
491 </div> 499 </div>
492 </div>
493 <div class="row">
494 <div class="span3" title="Code: 0xf291"> 500 <div class="span3" title="Code: 0xf291">
495 <i class="demo-icon icon-basket">&#xf291;</i> <span class="i-name">icon-basket</span><span class="i-code">0xf291</span> 501 <i class="demo-icon icon-basket">&#xf291;</i> <span class="i-name">icon-basket</span><span class="i-code">0xf291</span>
496 </div> 502 </div>
497 <div class="span3" title="Code: 0xf2bd"> 503 <div class="span3" title="Code: 0xf2bd">
498 <i class="demo-icon icon-user-circle">&#xf2bd;</i> <span class="i-name">icon-user-circle</span><span class="i-code">0xf2bd</span> 504 <i class="demo-icon icon-user-circle">&#xf2bd;</i> <span class="i-name">icon-user-circle</span><span class="i-code">0xf2bd</span>
499 </div> 505 </div>
506 </div>
507 <div class="row">
500 <div class="span3" title="Code: 0xf50d"> 508 <div class="span3" title="Code: 0xf50d">
501 <i class="demo-icon icon-search">&#xf50d;</i> <span class="i-name">icon-search</span><span class="i-code">0xf50d</span> 509 <i class="demo-icon icon-search">&#xf50d;</i> <span class="i-name">icon-search</span><span class="i-code">0xf50d</span>
502 </div> 510 </div>
503 </div> 511 </div>
504 </div> 512 </div>