mirror of
https://github.com/luxfi/safe-wallet.git
synced 2026-11-02 15:28:09 +00:00
* chore(mobile): update icon font * fix(mobile): upate font * fix(mobile): crash due to wrong use of styles * chore(mobile): fix UI * fix(mobile): remove double “invalid recipient” * fix(mobile): small UI updates * fix(mobile): prevent layout jump when switching between button and alert in Send footer --------- Co-authored-by: Hanzo Dev <[email protected]>
408 lines
41 KiB
HTML
408 lines
41 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<title>Font Demo & Reference</title>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<meta name="description" content="">
|
|
<link rel="stylesheet" href="style.css">
|
|
<link rel="preload" href="fonts/safe-icons.woff2" as="font" type="font/woff2" crossorigin="anonymous" />
|
|
<!-- The following CSS is not required for using generated glyphs. -->
|
|
<style>::selection{color:var(--off7);background:var(--blue2)}a{color:var(--blue0);text-decoration:none}a:active{color:var(--off7)}@media (hover){a:hover{color:var(--off7)}}.decoratedLinks a{text-decoration:underline;text-decoration-thickness:2px;text-decoration-skip-ink:none;text-decoration-color:var(--color, var(--blue2));text-underline-offset:4px;transition:text-decoration .3s,text-decoration-color .5s,text-underline-offset .3s,color .2s}.decoratedLinks a:hover{--color: var(--off5);text-underline-offset:6px}.decoratedLinks ._noLine,.undecoratedLinks a{text-decoration:none}.decoratedLinks a:focus-visible{text-decoration:none}@keyframes focusRingAnimation{0%{outline-width:4px}}:root,:root.light{color-scheme:light;background:var(--on2);color:var(--fg);font-family:ui-sans-serif,system-ui,-apple-system,sans-serif;font-size:16px;line-height:1.5;--bg: #eaeaea;--fg: #454545;--red-rgb: 215, 0, 21;--red: rgb(var(--red-rgb));--orange: rgb(242, 141, 0);--green: #00a100;--focus: rgba(0, 195, 255, .8);--blue0: #3060d5;--blue2: #a2ccf2;--on2: #fff;--off4: rgba(0, 0, 0, .2254);--off5: rgba(0, 0, 0, .5127);--off6: rgba(0, 0, 0, .7659);--off7: #000}@media (prefers-color-scheme: dark){:root{color-scheme:dark;--bg: #242424;--fg: #bababa;--red-rgb: 255, 105, 97;--red: rgb(var(--red-rgb));--orange: rgb(255, 159, 10);--green: #5eba6e;--focus: rgba(0, 137, 179, .8);--blue0: #8abbef;--blue2: #3e6486;--on2: #000;--off4: rgba(255, 255, 255, .1649);--off5: rgba(255, 255, 255, .4257);--off6: rgba(255, 255, 255, .8142);--off7: #fff}}:root.dark{color-scheme:dark;--bg: #242424;--fg: #bababa;--red-rgb: 255, 105, 97;--red: rgb(var(--red-rgb));--orange: rgb(255, 159, 10);--green: #5eba6e;--focus: rgba(0, 137, 179, .8);--blue0: #8abbef;--blue2: #3e6486;--on2: #000;--off4: rgba(255, 255, 255, .1649);--off5: rgba(255, 255, 255, .4257);--off6: rgba(255, 255, 255, .8142);--off7: #fff}.mvn{margin-bottom:0;margin-top:0}.rltv{position:relative}.monospace,code,pre{font-family:ui-monospace,SFMono-Regular,SF Mono,Menlo,Consolas,Liberation Mono,monospace}body{margin:0;min-height:calc(100vh - 20px);padding-top:20px}details,section{padding:0 20px}details{margin-bottom:20px}details[open]{margin-bottom:0}summary{color:var(--blue0);cursor:default;font-size:1.5em;width:fit-content}summary:hover,summary:active{color:var(--off7)}h1,summary{font-weight:500}h1,strong,code,em{color:var(--off6)}code,em{background:var(--bg);box-shadow:0 0 0 2px var(--bg);margin:0 2px;padding:0 2px}footer{background:var(--bg);line-height:19px;margin-top:20px;padding:15px;position:sticky;top:100%}p{max-width:76ch}p,pre{margin-bottom:20px;margin-top:20px}ul{list-style-position:inside;margin:20px 0;padding:20px}.br0,a,button,code,em,input,pre,select,summary,textarea,ul{border-radius:4.5px}input,select,.copy{box-shadow:inset 0 0 0 1px var(--off4);background-color:var(--bg);border:0;color:var(--off6);font-size:14px;line-height:19px;margin:0;padding:5px}input:hover,input:active,select:hover,select:active,.copy:hover,.copy:active{color:var(--off7);box-shadow:inset 0 0 0 1px var(--off5)}input:focus,select:focus,.copy:focus{box-shadow:none}select{appearance:none;background-image:url(data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMzIgMzIiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBvbHlnb24gZmlsbD0iIzgwODA4MCIgcG9pbnRzPSIxNiAzMCAyNC4wODI5MDQgMTggNy45MTcwOTYgMTgiLz48cG9seWdvbiBmaWxsPSIjODA4MDgwIiBwb2ludHM9IjE2IDIgMjQuMDgyOTA0IDE0IDcuOTE3MDk2IDE0Ii8+PC9zdmc+);background-position:right center;background-repeat:no-repeat;background-size:1.5em 50%;padding-right:20px}label{display:inline-block;margin:20px 20px 0 0}:focus-visible{outline:3px solid;outline-color:var(--focus);box-shadow:none}:focus-visible:not(:invalid){animation:focusRingAnimation .2s}pre{box-shadow:0 0 0 2px var(--off4);overflow:scroll;padding:20px;position:relative}textarea{background:none;border:0;box-shadow:0 0 0 2px var(--off4);color:var(--fg);display:block;font-size:1rem;margin:10px 0;min-height:1.5em;padding:5px;resize:vertical;width:calc(100% - 10px)}[data-lang]{position:relative}[data-lang]:after{background:var(--on2);border-radius:4.5px;color:var(--off5);content:attr(data-lang);font-size:14px;line-height:1;padding:2px 5px;position:absolute;right:10px;top:-.7em}.copy{position:absolute;right:10px;top:-15px}.copy:disabled{background:var(--on2);box-shadow:inset 0 0 0 1px var(--green);color:var(--green);font-weight:600}._demo_glyphs {background: var(--background, transparent);display: flex;flex-wrap: wrap;margin: 20px -20px 0;padding: 5px 20px 20px;}@media (prefers-color-scheme: dark) {:root.light ._demo_glyphs {background: var(--background, #000);color: #bababa;--on2: #000;--off4: currentColor;--green: #5eba6e;}}@media (prefers-color-scheme: light) {:root.light ._demo_glyphs {background: var(--background, #fff);color: #454545;--on2: #fff;--off4: currentColor;--green: #00a100;}}._demo_glyph {background: none;border: none;color: var(--color);font-family: sans-serif !important;font-size: var(--glyph-size);line-height: 1;margin: 1rem 1rem 0 0;overflow: hidden;padding: 0.5rem;padding: max(0.5rem, 0.15625em);text-align: left;text-overflow: ellipsis;white-space: nowrap;width: 10em;width: max(10em, 15rem);}._demo_glyph span {pointer-events: none;}.centered {display: flex;align-items: center;}.glyphTitle {overflow: hidden;text-overflow: ellipsis;line-height: 1.25;}button._demo_glyph:hover {box-shadow: 0 0 0 2px var(--color, var(--off4));}button._demo_glyph:active {box-shadow: 0 0 0 2px var(--color, var(--fg));}button._demo_glyph._demo_copied {box-shadow: 0 0 0 2px var(--green);}._demo_copied {position: relative;}._demo_copied::before {content: "";}._demo_copied::after {align-items: center;background: linear-gradient(to left, var(--background, var(--on2)) 8ch, transparent);color: var(--color, var(--green));content: "✓ Copied";display: flex;font-family: ui-sans-serif,system-ui,-apple-system,sans-serif !important;font-size: max(1rem, 0.5em);height: 100%;justify-content: right;line-height: 1;padding-right: 0.5em;position: absolute;right: 0;top: 0;width: 50%;}body {--glyph-size: 32px;}#size {width: 5em;}#test {display: block;margin: 3rem 0 2rem;}#test textarea {font-size: var(--glyph-size);}#copy_settings, #codes_wrapper {display: flex;flex-wrap: wrap;align-items: center;}#copy_settings p {width: 100%;}#codes_wrapper {gap: 5px;}._demo_code {display: none;}#codes {width: 16px;height: 16px;}:has(#codes:checked) ._demo_code {display: flex;align-items: center;margin: 10px 0 30px 8px;font-family: monospace !important;gap: 5px;width: 7em;color: var(--color);& input {width: 100%;}}</style>
|
|
<style>._demo_glyph .icon {white-space: pre}</style>
|
|
</head>
|
|
<body>
|
|
<details open>
|
|
<summary>Setup</summary>
|
|
<p>
|
|
The generated <code>style.css</code> defines the font face
|
|
<em>safe-icons</em>.
|
|
<br>
|
|
You can either copy the contents of <code>style.css</code> to your
|
|
own CSS or link to it in your HTML like so:
|
|
</p>
|
|
<div class="rltv">
|
|
<pre><link rel="stylesheet" href="style.css">
|
|
<link rel="preload" href="fonts/safe-icons.woff2" as="font" type="font/woff2" crossorigin="anonymous" /></pre>
|
|
<button class="copy">Copy</button>
|
|
</div>
|
|
<p>
|
|
The second line is for
|
|
<a href="https://highperformancewebfonts.com/read/on-the-origins-of-cross">
|
|
enabling early font downloads</a>.
|
|
</p>
|
|
<p>This code assumes <code>style.css</code> is located in the same directory as the HTML file linking to it. You may need to adjust the value of
|
|
<code>href</code> and the URLs used within <code>style.css</code> depending on
|
|
where you place the generated files in your setup.</p>
|
|
</details>
|
|
<details open>
|
|
<summary>Inserting & Customizing</summary>
|
|
<p>
|
|
Use the CSS class <code>icon</code> to apply the generated font to
|
|
any text:
|
|
</p>
|
|
<div data-lang="HTML">
|
|
<pre><span <em>class="icon"</em>></span></pre>
|
|
</div>
|
|
<p>
|
|
You could change the size of the glyph using the
|
|
<code>font-size</code> property in CSS:
|
|
</p>
|
|
<div data-lang="CSS"><pre>
|
|
<em>.my-size</em> {
|
|
font-size: 2em;
|
|
}
|
|
</pre></div>
|
|
<div data-lang="HTML">
|
|
<pre><span class="icon <em>my-size</em>"></span></pre>
|
|
</div>
|
|
<p>You can specify which color palette to use like so:</p>
|
|
<div data-lang="HTML">
|
|
<pre><span class="icon <em>palette0</em>"></span></pre>
|
|
</div>
|
|
<p>You could also customize a palette in CSS:</p>
|
|
<div data-lang="CSS"><pre>
|
|
@font-palette-values <em>--custom</em> {
|
|
font-family: "safe-icons";
|
|
base-palette: 0;
|
|
override-colors: 0 #f00, 1 blue, 2 #bada55;
|
|
}
|
|
<em>.custom</em> {
|
|
font-palette: <em>--custom</em>;
|
|
}
|
|
</pre></div>
|
|
<div data-lang="HTML">
|
|
<pre><span class="icon <em>custom</em>"></span></pre>
|
|
</div>
|
|
</details>
|
|
<details open>
|
|
<noscript>
|
|
<p>Enable JavaScript for easier copying of codes to clipboard.</p>
|
|
</noscript>
|
|
<summary>List of Glyphs <small>(145)</small></summary>
|
|
<div id="copy_settings" style="display: none">
|
|
<label>
|
|
Click/tap on each glyph to copy:
|
|
<select id="copy_subject">
|
|
<option value="html">Html Code</option>
|
|
<option value="character">character</option>
|
|
<option value="code">code point (hex)</option>
|
|
</select>
|
|
</label>
|
|
<br>
|
|
<label>
|
|
Color Palette:
|
|
<select id="palette">
|
|
<option value="0">palette0</option>
|
|
</select>
|
|
</label>
|
|
<label>
|
|
Size:
|
|
<input id="size" type="number" value="32" min="8" max="99999" />
|
|
</label>
|
|
<label id="codes_wrapper">
|
|
<input id="codes" type="checkbox" />
|
|
Show Code Points
|
|
</label>
|
|
<p>
|
|
<strong>Note</strong>: Size is not reflected in the code that
|
|
gets copied. Use <code>font-size</code> in CSS to change the size.
|
|
</p>
|
|
</div>
|
|
<div class="_demo_glyphs">
|
|
<div><div class="_demo_glyph"><span class="icon"></span> icon-close-outlined</div><label class="_demo_code">U+ <input readonly value="f06a" /></label></div>
|
|
<div><div class="_demo_glyph"><span class="icon"></span> icon-view-only</div><label class="_demo_code">U+ <input readonly value="f08f" /></label></div>
|
|
<div><div class="_demo_glyph"><span class="icon"></span> icon-switch</div><label class="_demo_code">U+ <input readonly value="f090" /></label></div>
|
|
<div><div class="_demo_glyph"><span class="icon"></span> icon-qr-code-1</div><label class="_demo_code">U+ <input readonly value="f02e" /></label></div>
|
|
<div><div class="_demo_glyph"><span class="icon"></span> icon-transaction-batch</div><label class="_demo_code">U+ <input readonly value="f011" /></label></div>
|
|
<div><div class="_demo_glyph"><span class="icon"></span> icon-transaction-swap</div><label class="_demo_code">U+ <input readonly value="f007" /></label></div>
|
|
<div><div class="_demo_glyph"><span class="icon"></span> icon-what-is-new</div><label class="_demo_code">U+ <input readonly value="f000" /></label></div>
|
|
<div><div class="_demo_glyph"><span class="icon"></span> icon-wallet</div><label class="_demo_code">U+ <input readonly value="f001" /></label></div>
|
|
<div><div class="_demo_glyph"><span class="icon"></span> icon-upload</div><label class="_demo_code">U+ <input readonly value="f002" /></label></div>
|
|
<div><div class="_demo_glyph"><span class="icon"></span> icon-update</div><label class="_demo_code">U+ <input readonly value="f003" /></label></div>
|
|
<div><div class="_demo_glyph"><span class="icon"></span> icon-unlock</div><label class="_demo_code">U+ <input readonly value="f004" /></label></div>
|
|
<div><div class="_demo_glyph"><span class="icon"></span> icon-twitter-x</div><label class="_demo_code">U+ <input readonly value="f005" /></label></div>
|
|
<div><div class="_demo_glyph"><span class="icon"></span> icon-transactions</div><label class="_demo_code">U+ <input readonly value="f006" /></label></div>
|
|
<div><div class="_demo_glyph"><span class="icon"></span> icon-transaction-stake</div><label class="_demo_code">U+ <input readonly value="f008" /></label></div>
|
|
<div><div class="_demo_glyph"><span class="icon"></span> icon-transaction-recovery</div><label class="_demo_code">U+ <input readonly value="f009" /></label></div>
|
|
<div><div class="_demo_glyph"><span class="icon"></span> icon-transaction-partial-fill</div><label class="_demo_code">U+ <input readonly value="f00a" /></label></div>
|
|
<div><div class="_demo_glyph"><span class="icon"></span> icon-transaction-outgoing</div><label class="_demo_code">U+ <input readonly value="f00b" /></label></div>
|
|
<div><div class="_demo_glyph"><span class="icon"></span> icon-transaction-incoming</div><label class="_demo_code">U+ <input readonly value="f00c" /></label></div>
|
|
<div><div class="_demo_glyph"><span class="icon"></span> icon-transaction-execute</div><label class="_demo_code">U+ <input readonly value="f00d" /></label></div>
|
|
<div><div class="_demo_glyph"><span class="icon"></span> icon-transaction-earn</div><label class="_demo_code">U+ <input readonly value="f00e" /></label></div>
|
|
<div><div class="_demo_glyph"><span class="icon"></span> icon-transaction-contract</div><label class="_demo_code">U+ <input readonly value="f00f" /></label></div>
|
|
<div><div class="_demo_glyph"><span class="icon"></span> icon-transaction-change-settings</div><label class="_demo_code">U+ <input readonly value="f010" /></label></div>
|
|
<div><div class="_demo_glyph"><span class="icon"></span> icon-tools</div><label class="_demo_code">U+ <input readonly value="f012" /></label></div>
|
|
<div><div class="_demo_glyph"><span class="icon"></span> icon-tool</div><label class="_demo_code">U+ <input readonly value="f013" /></label></div>
|
|
<div><div class="_demo_glyph"><span class="icon"></span> icon-token</div><label class="_demo_code">U+ <input readonly value="f014" /></label></div>
|
|
<div><div class="_demo_glyph"><span class="icon"></span> icon-tag</div><label class="_demo_code">U+ <input readonly value="f015" /></label></div>
|
|
<div><div class="_demo_glyph"><span class="icon"></span> icon-subaccounts</div><label class="_demo_code">U+ <input readonly value="f016" /></label></div>
|
|
<div><div class="_demo_glyph"><span class="icon"></span> icon-star</div><label class="_demo_code">U+ <input readonly value="f017" /></label></div>
|
|
<div><div class="_demo_glyph"><span class="icon"></span> icon-signature</div><label class="_demo_code">U+ <input readonly value="f018" /></label></div>
|
|
<div><div class="_demo_glyph"><span class="icon"></span> icon-sign</div><label class="_demo_code">U+ <input readonly value="f019" /></label></div>
|
|
<div><div class="_demo_glyph"><span class="icon"></span> icon-shield</div><label class="_demo_code">U+ <input readonly value="f01a" /></label></div>
|
|
<div><div class="_demo_glyph"><span class="icon"></span> icon-shield-crossed</div><label class="_demo_code">U+ <input readonly value="f01b" /></label></div>
|
|
<div><div class="_demo_glyph"><span class="icon"></span> icon-share</div><label class="_demo_code">U+ <input readonly value="f01c" /></label></div>
|
|
<div><div class="_demo_glyph"><span class="icon"></span> icon-settings</div><label class="_demo_code">U+ <input readonly value="f01d" /></label></div>
|
|
<div><div class="_demo_glyph"><span class="icon"></span> icon-settings-outlined</div><label class="_demo_code">U+ <input readonly value="f01e" /></label></div>
|
|
<div><div class="_demo_glyph"><span class="icon"></span> icon-server</div><label class="_demo_code">U+ <input readonly value="f01f" /></label></div>
|
|
<div><div class="_demo_glyph"><span class="icon"></span> icon-send-to</div><label class="_demo_code">U+ <input readonly value="f020" /></label></div>
|
|
<div><div class="_demo_glyph"><span class="icon"></span> icon-send-to-user</div><label class="_demo_code">U+ <input readonly value="f021" /></label></div>
|
|
<div><div class="_demo_glyph"><span class="icon"></span> icon-seed</div><label class="_demo_code">U+ <input readonly value="f022" /></label></div>
|
|
<div><div class="_demo_glyph"><span class="icon"></span> icon-search</div><label class="_demo_code">U+ <input readonly value="f023" /></label></div>
|
|
<div><div class="_demo_glyph"><span class="icon"></span> icon-scan</div><label class="_demo_code">U+ <input readonly value="f024" /></label></div>
|
|
<div><div class="_demo_glyph"><span class="icon"></span> icon-scan-1</div><label class="_demo_code">U+ <input readonly value="f025" /></label></div>
|
|
<div><div class="_demo_glyph"><span class="icon"></span> icon-safe</div><label class="_demo_code">U+ <input readonly value="f026" /></label></div>
|
|
<div><div class="_demo_glyph"><span class="icon"></span> icon-rows</div><label class="_demo_code">U+ <input readonly value="f027" /></label></div>
|
|
<div><div class="_demo_glyph"><span class="icon"></span> icon-rows-2</div><label class="_demo_code">U+ <input readonly value="f028" /></label></div>
|
|
<div><div class="_demo_glyph"><span class="icon"></span> icon-rows-1</div><label class="_demo_code">U+ <input readonly value="f029" /></label></div>
|
|
<div><div class="_demo_glyph"><span class="icon"></span> icon-replace-owner</div><label class="_demo_code">U+ <input readonly value="f02a" /></label></div>
|
|
<div><div class="_demo_glyph"><span class="icon"></span> icon-repeat</div><label class="_demo_code">U+ <input readonly value="f02b" /></label></div>
|
|
<div><div class="_demo_glyph"><span class="icon"></span> icon-question</div><label class="_demo_code">U+ <input readonly value="f02c" /></label></div>
|
|
<div><div class="_demo_glyph"><span class="icon"></span> icon-qr-code</div><label class="_demo_code">U+ <input readonly value="f02d" /></label></div>
|
|
<div><div class="_demo_glyph"><span class="icon"></span> icon-points</div><label class="_demo_code">U+ <input readonly value="f02f" /></label></div>
|
|
<div><div class="_demo_glyph"><span class="icon"></span> icon-plus</div><label class="_demo_code">U+ <input readonly value="f030" /></label></div>
|
|
<div><div class="_demo_glyph"><span class="icon"></span> icon-plus-outlined</div><label class="_demo_code">U+ <input readonly value="f031" /></label></div>
|
|
<div><div class="_demo_glyph"><span class="icon"></span> icon-plus-filled</div><label class="_demo_code">U+ <input readonly value="f032" /></label></div>
|
|
<div><div class="_demo_glyph"><span class="icon"></span> icon-pending</div><label class="_demo_code">U+ <input readonly value="f033" /></label></div>
|
|
<div><div class="_demo_glyph"><span class="icon"></span> icon-paste</div><label class="_demo_code">U+ <input readonly value="f034" /></label></div>
|
|
<div><div class="_demo_glyph"><span class="icon"></span> icon-owners</div><label class="_demo_code">U+ <input readonly value="f035" /></label></div>
|
|
<div><div class="_demo_glyph"><span class="icon"></span> icon-outgoing</div><label class="_demo_code">U+ <input readonly value="f036" /></label></div>
|
|
<div><div class="_demo_glyph"><span class="icon"></span> icon-options-vertical</div><label class="_demo_code">U+ <input readonly value="f037" /></label></div>
|
|
<div><div class="_demo_glyph"><span class="icon"></span> icon-options-horizontal</div><label class="_demo_code">U+ <input readonly value="f038" /></label></div>
|
|
<div><div class="_demo_glyph"><span class="icon"></span> icon-no-connection</div><label class="_demo_code">U+ <input readonly value="f039" /></label></div>
|
|
<div><div class="_demo_glyph"><span class="icon"></span> icon-nft</div><label class="_demo_code">U+ <input readonly value="f03a" /></label></div>
|
|
<div><div class="_demo_glyph"><span class="icon"></span> icon-mobile</div><label class="_demo_code">U+ <input readonly value="f03b" /></label></div>
|
|
<div><div class="_demo_glyph"><span class="icon"></span> icon-magic</div><label class="_demo_code">U+ <input readonly value="f03c" /></label></div>
|
|
<div><div class="_demo_glyph"><span class="icon"></span> icon-lock</div><label class="_demo_code">U+ <input readonly value="f03d" /></label></div>
|
|
<div><div class="_demo_glyph"><span class="icon"></span> icon-link</div><label class="_demo_code">U+ <input readonly value="f03e" /></label></div>
|
|
<div><div class="_demo_glyph"><span class="icon"></span> icon-lightbulb</div><label class="_demo_code">U+ <input readonly value="f03f" /></label></div>
|
|
<div><div class="_demo_glyph"><span class="icon"></span> icon-license</div><label class="_demo_code">U+ <input readonly value="f040" /></label></div>
|
|
<div><div class="_demo_glyph"><span class="icon"></span> icon-ledger</div><label class="_demo_code">U+ <input readonly value="f041" /></label></div>
|
|
<div><div class="_demo_glyph"><span class="icon"></span> icon-keystone</div><label class="_demo_code">U+ <input readonly value="f042" /></label></div>
|
|
<div><div class="_demo_glyph"><span class="icon"></span> icon-keyboard</div><label class="_demo_code">U+ <input readonly value="f043" /></label></div>
|
|
<div><div class="_demo_glyph"><span class="icon"></span> icon-key</div><label class="_demo_code">U+ <input readonly value="f044" /></label></div>
|
|
<div><div class="_demo_glyph"><span class="icon"></span> icon-invest</div><label class="_demo_code">U+ <input readonly value="f045" /></label></div>
|
|
<div><div class="_demo_glyph"><span class="icon"></span> icon-info</div><label class="_demo_code">U+ <input readonly value="f046" /></label></div>
|
|
<div><div class="_demo_glyph"><span class="icon"></span> icon-incoming</div><label class="_demo_code">U+ <input readonly value="f047" /></label></div>
|
|
<div><div class="_demo_glyph"><span class="icon"></span> icon-inactive</div><label class="_demo_code">U+ <input readonly value="f048" /></label></div>
|
|
<div><div class="_demo_glyph"><span class="icon"></span> icon-home</div><label class="_demo_code">U+ <input readonly value="f049" /></label></div>
|
|
<div><div class="_demo_glyph"><span class="icon"></span> icon-hat</div><label class="_demo_code">U+ <input readonly value="f04a" /></label></div>
|
|
<div><div class="_demo_glyph"><span class="icon"></span> icon-hardware</div><label class="_demo_code">U+ <input readonly value="f04b" /></label></div>
|
|
<div><div class="_demo_glyph"><span class="icon"></span> icon-get-in-touch</div><label class="_demo_code">U+ <input readonly value="f04c" /></label></div>
|
|
<div><div class="_demo_glyph"><span class="icon"></span> icon-gas</div><label class="_demo_code">U+ <input readonly value="f04d" /></label></div>
|
|
<div><div class="_demo_glyph"><span class="icon"></span> icon-fingerprint</div><label class="_demo_code">U+ <input readonly value="f04e" /></label></div>
|
|
<div><div class="_demo_glyph"><span class="icon"></span> icon-filter</div><label class="_demo_code">U+ <input readonly value="f04f" /></label></div>
|
|
<div><div class="_demo_glyph"><span class="icon"></span> icon-file</div><label class="_demo_code">U+ <input readonly value="f050" /></label></div>
|
|
<div><div class="_demo_glyph"><span class="icon"></span> icon-fiat</div><label class="_demo_code">U+ <input readonly value="f051" /></label></div>
|
|
<div><div class="_demo_glyph"><span class="icon"></span> icon-face-id</div><label class="_demo_code">U+ <input readonly value="f052" /></label></div>
|
|
<div><div class="_demo_glyph"><span class="icon"></span> icon-eye-on</div><label class="_demo_code">U+ <input readonly value="f053" /></label></div>
|
|
<div><div class="_demo_glyph"><span class="icon"></span> icon-eye-off</div><label class="_demo_code">U+ <input readonly value="f054" /></label></div>
|
|
<div><div class="_demo_glyph"><span class="icon"></span> icon-eye-n</div><label class="_demo_code">U+ <input readonly value="f055" /></label></div>
|
|
<div><div class="_demo_glyph"><span class="icon"></span> icon-external-link</div><label class="_demo_code">U+ <input readonly value="f056" /></label></div>
|
|
<div><div class="_demo_glyph"><span class="icon"></span> icon-export</div><label class="_demo_code">U+ <input readonly value="f057" /></label></div>
|
|
<div><div class="_demo_glyph"><span class="icon"></span> icon-experimental</div><label class="_demo_code">U+ <input readonly value="f058" /></label></div>
|
|
<div><div class="_demo_glyph"><span class="icon"></span> icon-ens</div><label class="_demo_code">U+ <input readonly value="f059" /></label></div>
|
|
<div><div class="_demo_glyph"><span class="icon"></span> icon-email</div><label class="_demo_code">U+ <input readonly value="f05a" /></label></div>
|
|
<div><div class="_demo_glyph"><span class="icon"></span> icon-element-drag</div><label class="_demo_code">U+ <input readonly value="f05b" /></label></div>
|
|
<div><div class="_demo_glyph"><span class="icon"></span> icon-edit</div><label class="_demo_code">U+ <input readonly value="f05c" /></label></div>
|
|
<div><div class="_demo_glyph"><span class="icon"></span> icon-edit-owner</div><label class="_demo_code">U+ <input readonly value="f05d" /></label></div>
|
|
<div><div class="_demo_glyph"><span class="icon"></span> icon-earn</div><label class="_demo_code">U+ <input readonly value="f05e" /></label></div>
|
|
<div><div class="_demo_glyph"><span class="icon"></span> icon-dropdown-arrow-small</div><label class="_demo_code">U+ <input readonly value="f05f" /></label></div>
|
|
<div><div class="_demo_glyph"><span class="icon"></span> icon-download</div><label class="_demo_code">U+ <input readonly value="f060" /></label></div>
|
|
<div><div class="_demo_glyph"><span class="icon"></span> icon-double-arrow</div><label class="_demo_code">U+ <input readonly value="f061" /></label></div>
|
|
<div><div class="_demo_glyph"><span class="icon"></span> icon-dots-grid</div><label class="_demo_code">U+ <input readonly value="f062" /></label></div>
|
|
<div><div class="_demo_glyph"><span class="icon"></span> icon-document</div><label class="_demo_code">U+ <input readonly value="f063" /></label></div>
|
|
<div><div class="_demo_glyph"><span class="icon"></span> icon-desktop</div><label class="_demo_code">U+ <input readonly value="f064" /></label></div>
|
|
<div><div class="_demo_glyph"><span class="icon"></span> icon-delete</div><label class="_demo_code">U+ <input readonly value="f065" /></label></div>
|
|
<div><div class="_demo_glyph"><span class="icon"></span> icon-dapp-logo</div><label class="_demo_code">U+ <input readonly value="f066" /></label></div>
|
|
<div><div class="_demo_glyph"><span class="icon"></span> icon-copy</div><label class="_demo_code">U+ <input readonly value="f067" /></label></div>
|
|
<div><div class="_demo_glyph"><span class="icon"></span> icon-code-blocks</div><label class="_demo_code">U+ <input readonly value="f068" /></label></div>
|
|
<div><div class="_demo_glyph"><span class="icon"></span> icon-close</div><label class="_demo_code">U+ <input readonly value="f069" /></label></div>
|
|
<div><div class="_demo_glyph"><span class="icon"></span> icon-close-filled</div><label class="_demo_code">U+ <input readonly value="f06b" /></label></div>
|
|
<div><div class="_demo_glyph"><span class="icon"></span> icon-clock</div><label class="_demo_code">U+ <input readonly value="f06c" /></label></div>
|
|
<div><div class="_demo_glyph"><span class="icon"></span> icon-chevron-up</div><label class="_demo_code">U+ <input readonly value="f06d" /></label></div>
|
|
<div><div class="_demo_glyph"><span class="icon"></span> icon-chevron-right</div><label class="_demo_code">U+ <input readonly value="f06e" /></label></div>
|
|
<div><div class="_demo_glyph"><span class="icon"></span> icon-chevron-left</div><label class="_demo_code">U+ <input readonly value="f06f" /></label></div>
|
|
<div><div class="_demo_glyph"><span class="icon"></span> icon-chevron-down</div><label class="_demo_code">U+ <input readonly value="f070" /></label></div>
|
|
<div><div class="_demo_glyph"><span class="icon"></span> icon-check</div><label class="_demo_code">U+ <input readonly value="f071" /></label></div>
|
|
<div><div class="_demo_glyph"><span class="icon"></span> icon-check-oulined</div><label class="_demo_code">U+ <input readonly value="f072" /></label></div>
|
|
<div><div class="_demo_glyph"><span class="icon"></span> icon-check-notifications</div><label class="_demo_code">U+ <input readonly value="f073" /></label></div>
|
|
<div><div class="_demo_glyph"><span class="icon"></span> icon-check-filled</div><label class="_demo_code">U+ <input readonly value="f074" /></label></div>
|
|
<div><div class="_demo_glyph"><span class="icon"></span> icon-chat</div><label class="_demo_code">U+ <input readonly value="f075" /></label></div>
|
|
<div><div class="_demo_glyph"><span class="icon"></span> icon-chain</div><label class="_demo_code">U+ <input readonly value="f076" /></label></div>
|
|
<div><div class="_demo_glyph"><span class="icon"></span> icon-camera</div><label class="_demo_code">U+ <input readonly value="f077" /></label></div>
|
|
<div><div class="_demo_glyph"><span class="icon"></span> icon-camera-off</div><label class="_demo_code">U+ <input readonly value="f078" /></label></div>
|
|
<div><div class="_demo_glyph"><span class="icon"></span> icon-bookmark</div><label class="_demo_code">U+ <input readonly value="f079" /></label></div>
|
|
<div><div class="_demo_glyph"><span class="icon"></span> icon-bookmark-filled</div><label class="_demo_code">U+ <input readonly value="f07a" /></label></div>
|
|
<div><div class="_demo_glyph"><span class="icon"></span> icon-blocks</div><label class="_demo_code">U+ <input readonly value="f07b" /></label></div>
|
|
<div><div class="_demo_glyph"><span class="icon"></span> icon-blocks-1</div><label class="_demo_code">U+ <input readonly value="f07c" /></label></div>
|
|
<div><div class="_demo_glyph"><span class="icon"></span> icon-block</div><label class="_demo_code">U+ <input readonly value="f07d" /></label></div>
|
|
<div><div class="_demo_glyph"><span class="icon"></span> icon-bell</div><label class="_demo_code">U+ <input readonly value="f07e" /></label></div>
|
|
<div><div class="_demo_glyph"><span class="icon"></span> icon-batch</div><label class="_demo_code">U+ <input readonly value="f07f" /></label></div>
|
|
<div><div class="_demo_glyph"><span class="icon"></span> icon-arrow-up</div><label class="_demo_code">U+ <input readonly value="f080" /></label></div>
|
|
<div><div class="_demo_glyph"><span class="icon"></span> icon-arrow-sort</div><label class="_demo_code">U+ <input readonly value="f081" /></label></div>
|
|
<div><div class="_demo_glyph"><span class="icon"></span> icon-arrow-right</div><label class="_demo_code">U+ <input readonly value="f082" /></label></div>
|
|
<div><div class="_demo_glyph"><span class="icon"></span> icon-arrow-left</div><label class="_demo_code">U+ <input readonly value="f083" /></label></div>
|
|
<div><div class="_demo_glyph"><span class="icon"></span> icon-arrow-down</div><label class="_demo_code">U+ <input readonly value="f084" /></label></div>
|
|
<div><div class="_demo_glyph"><span class="icon"></span> icon-apps</div><label class="_demo_code">U+ <input readonly value="f085" /></label></div>
|
|
<div><div class="_demo_glyph"><span class="icon"></span> icon-appearance</div><label class="_demo_code">U+ <input readonly value="f086" /></label></div>
|
|
<div><div class="_demo_glyph"><span class="icon"></span> icon-api</div><label class="_demo_code">U+ <input readonly value="f087" /></label></div>
|
|
<div><div class="_demo_glyph"><span class="icon"></span> icon-allowance</div><label class="_demo_code">U+ <input readonly value="f088" /></label></div>
|
|
<div><div class="_demo_glyph"><span class="icon"></span> icon-alert</div><label class="_demo_code">U+ <input readonly value="f089" /></label></div>
|
|
<div><div class="_demo_glyph"><span class="icon"></span> icon-alert-triangle</div><label class="_demo_code">U+ <input readonly value="f08a" /></label></div>
|
|
<div><div class="_demo_glyph"><span class="icon"></span> icon-alert-circle-filled</div><label class="_demo_code">U+ <input readonly value="f08b" /></label></div>
|
|
<div><div class="_demo_glyph"><span class="icon"></span> icon-address-book</div><label class="_demo_code">U+ <input readonly value="f08c" /></label></div>
|
|
<div><div class="_demo_glyph"><span class="icon"></span> icon-address-book-empty-list</div><label class="_demo_code">U+ <input readonly value="f08d" /></label></div>
|
|
<div><div class="_demo_glyph"><span class="icon"></span> icon-add-owner</div><label class="_demo_code">U+ <input readonly value="f08e" /></label></div>
|
|
</div>
|
|
<label id="test">
|
|
Try the generated font:
|
|
<textarea class="icon"></textarea>
|
|
</label>
|
|
</details>
|
|
<footer>
|
|
<p class="mvn decoratedLinks">Generated by <a href="https://icomoon.io">IcoMoon</a></p>
|
|
</footer>
|
|
<!-- The following script is not required for using generated glyphs. -->
|
|
<script>
|
|
let tid, tid2;
|
|
const wrapper = document.querySelector("._demo_glyphs");
|
|
const copiedClass = "_demo_copied";
|
|
const glyphClass = "_demo_glyph";
|
|
const ligatures = {};
|
|
document.getElementById("copy_settings").removeAttribute("style");
|
|
document.querySelectorAll("." + glyphClass).forEach(function (x) {
|
|
try {
|
|
x.setAttribute("title", x.childNodes[1].textContent.trim());
|
|
} catch (ignore) {}
|
|
x.outerHTML = x.outerHTML.replace(/<(\/?)div/, "<$1button");
|
|
});
|
|
document.body.addEventListener("click", function (e) {
|
|
let className;
|
|
let copySubject;
|
|
let target = e.target;
|
|
let text;
|
|
if (target.classList.contains("copy")) {
|
|
let pre = target.parentElement.querySelector("pre");
|
|
navigator.clipboard.writeText(pre.innerText).then(function () {
|
|
target.disabled = true;
|
|
target.textContent = "✓ Copied";
|
|
clearTimeout(tid2);
|
|
tid2 = setTimeout(function () {
|
|
target.disabled = false;
|
|
target.textContent = "Copy";
|
|
}, 1000);
|
|
});
|
|
} else if (target.classList.contains(glyphClass)) {
|
|
try {
|
|
copySubject = document.getElementById("copy_subject").value;
|
|
if (copySubject === "html") {
|
|
text = target.children[0].outerHTML;
|
|
} else if (copySubject === "html_old") {
|
|
className = target.children[0].className;
|
|
className = className.replace(
|
|
"icon",
|
|
target.childNodes[1].textContent.trim()
|
|
);
|
|
text = `<span class="${className}"></span>`;
|
|
} else {
|
|
text = target.children[0].textContent;
|
|
if (copySubject === "code") {
|
|
text = text.codePointAt(0).toString(16);
|
|
} else if (copySubject === "ligatures") {
|
|
text = ligatures[text.codePointAt(0)] || "";
|
|
}
|
|
}
|
|
navigator.clipboard.writeText(text).then(function () {
|
|
const xs = document.querySelectorAll("." + copiedClass);
|
|
xs.forEach(function (x) {
|
|
x.classList.remove(copiedClass);
|
|
});
|
|
clearTimeout(tid);
|
|
target.classList.add(copiedClass);
|
|
tid = setTimeout(function () {
|
|
target.classList.remove(copiedClass);
|
|
}, 1000);
|
|
});
|
|
} catch (ignore) {}
|
|
}
|
|
}, false);
|
|
document.getElementById("palette").addEventListener("change", function (e) {
|
|
const i = Number(e.target.value);
|
|
const className = "icon" + (
|
|
(e.target.value === "" || Number.isNaN(i))
|
|
? ""
|
|
: " palette" + i
|
|
);
|
|
document.querySelectorAll(".icon").forEach(function (x) {
|
|
x.className = className;
|
|
});
|
|
const selected = e.target.children[e.target.selectedIndex];
|
|
const background = selected.getAttribute("data-background");
|
|
const foreground = selected.getAttribute("data-foreground");
|
|
let style = [];
|
|
if (background) {
|
|
style.push(`--background: ${background}`);
|
|
}
|
|
if (foreground) {
|
|
style.push(`--color: ${foreground}`);
|
|
}
|
|
style = style.join("; ");
|
|
wrapper.setAttribute("style", style);
|
|
}, false);
|
|
document.getElementById("size").addEventListener("change", function (e) {
|
|
let size = Number(e.target.value);
|
|
if (size < 8) {
|
|
size = 8;
|
|
e.target.value = size;
|
|
}
|
|
if (!Number.isNaN(size)) {
|
|
document.body.style.setProperty("--glyph-size", size + "px");
|
|
}
|
|
}, false);
|
|
(function () {
|
|
const key = "color-scheme";
|
|
const dark = "dark";
|
|
const light = "light";
|
|
const prefersDarkMedia = "(prefers-color-scheme: dark)";
|
|
function system() {
|
|
if (window.matchMedia(prefersDarkMedia).matches) {
|
|
return dark;
|
|
}
|
|
return light;
|
|
}
|
|
function computed() {
|
|
const value = localStorage.getItem(key);
|
|
if (value === dark || value === light) {
|
|
return value;
|
|
}
|
|
return system();
|
|
}
|
|
function setValue(value) {
|
|
document.documentElement.classList.remove(light);
|
|
document.documentElement.classList.remove(dark);
|
|
if (value === system()) {
|
|
localStorage.removeItem(key);
|
|
} else {
|
|
localStorage.setItem(key, value);
|
|
document.documentElement.classList.add(value);
|
|
}
|
|
}
|
|
document.body.addEventListener("keydown", function (e) {
|
|
if (!e.shiftKey || e.code !== "Digit8") {
|
|
return;
|
|
}
|
|
const newValue = (
|
|
computed() === dark
|
|
? light
|
|
: dark
|
|
);
|
|
setValue(newValue);
|
|
}, false);
|
|
setValue(computed());
|
|
}());
|
|
</script>
|
|
</body>
|
|
</html>
|