Mercurial > libervia-media
view fonts/fontello/demo.html @ 89:92b844829ae2
fonts: fontawesome integration:
Include parts of fontawesome free "for the web" 6.6.0, which will be used for icons in
frontends to replace fontello.
Fontello is not maintained anymore (last commit 2 years ago), and has licensing issues
(some icons were advertise as free while they were not). It will be removed from this
repository, and fontawesome is used instead.
Only the parts actually used in Libervia frontends are included, to save space.
| author | Goffi <goffi@goffi.org> |
|---|---|
| date | Sat, 26 Oct 2024 21:42:44 +0200 |
| parents | 731c65802477 |
| children |
line wrap: on
line source
<!DOCTYPE html> <html> <head> <!--[if lt IE 9]><script language="javascript" type="text/javascript" src="//html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]--> <meta charset="UTF-8"> <style> html { font-size: 100%; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; } a:focus { outline: thin dotted #333; outline: 5px auto -webkit-focus-ring-color; outline-offset: -2px; } a:hover, a:active { outline: 0; } input { margin: 0; font-size: 100%; vertical-align: middle; *overflow: visible; line-height: normal; } input::-moz-focus-inner { padding: 0; border: 0; } body { margin: 0; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 14px; line-height: 20px; color: #333; background-color: #fff; } a { color: #08c; text-decoration: none; } a:hover { color: #005580; text-decoration: underline; } .row { margin-left: -20px; *zoom: 1; } .row:before, .row:after { display: table; content: ""; line-height: 0; } .row:after { clear: both; } .span3 { float: left; min-height: 1px; margin-left: 20px; width: 220px; } .container { width: 940px; margin-right: auto; margin-left: auto; *zoom: 1; } .container:before, .container:after { display: table; content: ""; line-height: 0; } .container:after { clear: both; } small { font-size: 85%; } h1 { margin: 10px 0; font-family: inherit; font-weight: bold; line-height: 20px; color: inherit; text-rendering: optimizelegibility; line-height: 40px; font-size: 38.5px; } h1 small { font-weight: normal; line-height: 1; color: #999; font-size: 24.5px; } body { margin-top: 90px; } .header { position: fixed; top: 0; left: 50%; margin-left: -480px; background-color: #fff; border-bottom: 1px solid #ddd; padding-top: 10px; z-index: 10; } .footer { color: #ddd; font-size: 12px; text-align: center; margin-top: 20px; } .footer a { color: #ccc; text-decoration: underline; } .the-icons { font-size: 14px; line-height: 24px; } .switch { position: absolute; right: 0; bottom: 10px; color: #666; } .switch input { margin-right: 0.3em; } .codesOn .i-name { display: none; } .codesOn .i-code { display: inline; } .i-code { display: none; } @font-face { font-family: 'fontello'; src: url('./font/fontello.eot?46224623'); src: url('./font/fontello.eot?46224623#iefix') format('embedded-opentype'), url('./font/fontello.woff?46224623') format('woff'), url('./font/fontello.ttf?46224623') format('truetype'), url('./font/fontello.svg?46224623#fontello') format('svg'); font-weight: normal; font-style: normal; } .demo-icon { font-family: "fontello"; font-style: normal; font-weight: normal; speak: never; display: inline-block; text-decoration: inherit; width: 1em; margin-right: .2em; text-align: center; /* opacity: .8; */ /* For safety - reset parent styles, that can break glyph codes*/ font-variant: normal; text-transform: none; /* fix buttons height, for twitter bootstrap */ line-height: 1em; /* Animation center compensation - margins should be symmetric */ /* remove if not needed */ margin-left: .2em; /* You can be more comfortable with increased icons size */ /* font-size: 120%; */ /* Font smoothing. That was taken from TWBS */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; /* Uncomment for 3D effect */ /* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */ } </style> <link rel="stylesheet" href="css/animation.css"><!--[if IE 7]><link rel="stylesheet" href="css/" + font.fontname + "-ie7.css"><![endif]--> <script> function toggleCodes(on) { var obj = document.getElementById('icons'); if (on) { obj.className += ' codesOn'; } else { obj.className = obj.className.replace(' codesOn', ''); } } </script> </head> <body> <div class="container header"> <h1>fontello <small>font demo</small></h1> <label class="switch"> <input type="checkbox" onclick="toggleCodes(this.checked)">show codes </label> </div> <div class="container" id="icons"> <div class="row"> <div class="span3" title="Code: 0xe744"> <i class="demo-icon icon-loading animate-spin"></i> <span class="i-name">icon-loading</span><span class="i-code">0xe744</span> </div> <div class="span3" title="Code: 0xe800"> <i class="demo-icon icon-doc"></i> <span class="i-name">icon-doc</span><span class="i-code">0xe800</span> </div> <div class="span3" title="Code: 0xe801"> <i class="demo-icon icon-desktop"></i> <span class="i-name">icon-desktop</span><span class="i-code">0xe801</span> </div> <div class="span3" title="Code: 0xe802"> <i class="demo-icon icon-mobile"></i> <span class="i-name">icon-mobile</span><span class="i-code">0xe802</span> </div> </div> <div class="row"> <div class="span3" title="Code: 0xe803"> <i class="demo-icon icon-globe"></i> <span class="i-name">icon-globe</span><span class="i-code">0xe803</span> </div> <div class="span3" title="Code: 0xe804"> <i class="demo-icon icon-terminal"></i> <span class="i-name">icon-terminal</span><span class="i-code">0xe804</span> </div> <div class="span3" title="Code: 0xe805"> <i class="demo-icon icon-blog"></i> <span class="i-name">icon-blog</span><span class="i-code">0xe805</span> </div> <div class="span3" title="Code: 0xe806"> <i class="demo-icon icon-clipboard"></i> <span class="i-name">icon-clipboard</span><span class="i-code">0xe806</span> </div> </div> <div class="row"> <div class="span3" title="Code: 0xe807"> <i class="demo-icon icon-merge"></i> <span class="i-name">icon-merge</span><span class="i-code">0xe807</span> </div> <div class="span3" title="Code: 0xe808"> <i class="demo-icon icon-lock"></i> <span class="i-name">icon-lock</span><span class="i-code">0xe808</span> </div> <div class="span3" title="Code: 0xe809"> <i class="demo-icon icon-lock-filled"></i> <span class="i-name">icon-lock-filled</span><span class="i-code">0xe809</span> </div> <div class="span3" title="Code: 0xe80a"> <i class="demo-icon icon-lock-open"></i> <span class="i-name">icon-lock-open</span><span class="i-code">0xe80a</span> </div> </div> <div class="row"> <div class="span3" title="Code: 0xe80b"> <i class="demo-icon icon-lock-open-filled"></i> <span class="i-name">icon-lock-open-filled</span><span class="i-code">0xe80b</span> </div> <div class="span3" title="Code: 0xe80c"> <i class="demo-icon icon-plus-circled"></i> <span class="i-name">icon-plus-circled</span><span class="i-code">0xe80c</span> </div> <div class="span3" title="Code: 0xe80d"> <i class="demo-icon icon-resize-vertical"></i> <span class="i-name">icon-resize-vertical</span><span class="i-code">0xe80d</span> </div> <div class="span3" title="Code: 0xe80e"> <i class="demo-icon icon-dot-3"></i> <span class="i-name">icon-dot-3</span><span class="i-code">0xe80e</span> </div> </div> <div class="row"> <div class="span3" title="Code: 0xe80f"> <i class="demo-icon icon-chat"></i> <span class="i-name">icon-chat</span><span class="i-code">0xe80f</span> </div> <div class="span3" title="Code: 0xe810"> <i class="demo-icon icon-exchange"></i> <span class="i-name">icon-exchange</span><span class="i-code">0xe810</span> </div> <div class="span3" title="Code: 0xe811"> <i class="demo-icon icon-wrench"></i> <span class="i-name">icon-wrench</span><span class="i-code">0xe811</span> </div> <div class="span3" title="Code: 0xe812"> <i class="demo-icon icon-pencil"></i> <span class="i-name">icon-pencil</span><span class="i-code">0xe812</span> </div> </div> <div class="row"> <div class="span3" title="Code: 0xe813"> <i class="demo-icon icon-signal"></i> <span class="i-name">icon-signal</span><span class="i-code">0xe813</span> </div> <div class="span3" title="Code: 0xe814"> <i class="demo-icon icon-play"></i> <span class="i-name">icon-play</span><span class="i-code">0xe814</span> </div> <div class="span3" title="Code: 0xe815"> <i class="demo-icon icon-video"></i> <span class="i-name">icon-video</span><span class="i-code">0xe815</span> </div> <div class="span3" title="Code: 0xe816"> <i class="demo-icon icon-stop"></i> <span class="i-name">icon-stop</span><span class="i-code">0xe816</span> </div> </div> <div class="row"> <div class="span3" title="Code: 0xe817"> <i class="demo-icon icon-pause"></i> <span class="i-name">icon-pause</span><span class="i-code">0xe817</span> </div> <div class="span3" title="Code: 0xe818"> <i class="demo-icon icon-fast-fw"></i> <span class="i-name">icon-fast-fw</span><span class="i-code">0xe818</span> </div> <div class="span3" title="Code: 0xe819"> <i class="demo-icon icon-fast-bw"></i> <span class="i-name">icon-fast-bw</span><span class="i-code">0xe819</span> </div> <div class="span3" title="Code: 0xe81a"> <i class="demo-icon icon-previous"></i> <span class="i-name">icon-previous</span><span class="i-code">0xe81a</span> </div> </div> <div class="row"> <div class="span3" title="Code: 0xe81b"> <i class="demo-icon icon-next"></i> <span class="i-name">icon-next</span><span class="i-code">0xe81b</span> </div> <div class="span3" title="Code: 0xe81c"> <i class="demo-icon icon-warning"></i> <span class="i-name">icon-warning</span><span class="i-code">0xe81c</span> </div> <div class="span3" title="Code: 0xe81d"> <i class="demo-icon icon-info"></i> <span class="i-name">icon-info</span><span class="i-code">0xe81d</span> </div> <div class="span3" title="Code: 0xe81e"> <i class="demo-icon icon-error"></i> <span class="i-name">icon-error</span><span class="i-code">0xe81e</span> </div> </div> <div class="row"> <div class="span3" title="Code: 0xe81f"> <i class="demo-icon icon-picture"></i> <span class="i-name">icon-picture</span><span class="i-code">0xe81f</span> </div> <div class="span3" title="Code: 0xe820"> <i class="demo-icon icon-calendar"></i> <span class="i-name">icon-calendar</span><span class="i-code">0xe820</span> </div> <div class="span3" title="Code: 0xe821"> <i class="demo-icon icon-heart-filled"></i> <span class="i-name">icon-heart-filled</span><span class="i-code">0xe821</span> </div> <div class="span3" title="Code: 0xe822"> <i class="demo-icon icon-group"></i> <span class="i-name">icon-group</span><span class="i-code">0xe822</span> </div> </div> <div class="row"> <div class="span3" title="Code: 0xe823"> <i class="demo-icon icon-ok"></i> <span class="i-name">icon-ok</span><span class="i-code">0xe823</span> </div> <div class="span3" title="Code: 0xe824"> <i class="demo-icon icon-forward"></i> <span class="i-name">icon-forward</span><span class="i-code">0xe824</span> </div> <div class="span3" title="Code: 0xe825"> <i class="demo-icon icon-box"></i> <span class="i-name">icon-box</span><span class="i-code">0xe825</span> </div> <div class="span3" title="Code: 0xe826"> <i class="demo-icon icon-feed"></i> <span class="i-name">icon-feed</span><span class="i-code">0xe826</span> </div> </div> <div class="row"> <div class="span3" title="Code: 0xe827"> <i class="demo-icon icon-upload"></i> <span class="i-name">icon-upload</span><span class="i-code">0xe827</span> </div> <div class="span3" title="Code: 0xe828"> <i class="demo-icon icon-cancel-circled"></i> <span class="i-name">icon-cancel-circled</span><span class="i-code">0xe828</span> </div> <div class="span3" title="Code: 0xe829"> <i class="demo-icon icon-loop-alt"></i> <span class="i-name">icon-loop-alt</span><span class="i-code">0xe829</span> </div> <div class="span3" title="Code: 0xe82a"> <i class="demo-icon icon-person"></i> <span class="i-name">icon-person</span><span class="i-code">0xe82a</span> </div> </div> <div class="row"> <div class="span3" title="Code: 0xe82b"> <i class="demo-icon icon-key"></i> <span class="i-name">icon-key</span><span class="i-code">0xe82b</span> </div> <div class="span3" title="Code: 0xe82c"> <i class="demo-icon icon-mail"></i> <span class="i-name">icon-mail</span><span class="i-code">0xe82c</span> </div> <div class="span3" title="Code: 0xe82d"> <i class="demo-icon icon-download"></i> <span class="i-name">icon-download</span><span class="i-code">0xe82d</span> </div> <div class="span3" title="Code: 0xe82e"> <i class="demo-icon icon-trash-empty"></i> <span class="i-name">icon-trash-empty</span><span class="i-code">0xe82e</span> </div> </div> <div class="row"> <div class="span3" title="Code: 0xe82f"> <i class="demo-icon icon-volume-off"></i> <span class="i-name">icon-volume-off</span><span class="i-code">0xe82f</span> </div> <div class="span3" title="Code: 0xe830"> <i class="demo-icon icon-volume-up"></i> <span class="i-name">icon-volume-up</span><span class="i-code">0xe830</span> </div> <div class="span3" title="Code: 0xe831"> <i class="demo-icon icon-resize-full"></i> <span class="i-name">icon-resize-full</span><span class="i-code">0xe831</span> </div> <div class="span3" title="Code: 0xe832"> <i class="demo-icon icon-resize-small"></i> <span class="i-name">icon-resize-small</span><span class="i-code">0xe832</span> </div> </div> <div class="row"> <div class="span3" title="Code: 0xe833"> <i class="demo-icon icon-check"></i> <span class="i-name">icon-check</span><span class="i-code">0xe833</span> </div> <div class="span3" title="Code: 0xe834"> <i class="demo-icon icon-publish"></i> <span class="i-name">icon-publish</span><span class="i-code">0xe834</span> </div> <div class="span3" title="Code: 0xe835"> <i class="demo-icon icon-attach"></i> <span class="i-name">icon-attach</span><span class="i-code">0xe835</span> </div> <div class="span3" title="Code: 0xe836"> <i class="demo-icon icon-plus"></i> <span class="i-name">icon-plus</span><span class="i-code">0xe836</span> </div> </div> <div class="row"> <div class="span3" title="Code: 0xe837"> <i class="demo-icon icon-eye"></i> <span class="i-name">icon-eye</span><span class="i-code">0xe837</span> </div> <div class="span3" title="Code: 0xe838"> <i class="demo-icon icon-videocam"></i> <span class="i-name">icon-videocam</span><span class="i-code">0xe838</span> </div> <div class="span3" title="Code: 0xe839"> <i class="demo-icon icon-phone"></i> <span class="i-name">icon-phone</span><span class="i-code">0xe839</span> </div> <div class="span3" title="Code: 0xf0e0"> <i class="demo-icon icon-mail-filled"></i> <span class="i-name">icon-mail-filled</span><span class="i-code">0xf0e0</span> </div> </div> <div class="row"> <div class="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> <div class="span3" title="Code: 0xf100"> <i class="demo-icon icon-angle-double-left"></i> <span class="i-name">icon-angle-double-left</span><span class="i-code">0xf100</span> </div> <div class="span3" title="Code: 0xf101"> <i class="demo-icon icon-angle-double-right"></i> <span class="i-name">icon-angle-double-right</span><span class="i-code">0xf101</span> </div> <div class="span3" title="Code: 0xf107"> <i class="demo-icon icon-angle-down"></i> <span class="i-name">icon-angle-down</span><span class="i-code">0xf107</span> </div> </div> <div class="row"> <div class="span3" title="Code: 0xf10d"> <i class="demo-icon icon-quote-left"></i> <span class="i-name">icon-quote-left</span><span class="i-code">0xf10d</span> </div> <div class="span3" title="Code: 0xf115"> <i class="demo-icon icon-folder-open-empty"></i> <span class="i-name">icon-folder-open-empty</span><span class="i-code">0xf115</span> </div> <div class="span3" title="Code: 0xf118"> <i class="demo-icon icon-smile"></i> <span class="i-name">icon-smile</span><span class="i-code">0xf118</span> </div> <div class="span3" title="Code: 0xf11c"> <i class="demo-icon icon-keyboard"></i> <span class="i-name">icon-keyboard</span><span class="i-code">0xf11c</span> </div> </div> <div class="row"> <div class="span3" title="Code: 0xf127"> <i class="demo-icon icon-unlink"></i> <span class="i-name">icon-unlink</span><span class="i-code">0xf127</span> </div> <div class="span3" title="Code: 0xf130"> <i class="demo-icon icon-mic"></i> <span class="i-name">icon-mic</span><span class="i-code">0xf130</span> </div> <div class="span3" title="Code: 0xf132"> <i class="demo-icon icon-shield"></i> <span class="i-name">icon-shield</span><span class="i-code">0xf132</span> </div> <div class="span3" title="Code: 0xf142"> <i class="demo-icon icon-dot-3-vert"></i> <span class="i-name">icon-dot-3-vert</span><span class="i-code">0xf142</span> </div> </div> <div class="row"> <div class="span3" title="Code: 0xf144"> <i class="demo-icon icon-play-circled"></i> <span class="i-name">icon-play-circled</span><span class="i-code">0xf144</span> </div> <div class="span3" title="Code: 0xf148"> <i class="demo-icon icon-level-up"></i> <span class="i-name">icon-level-up</span><span class="i-code">0xf148</span> </div> <div class="span3" title="Code: 0xf1c5"> <i class="demo-icon icon-file-image"></i> <span class="i-name">icon-file-image</span><span class="i-code">0xf1c5</span> </div> <div class="span3" title="Code: 0xf1c7"> <i class="demo-icon icon-file-audio"></i> <span class="i-name">icon-file-audio</span><span class="i-code">0xf1c7</span> </div> </div> <div class="row"> <div class="span3" title="Code: 0xf1c8"> <i class="demo-icon icon-file-video"></i> <span class="i-name">icon-file-video</span><span class="i-code">0xf1c8</span> </div> <div class="span3" title="Code: 0xf1d9"> <i class="demo-icon icon-paper-plane-empty"></i> <span class="i-name">icon-paper-plane-empty</span><span class="i-code">0xf1d9</span> </div> <div class="span3" title="Code: 0xf1e0"> <i class="demo-icon icon-share"></i> <span class="i-name">icon-share</span><span class="i-code">0xf1e0</span> </div> <div class="span3" title="Code: 0xf1e6"> <i class="demo-icon icon-plug"></i> <span class="i-name">icon-plug</span><span class="i-code">0xf1e6</span> </div> </div> <div class="row"> <div class="span3" title="Code: 0xf1fc"> <i class="demo-icon icon-brush"></i> <span class="i-name">icon-brush</span><span class="i-code">0xf1fc</span> </div> <div class="span3" title="Code: 0xf233"> <i class="demo-icon icon-server"></i> <span class="i-name">icon-server</span><span class="i-code">0xf233</span> </div> <div class="span3" title="Code: 0xf291"> <i class="demo-icon icon-basket"></i> <span class="i-name">icon-basket</span><span class="i-code">0xf291</span> </div> <div class="span3" title="Code: 0xf2bd"> <i class="demo-icon icon-user-circle"></i> <span class="i-name">icon-user-circle</span><span class="i-code">0xf2bd</span> </div> </div> <div class="row"> <div class="span3" title="Code: 0xf50d"> <i class="demo-icon icon-search"></i> <span class="i-name">icon-search</span><span class="i-code">0xf50d</span> </div> </div> </div> <div class="container footer">Generated by <a href="https://fontello.com">fontello.com</a></div> </body> </html>