Files
511069c60d fix(mobile): design review UI fixes for Send flow and account sheets (#7356)
* 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]>
2026-03-06 17:10:09 +01:00

408 lines
41 KiB
HTML

<!doctype html>
<html lang="en">
<head>
<title>Font Demo &amp; 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>&lt;link rel="stylesheet" href="style.css"&gt;
&lt;link rel="preload" href="fonts/safe-icons.woff2" as="font" type="font/woff2" crossorigin="anonymous" /&gt;</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 &amp; Customizing</summary>
<p>
Use the CSS class <code>icon</code> to apply the generated font to
any text:
</p>
<div data-lang="HTML">
<pre>&lt;span <em>class="icon"</em>&gt;&#xf06a;&lt;/span&gt;</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>&lt;span class="icon <em>my-size</em>"&gt;&#xf06a;&lt;/span&gt;</pre>
</div>
<p>You can specify which color palette to use like so:</p>
<div data-lang="HTML">
<pre>&lt;span class="icon <em>palette0</em>"&gt;&#xf06a;&lt;/span&gt;</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>&lt;span class="icon <em>custom</em>"&gt;&#xf06a;&lt;/span&gt;</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">&#xf06a;</span> icon-close-outlined</div><label class="_demo_code">U+ <input readonly value="f06a" /></label></div>
<div><div class="_demo_glyph"><span class="icon">&#xf08f;</span> icon-view-only</div><label class="_demo_code">U+ <input readonly value="f08f" /></label></div>
<div><div class="_demo_glyph"><span class="icon">&#xf090;</span> icon-switch</div><label class="_demo_code">U+ <input readonly value="f090" /></label></div>
<div><div class="_demo_glyph"><span class="icon">&#xf02e;</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">&#xf011;</span> icon-transaction-batch</div><label class="_demo_code">U+ <input readonly value="f011" /></label></div>
<div><div class="_demo_glyph"><span class="icon">&#xf007;</span> icon-transaction-swap</div><label class="_demo_code">U+ <input readonly value="f007" /></label></div>
<div><div class="_demo_glyph"><span class="icon">&#xf000;</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">&#xf001;</span> icon-wallet</div><label class="_demo_code">U+ <input readonly value="f001" /></label></div>
<div><div class="_demo_glyph"><span class="icon">&#xf002;</span> icon-upload</div><label class="_demo_code">U+ <input readonly value="f002" /></label></div>
<div><div class="_demo_glyph"><span class="icon">&#xf003;</span> icon-update</div><label class="_demo_code">U+ <input readonly value="f003" /></label></div>
<div><div class="_demo_glyph"><span class="icon">&#xf004;</span> icon-unlock</div><label class="_demo_code">U+ <input readonly value="f004" /></label></div>
<div><div class="_demo_glyph"><span class="icon">&#xf005;</span> icon-twitter-x</div><label class="_demo_code">U+ <input readonly value="f005" /></label></div>
<div><div class="_demo_glyph"><span class="icon">&#xf006;</span> icon-transactions</div><label class="_demo_code">U+ <input readonly value="f006" /></label></div>
<div><div class="_demo_glyph"><span class="icon">&#xf008;</span> icon-transaction-stake</div><label class="_demo_code">U+ <input readonly value="f008" /></label></div>
<div><div class="_demo_glyph"><span class="icon">&#xf009;</span> icon-transaction-recovery</div><label class="_demo_code">U+ <input readonly value="f009" /></label></div>
<div><div class="_demo_glyph"><span class="icon">&#xf00a;</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">&#xf00b;</span> icon-transaction-outgoing</div><label class="_demo_code">U+ <input readonly value="f00b" /></label></div>
<div><div class="_demo_glyph"><span class="icon">&#xf00c;</span> icon-transaction-incoming</div><label class="_demo_code">U+ <input readonly value="f00c" /></label></div>
<div><div class="_demo_glyph"><span class="icon">&#xf00d;</span> icon-transaction-execute</div><label class="_demo_code">U+ <input readonly value="f00d" /></label></div>
<div><div class="_demo_glyph"><span class="icon">&#xf00e;</span> icon-transaction-earn</div><label class="_demo_code">U+ <input readonly value="f00e" /></label></div>
<div><div class="_demo_glyph"><span class="icon">&#xf00f;</span> icon-transaction-contract</div><label class="_demo_code">U+ <input readonly value="f00f" /></label></div>
<div><div class="_demo_glyph"><span class="icon">&#xf010;</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">&#xf012;</span> icon-tools</div><label class="_demo_code">U+ <input readonly value="f012" /></label></div>
<div><div class="_demo_glyph"><span class="icon">&#xf013;</span> icon-tool</div><label class="_demo_code">U+ <input readonly value="f013" /></label></div>
<div><div class="_demo_glyph"><span class="icon">&#xf014;</span> icon-token</div><label class="_demo_code">U+ <input readonly value="f014" /></label></div>
<div><div class="_demo_glyph"><span class="icon">&#xf015;</span> icon-tag</div><label class="_demo_code">U+ <input readonly value="f015" /></label></div>
<div><div class="_demo_glyph"><span class="icon">&#xf016;</span> icon-subaccounts</div><label class="_demo_code">U+ <input readonly value="f016" /></label></div>
<div><div class="_demo_glyph"><span class="icon">&#xf017;</span> icon-star</div><label class="_demo_code">U+ <input readonly value="f017" /></label></div>
<div><div class="_demo_glyph"><span class="icon">&#xf018;</span> icon-signature</div><label class="_demo_code">U+ <input readonly value="f018" /></label></div>
<div><div class="_demo_glyph"><span class="icon">&#xf019;</span> icon-sign</div><label class="_demo_code">U+ <input readonly value="f019" /></label></div>
<div><div class="_demo_glyph"><span class="icon">&#xf01a;</span> icon-shield</div><label class="_demo_code">U+ <input readonly value="f01a" /></label></div>
<div><div class="_demo_glyph"><span class="icon">&#xf01b;</span> icon-shield-crossed</div><label class="_demo_code">U+ <input readonly value="f01b" /></label></div>
<div><div class="_demo_glyph"><span class="icon">&#xf01c;</span> icon-share</div><label class="_demo_code">U+ <input readonly value="f01c" /></label></div>
<div><div class="_demo_glyph"><span class="icon">&#xf01d;</span> icon-settings</div><label class="_demo_code">U+ <input readonly value="f01d" /></label></div>
<div><div class="_demo_glyph"><span class="icon">&#xf01e;</span> icon-settings-outlined</div><label class="_demo_code">U+ <input readonly value="f01e" /></label></div>
<div><div class="_demo_glyph"><span class="icon">&#xf01f;</span> icon-server</div><label class="_demo_code">U+ <input readonly value="f01f" /></label></div>
<div><div class="_demo_glyph"><span class="icon">&#xf020;</span> icon-send-to</div><label class="_demo_code">U+ <input readonly value="f020" /></label></div>
<div><div class="_demo_glyph"><span class="icon">&#xf021;</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">&#xf022;</span> icon-seed</div><label class="_demo_code">U+ <input readonly value="f022" /></label></div>
<div><div class="_demo_glyph"><span class="icon">&#xf023;</span> icon-search</div><label class="_demo_code">U+ <input readonly value="f023" /></label></div>
<div><div class="_demo_glyph"><span class="icon">&#xf024;</span> icon-scan</div><label class="_demo_code">U+ <input readonly value="f024" /></label></div>
<div><div class="_demo_glyph"><span class="icon">&#xf025;</span> icon-scan-1</div><label class="_demo_code">U+ <input readonly value="f025" /></label></div>
<div><div class="_demo_glyph"><span class="icon">&#xf026;</span> icon-safe</div><label class="_demo_code">U+ <input readonly value="f026" /></label></div>
<div><div class="_demo_glyph"><span class="icon">&#xf027;</span> icon-rows</div><label class="_demo_code">U+ <input readonly value="f027" /></label></div>
<div><div class="_demo_glyph"><span class="icon">&#xf028;</span> icon-rows-2</div><label class="_demo_code">U+ <input readonly value="f028" /></label></div>
<div><div class="_demo_glyph"><span class="icon">&#xf029;</span> icon-rows-1</div><label class="_demo_code">U+ <input readonly value="f029" /></label></div>
<div><div class="_demo_glyph"><span class="icon">&#xf02a;</span> icon-replace-owner</div><label class="_demo_code">U+ <input readonly value="f02a" /></label></div>
<div><div class="_demo_glyph"><span class="icon">&#xf02b;</span> icon-repeat</div><label class="_demo_code">U+ <input readonly value="f02b" /></label></div>
<div><div class="_demo_glyph"><span class="icon">&#xf02c;</span> icon-question</div><label class="_demo_code">U+ <input readonly value="f02c" /></label></div>
<div><div class="_demo_glyph"><span class="icon">&#xf02d;</span> icon-qr-code</div><label class="_demo_code">U+ <input readonly value="f02d" /></label></div>
<div><div class="_demo_glyph"><span class="icon">&#xf02f;</span> icon-points</div><label class="_demo_code">U+ <input readonly value="f02f" /></label></div>
<div><div class="_demo_glyph"><span class="icon">&#xf030;</span> icon-plus</div><label class="_demo_code">U+ <input readonly value="f030" /></label></div>
<div><div class="_demo_glyph"><span class="icon">&#xf031;</span> icon-plus-outlined</div><label class="_demo_code">U+ <input readonly value="f031" /></label></div>
<div><div class="_demo_glyph"><span class="icon">&#xf032;</span> icon-plus-filled</div><label class="_demo_code">U+ <input readonly value="f032" /></label></div>
<div><div class="_demo_glyph"><span class="icon">&#xf033;</span> icon-pending</div><label class="_demo_code">U+ <input readonly value="f033" /></label></div>
<div><div class="_demo_glyph"><span class="icon">&#xf034;</span> icon-paste</div><label class="_demo_code">U+ <input readonly value="f034" /></label></div>
<div><div class="_demo_glyph"><span class="icon">&#xf035;</span> icon-owners</div><label class="_demo_code">U+ <input readonly value="f035" /></label></div>
<div><div class="_demo_glyph"><span class="icon">&#xf036;</span> icon-outgoing</div><label class="_demo_code">U+ <input readonly value="f036" /></label></div>
<div><div class="_demo_glyph"><span class="icon">&#xf037;</span> icon-options-vertical</div><label class="_demo_code">U+ <input readonly value="f037" /></label></div>
<div><div class="_demo_glyph"><span class="icon">&#xf038;</span> icon-options-horizontal</div><label class="_demo_code">U+ <input readonly value="f038" /></label></div>
<div><div class="_demo_glyph"><span class="icon">&#xf039;</span> icon-no-connection</div><label class="_demo_code">U+ <input readonly value="f039" /></label></div>
<div><div class="_demo_glyph"><span class="icon">&#xf03a;</span> icon-nft</div><label class="_demo_code">U+ <input readonly value="f03a" /></label></div>
<div><div class="_demo_glyph"><span class="icon">&#xf03b;</span> icon-mobile</div><label class="_demo_code">U+ <input readonly value="f03b" /></label></div>
<div><div class="_demo_glyph"><span class="icon">&#xf03c;</span> icon-magic</div><label class="_demo_code">U+ <input readonly value="f03c" /></label></div>
<div><div class="_demo_glyph"><span class="icon">&#xf03d;</span> icon-lock</div><label class="_demo_code">U+ <input readonly value="f03d" /></label></div>
<div><div class="_demo_glyph"><span class="icon">&#xf03e;</span> icon-link</div><label class="_demo_code">U+ <input readonly value="f03e" /></label></div>
<div><div class="_demo_glyph"><span class="icon">&#xf03f;</span> icon-lightbulb</div><label class="_demo_code">U+ <input readonly value="f03f" /></label></div>
<div><div class="_demo_glyph"><span class="icon">&#xf040;</span> icon-license</div><label class="_demo_code">U+ <input readonly value="f040" /></label></div>
<div><div class="_demo_glyph"><span class="icon">&#xf041;</span> icon-ledger</div><label class="_demo_code">U+ <input readonly value="f041" /></label></div>
<div><div class="_demo_glyph"><span class="icon">&#xf042;</span> icon-keystone</div><label class="_demo_code">U+ <input readonly value="f042" /></label></div>
<div><div class="_demo_glyph"><span class="icon">&#xf043;</span> icon-keyboard</div><label class="_demo_code">U+ <input readonly value="f043" /></label></div>
<div><div class="_demo_glyph"><span class="icon">&#xf044;</span> icon-key</div><label class="_demo_code">U+ <input readonly value="f044" /></label></div>
<div><div class="_demo_glyph"><span class="icon">&#xf045;</span> icon-invest</div><label class="_demo_code">U+ <input readonly value="f045" /></label></div>
<div><div class="_demo_glyph"><span class="icon">&#xf046;</span> icon-info</div><label class="_demo_code">U+ <input readonly value="f046" /></label></div>
<div><div class="_demo_glyph"><span class="icon">&#xf047;</span> icon-incoming</div><label class="_demo_code">U+ <input readonly value="f047" /></label></div>
<div><div class="_demo_glyph"><span class="icon">&#xf048;</span> icon-inactive</div><label class="_demo_code">U+ <input readonly value="f048" /></label></div>
<div><div class="_demo_glyph"><span class="icon">&#xf049;</span> icon-home</div><label class="_demo_code">U+ <input readonly value="f049" /></label></div>
<div><div class="_demo_glyph"><span class="icon">&#xf04a;</span> icon-hat</div><label class="_demo_code">U+ <input readonly value="f04a" /></label></div>
<div><div class="_demo_glyph"><span class="icon">&#xf04b;</span> icon-hardware</div><label class="_demo_code">U+ <input readonly value="f04b" /></label></div>
<div><div class="_demo_glyph"><span class="icon">&#xf04c;</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">&#xf04d;</span> icon-gas</div><label class="_demo_code">U+ <input readonly value="f04d" /></label></div>
<div><div class="_demo_glyph"><span class="icon">&#xf04e;</span> icon-fingerprint</div><label class="_demo_code">U+ <input readonly value="f04e" /></label></div>
<div><div class="_demo_glyph"><span class="icon">&#xf04f;</span> icon-filter</div><label class="_demo_code">U+ <input readonly value="f04f" /></label></div>
<div><div class="_demo_glyph"><span class="icon">&#xf050;</span> icon-file</div><label class="_demo_code">U+ <input readonly value="f050" /></label></div>
<div><div class="_demo_glyph"><span class="icon">&#xf051;</span> icon-fiat</div><label class="_demo_code">U+ <input readonly value="f051" /></label></div>
<div><div class="_demo_glyph"><span class="icon">&#xf052;</span> icon-face-id</div><label class="_demo_code">U+ <input readonly value="f052" /></label></div>
<div><div class="_demo_glyph"><span class="icon">&#xf053;</span> icon-eye-on</div><label class="_demo_code">U+ <input readonly value="f053" /></label></div>
<div><div class="_demo_glyph"><span class="icon">&#xf054;</span> icon-eye-off</div><label class="_demo_code">U+ <input readonly value="f054" /></label></div>
<div><div class="_demo_glyph"><span class="icon">&#xf055;</span> icon-eye-n</div><label class="_demo_code">U+ <input readonly value="f055" /></label></div>
<div><div class="_demo_glyph"><span class="icon">&#xf056;</span> icon-external-link</div><label class="_demo_code">U+ <input readonly value="f056" /></label></div>
<div><div class="_demo_glyph"><span class="icon">&#xf057;</span> icon-export</div><label class="_demo_code">U+ <input readonly value="f057" /></label></div>
<div><div class="_demo_glyph"><span class="icon">&#xf058;</span> icon-experimental</div><label class="_demo_code">U+ <input readonly value="f058" /></label></div>
<div><div class="_demo_glyph"><span class="icon">&#xf059;</span> icon-ens</div><label class="_demo_code">U+ <input readonly value="f059" /></label></div>
<div><div class="_demo_glyph"><span class="icon">&#xf05a;</span> icon-email</div><label class="_demo_code">U+ <input readonly value="f05a" /></label></div>
<div><div class="_demo_glyph"><span class="icon">&#xf05b;</span> icon-element-drag</div><label class="_demo_code">U+ <input readonly value="f05b" /></label></div>
<div><div class="_demo_glyph"><span class="icon">&#xf05c;</span> icon-edit</div><label class="_demo_code">U+ <input readonly value="f05c" /></label></div>
<div><div class="_demo_glyph"><span class="icon">&#xf05d;</span> icon-edit-owner</div><label class="_demo_code">U+ <input readonly value="f05d" /></label></div>
<div><div class="_demo_glyph"><span class="icon">&#xf05e;</span> icon-earn</div><label class="_demo_code">U+ <input readonly value="f05e" /></label></div>
<div><div class="_demo_glyph"><span class="icon">&#xf05f;</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">&#xf060;</span> icon-download</div><label class="_demo_code">U+ <input readonly value="f060" /></label></div>
<div><div class="_demo_glyph"><span class="icon">&#xf061;</span> icon-double-arrow</div><label class="_demo_code">U+ <input readonly value="f061" /></label></div>
<div><div class="_demo_glyph"><span class="icon">&#xf062;</span> icon-dots-grid</div><label class="_demo_code">U+ <input readonly value="f062" /></label></div>
<div><div class="_demo_glyph"><span class="icon">&#xf063;</span> icon-document</div><label class="_demo_code">U+ <input readonly value="f063" /></label></div>
<div><div class="_demo_glyph"><span class="icon">&#xf064;</span> icon-desktop</div><label class="_demo_code">U+ <input readonly value="f064" /></label></div>
<div><div class="_demo_glyph"><span class="icon">&#xf065;</span> icon-delete</div><label class="_demo_code">U+ <input readonly value="f065" /></label></div>
<div><div class="_demo_glyph"><span class="icon">&#xf066;</span> icon-dapp-logo</div><label class="_demo_code">U+ <input readonly value="f066" /></label></div>
<div><div class="_demo_glyph"><span class="icon">&#xf067;</span> icon-copy</div><label class="_demo_code">U+ <input readonly value="f067" /></label></div>
<div><div class="_demo_glyph"><span class="icon">&#xf068;</span> icon-code-blocks</div><label class="_demo_code">U+ <input readonly value="f068" /></label></div>
<div><div class="_demo_glyph"><span class="icon">&#xf069;</span> icon-close</div><label class="_demo_code">U+ <input readonly value="f069" /></label></div>
<div><div class="_demo_glyph"><span class="icon">&#xf06b;</span> icon-close-filled</div><label class="_demo_code">U+ <input readonly value="f06b" /></label></div>
<div><div class="_demo_glyph"><span class="icon">&#xf06c;</span> icon-clock</div><label class="_demo_code">U+ <input readonly value="f06c" /></label></div>
<div><div class="_demo_glyph"><span class="icon">&#xf06d;</span> icon-chevron-up</div><label class="_demo_code">U+ <input readonly value="f06d" /></label></div>
<div><div class="_demo_glyph"><span class="icon">&#xf06e;</span> icon-chevron-right</div><label class="_demo_code">U+ <input readonly value="f06e" /></label></div>
<div><div class="_demo_glyph"><span class="icon">&#xf06f;</span> icon-chevron-left</div><label class="_demo_code">U+ <input readonly value="f06f" /></label></div>
<div><div class="_demo_glyph"><span class="icon">&#xf070;</span> icon-chevron-down</div><label class="_demo_code">U+ <input readonly value="f070" /></label></div>
<div><div class="_demo_glyph"><span class="icon">&#xf071;</span> icon-check</div><label class="_demo_code">U+ <input readonly value="f071" /></label></div>
<div><div class="_demo_glyph"><span class="icon">&#xf072;</span> icon-check-oulined</div><label class="_demo_code">U+ <input readonly value="f072" /></label></div>
<div><div class="_demo_glyph"><span class="icon">&#xf073;</span> icon-check-notifications</div><label class="_demo_code">U+ <input readonly value="f073" /></label></div>
<div><div class="_demo_glyph"><span class="icon">&#xf074;</span> icon-check-filled</div><label class="_demo_code">U+ <input readonly value="f074" /></label></div>
<div><div class="_demo_glyph"><span class="icon">&#xf075;</span> icon-chat</div><label class="_demo_code">U+ <input readonly value="f075" /></label></div>
<div><div class="_demo_glyph"><span class="icon">&#xf076;</span> icon-chain</div><label class="_demo_code">U+ <input readonly value="f076" /></label></div>
<div><div class="_demo_glyph"><span class="icon">&#xf077;</span> icon-camera</div><label class="_demo_code">U+ <input readonly value="f077" /></label></div>
<div><div class="_demo_glyph"><span class="icon">&#xf078;</span> icon-camera-off</div><label class="_demo_code">U+ <input readonly value="f078" /></label></div>
<div><div class="_demo_glyph"><span class="icon">&#xf079;</span> icon-bookmark</div><label class="_demo_code">U+ <input readonly value="f079" /></label></div>
<div><div class="_demo_glyph"><span class="icon">&#xf07a;</span> icon-bookmark-filled</div><label class="_demo_code">U+ <input readonly value="f07a" /></label></div>
<div><div class="_demo_glyph"><span class="icon">&#xf07b;</span> icon-blocks</div><label class="_demo_code">U+ <input readonly value="f07b" /></label></div>
<div><div class="_demo_glyph"><span class="icon">&#xf07c;</span> icon-blocks-1</div><label class="_demo_code">U+ <input readonly value="f07c" /></label></div>
<div><div class="_demo_glyph"><span class="icon">&#xf07d;</span> icon-block</div><label class="_demo_code">U+ <input readonly value="f07d" /></label></div>
<div><div class="_demo_glyph"><span class="icon">&#xf07e;</span> icon-bell</div><label class="_demo_code">U+ <input readonly value="f07e" /></label></div>
<div><div class="_demo_glyph"><span class="icon">&#xf07f;</span> icon-batch</div><label class="_demo_code">U+ <input readonly value="f07f" /></label></div>
<div><div class="_demo_glyph"><span class="icon">&#xf080;</span> icon-arrow-up</div><label class="_demo_code">U+ <input readonly value="f080" /></label></div>
<div><div class="_demo_glyph"><span class="icon">&#xf081;</span> icon-arrow-sort</div><label class="_demo_code">U+ <input readonly value="f081" /></label></div>
<div><div class="_demo_glyph"><span class="icon">&#xf082;</span> icon-arrow-right</div><label class="_demo_code">U+ <input readonly value="f082" /></label></div>
<div><div class="_demo_glyph"><span class="icon">&#xf083;</span> icon-arrow-left</div><label class="_demo_code">U+ <input readonly value="f083" /></label></div>
<div><div class="_demo_glyph"><span class="icon">&#xf084;</span> icon-arrow-down</div><label class="_demo_code">U+ <input readonly value="f084" /></label></div>
<div><div class="_demo_glyph"><span class="icon">&#xf085;</span> icon-apps</div><label class="_demo_code">U+ <input readonly value="f085" /></label></div>
<div><div class="_demo_glyph"><span class="icon">&#xf086;</span> icon-appearance</div><label class="_demo_code">U+ <input readonly value="f086" /></label></div>
<div><div class="_demo_glyph"><span class="icon">&#xf087;</span> icon-api</div><label class="_demo_code">U+ <input readonly value="f087" /></label></div>
<div><div class="_demo_glyph"><span class="icon">&#xf088;</span> icon-allowance</div><label class="_demo_code">U+ <input readonly value="f088" /></label></div>
<div><div class="_demo_glyph"><span class="icon">&#xf089;</span> icon-alert</div><label class="_demo_code">U+ <input readonly value="f089" /></label></div>
<div><div class="_demo_glyph"><span class="icon">&#xf08a;</span> icon-alert-triangle</div><label class="_demo_code">U+ <input readonly value="f08a" /></label></div>
<div><div class="_demo_glyph"><span class="icon">&#xf08b;</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">&#xf08c;</span> icon-address-book</div><label class="_demo_code">U+ <input readonly value="f08c" /></label></div>
<div><div class="_demo_glyph"><span class="icon">&#xf08d;</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">&#xf08e;</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>