cryptocoins/icons-demo.html

437 lines
15 KiB
HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Cryptocoins Webfont Demo</title>
<!-- CSS defining icons (required) -->
<link rel="stylesheet" href="webfont/cryptocoins.css">
<!-- CSS defining icon/coin colors (optional) -->
<!--link rel="stylesheet" href="webfont/cryptocoins-colors.css"-->
</head>
<body>
<h1><a href="https://github.com/AllienWorks/cryptocoins/" target="_blank">Cryptocoins</a> Demo</h1>
<p>Overview of all included coins/icons.</p>
<p>Check the HTML if you're not sure how to include the icons to your project.</p>
<p>Don't forget that every icon is available as a separate SVG file (in <code>SVG/</code> folder) as well.</p>
<div class="icons">
<h2>A</h2>
<i class="cc ADA" title="ADA"></i>
<i class="cc ADA-alt" title="ADA"></i>
<i class="cc ADC" title="ADC"></i>
<i class="cc ADC-alt" title="ADC"></i>
<i class="cc AEON" title="AEON"></i>
<i class="cc AEON-alt" title="AEON"></i>
<i class="cc AMP" title="AMP"></i>
<i class="cc AMP-alt" title="AMP"></i>
<i class="cc ANC" title="ANC"></i>
<i class="cc ANC-alt" title="ANC"></i>
<i class="cc ARCH" title="ARCH"></i>
<i class="cc ARCH-alt" title="ARCH"></i>
<i class="cc ARDR" title="ARDR"></i>
<i class="cc ARDR-alt" title="ARDR"></i>
<i class="cc ARK" title="ARK"></i>
<i class="cc ARK-alt" title="ARK"></i>
<i class="cc AST" title="AST"></i>
<i class="cc AUR" title="AUR"></i>
<i class="cc AUR-alt" title="AUR"></i>
<h2>B</h2>
<i class="cc BANX" title="BANX"></i>
<i class="cc BANX-alt" title="BANX"></i>
<i class="cc BAT" title="BAT"></i>
<i class="cc BAT-alt" title="BAT"></i>
<i class="cc BAY" title="BAY"></i>
<i class="cc BAY-alt" title="BAY"></i>
<i class="cc BC" title="BC"></i>
<i class="cc BC-alt" title="BC"></i>
<i class="cc BCN" title="BCN"></i>
<i class="cc BCN-alt" title="BCN"></i>
<i class="cc BCY" title="BCY"></i>
<i class="cc BELA" title="BELA"></i>
<i class="cc BFT" title="BFT"></i>
<i class="cc BFT-alt" title="BFT"></i>
<i class="cc BNB" title="BNB"></i><!--span class="name">Binance Coin (BNB)</span-->
<i class="cc BLZ" title="BLZ"></i>
<i class="cc BRK" title="BRK"></i>
<i class="cc BRK-alt" title="BRK"></i>
<i class="cc BRX" title="BRX"></i>
<i class="cc BRX-alt" title="BRX"></i>
<i class="cc BSD" title="BSD"></i>
<i class="cc BSD-alt" title="BSD"></i>
<i class="cc BTA" title="BTA"></i>
<i class="cc BTC" title="BTC"></i>
<i class="cc BTC-alt" title="BTC"></i>
<i class="cc BTG" title="BTG"></i><!--span class="name">Bitcoin Gold (BTG)</span-->
<i class="cc BCH" title="BCC"></i>
<i class="cc BCH-alt" title="BCC"></i>
<i class="cc BTCD" title="BTCD"></i>
<i class="cc BTCD-alt" title="BTCD"></i>
<i class="cc BTCP" title="BTCP"></i>
<i class="cc BTCP-alt" title="BTCP"></i>
<i class="cc BTM" title="BTM"></i>
<i class="cc BTM-alt" title="BTM"></i>
<i class="cc BTS" title="BTS"></i>
<i class="cc BTS-alt" title="BTS"></i>
<i class="cc BURST" title="BURST"></i>
<h2>C</h2>
<i class="cc CLAM" title="CLAM"></i>
<i class="cc CLAM-alt" title="CLAM"></i>
<i class="cc CLOAK" title="CLOAK"></i>
<i class="cc CLOAK-alt" title="CLOAK"></i>
<i class="cc CVC" title="CVC"></i>
<i class="cc CVC-alt" title="CVC"></i>
<h2>D</h2>
<i class="cc DAO" title="DAO"></i>
<i class="cc DAO-alt" title="DAO"></i>
<i class="cc DASH" title="DASH"></i>
<i class="cc DASH-alt" title="DASH"></i>
<i class="cc DCR" title="DCR"></i>
<i class="cc DCR-alt" title="DCR"></i>
<i class="cc DCT" title="DCT"></i>
<i class="cc DCT-alt" title="DCT"></i>
<i class="cc DGB" title="DGB"></i>
<i class="cc DGB-alt" title="DGB"></i>
<i class="cc DGD" title="DGD"></i>
<i class="cc DGX" title="DGX"></i>
<i class="cc DMD" title="DMD"></i>
<i class="cc DMD-alt" title="DMD"></i>
<i class="cc DOGE" title="DOGE"></i>
<i class="cc DOGE-alt" title="DOGE"></i>
<h2>E</h2>
<i class="cc EMC" title="EMC"></i>
<i class="cc EMC-alt" title="EMC"></i>
<i class="cc EMC2" title="EMC2"></i>
<i class="cc EMC2-alt" title="EMC2"></i>
<i class="cc EOS" title="EOS"></i>
<i class="cc EOS-alt" title="EOS"></i>
<i class="cc ERC" title="ERC"></i>
<i class="cc ERC-alt" title="ERC"></i>
<i class="cc ETC" title="ETC"></i>
<i class="cc ETC-alt" title="ETC"></i>
<i class="cc ETH" title="ETH"></i>
<i class="cc ETH-alt" title="ETH"></i>
<i class="cc EXP" title="EXP"></i>
<i class="cc EXP-alt" title="EXP"></i>
<h2>F</h2>
<i class="cc FC2" title="FC2"></i>
<i class="cc FC2-alt" title="FC2"></i>
<i class="cc FCT" title="FCT"></i>
<i class="cc FCT-alt" title="FCT"></i>
<i class="cc FLDC" title="FLDC"></i>
<i class="cc FLDC-alt" title="FLDC"></i>
<i class="cc FLO" title="FLO"></i>
<i class="cc FLO-alt" title="FLO"></i>
<i class="cc FRK" title="FRK"></i>
<i class="cc FRK-alt" title="FRK"></i>
<i class="cc FTC" title="FTC"></i>
<i class="cc FTC-alt" title="FTC"></i>
<i class="cc FUN" title="FUN"></i>
<h2>G</h2>
<i class="cc GAME" title="GAME"></i>
<i class="cc GAME-alt" title="GAME"></i>
<i class="cc GBYTE" title="GBYTE"></i>
<i class="cc GBYTE-alt" title="GBYTE"></i>
<i class="cc GDC" title="GDC"></i>
<i class="cc GDC-alt" title="GDC"></i>
<i class="cc GEMZ" title="GEMZ"></i>
<i class="cc GEMZ-alt" title="GEMZ"></i>
<i class="cc GLD" title="GLD"></i>
<i class="cc GLD-alt" title="GLD"></i>
<i class="cc GNO" title="GNO"></i>
<i class="cc GNO-alt" title="GNO"></i>
<i class="cc GNT" title="GNT"></i>
<i class="cc GNT-alt" title="GNT"></i>
<i class="cc GOLOS" title="GOLOS"></i>
<i class="cc GOLOS-alt" title="GOLOS"></i>
<i class="cc GRC" title="GRC"></i>
<i class="cc GRC-alt" title="GRC"></i>
<i class="cc GRS" title="GRS"></i>
<h2>H</h2>
<i class="cc HEAT" title="HEAT"></i>
<i class="cc HEAT-alt" title="HEAT"></i>
<i class="cc HSR" title="HSR"></i><!--span class="name">HShare (HSR)</span-->
<i class="cc HUC" title="HUC"></i>
<i class="cc HUC-alt" title="HUC"></i>
<h2>I</h2>
<i class="cc ICN" title="ICN"></i>
<i class="cc ICN-alt" title="ICN"></i>
<i class="cc ICX" title="ICX"></i><!--span class="name">ICON (ICX)</span-->
<i class="cc IFC" title="IFC"></i>
<i class="cc IFC-alt" title="IFC"></i>
<i class="cc INCNT" title="INCNT"></i>
<i class="cc INCNT-alt" title="INCNT"></i>
<i class="cc IOC" title="IOC"></i>
<i class="cc IOC-alt" title="IOC"></i>
<i class="cc IOTA" title="IOTA"></i>
<i class="cc IOTA-alt" title="IOTA"></i>
<h2>J</h2>
<i class="cc JBS" title="JBS"></i>
<i class="cc JBS-alt" title="JBS"></i>
<h2>K</h2>
<i class="cc KMD" title="KMD"></i>
<i class="cc KMD-alt" title="KMD"></i>
<i class="cc KOBO" title="KOBO"></i>
<i class="cc KORE" title="KORE"></i>
<i class="cc KORE-alt" title="KORE"></i>
<h2>L</h2>
<i class="cc LBC" title="LBC"></i>
<i class="cc LBC-alt" title="LBC"></i>
<i class="cc LDOGE" title="LDOGE"></i>
<i class="cc LDOGE-alt" title="LDOGE"></i>
<i class="cc LSK" title="LSK"></i>
<i class="cc LSK-alt" title="LSK"></i>
<i class="cc LTC" title="LTC"></i>
<i class="cc LTC-alt" title="LTC"></i>
<h2>M</h2>
<i class="cc MAID" title="MAID"></i>
<i class="cc MAID-alt" title="MAID"></i>
<i class="cc MARKS" title="MARKS"></i>
<i class="cc MARKS-alt" title="MARKS"></i>
<i class="cc MCO" title="MCO"></i>
<i class="cc MCO-alt" title="MCO"></i>
<i class="cc MINT" title="MINT"></i>
<i class="cc MINT-alt" title="MINT"></i>
<i class="cc MONA" title="MONA"></i>
<i class="cc MONA-alt" title="MONA"></i>
<i class="cc MRC" title="MRC"></i>
<i class="cc MSC" title="MSC"></i>
<i class="cc MSC-alt" title="MSC"></i>
<i class="cc MTL" title="MTL"></i>
<i class="cc MTL-alt" title="MTL"></i>
<i class="cc MTR" title="MTR"></i>
<i class="cc MTR-alt" title="MTR"></i>
<i class="cc MUE" title="MUE"></i>
<i class="cc MUE-alt" title="MUE"></i>
<i class="cc MYST" title="MYST"></i>
<i class="cc MYST-alt" title="MYST"></i>
<h2>N</h2>
<i class="cc NAV" title="NAV"></i>
<i class="cc NAV-alt" title="NAV"></i>
<i class="cc NBT" title="NBT"></i>
<i class="cc NEO" title="NEO"></i>
<i class="cc NEO-alt" title="NEO"></i>
<i class="cc NEOS" title="NEOS"></i>
<i class="cc NEOS-alt" title="NEOS"></i>
<i class="cc NEU" title="NEU"></i>
<i class="cc NEU-alt" title="NEU"></i>
<i class="cc NLG" title="NLG"></i>
<i class="cc NLG-alt" title="NLG"></i>
<i class="cc NMC" title="NMC"></i>
<i class="cc NMC-alt" title="NMC"></i>
<i class="cc NMR" title="NMR"></i>
<i class="cc NOTE" title="NOTE"></i>
<i class="cc NOTE-alt" title="NOTE"></i>
<i class="cc NVC" title="NVC"></i>
<i class="cc NVC-alt" title="NVC"></i>
<i class="cc NXT" title="NXT"></i>
<i class="cc NXT-alt" title="NXT"></i>
<h2>O</h2>
<i class="cc OK" title="OK"></i>
<i class="cc OK-alt" title="OK"></i>
<i class="cc OMG" title="OMG"></i>
<i class="cc OMG-alt" title="OMG"></i>
<i class="cc OMNI" title="OMNI"></i>
<i class="cc OMNI-alt" title="OMNI"></i>
<i class="cc OPAL" title="OPAL"></i>
<i class="cc OPAL-alt" title="OPAL"></i>
<h2>P</h2>
<i class="cc PART" title="PART"></i>
<i class="cc PART-alt" title="PART"></i>
<i class="cc PASC" title="PASC"></i>
<i class="cc PIGGY" title="PIGGY"></i>
<i class="cc PIGGY-alt" title="PIGGY"></i>
<i class="cc PINK" title="PINK"></i>
<i class="cc PINK-alt" title="PINK"></i>
<i class="cc PIVX" title="PIVX"></i>
<i class="cc PIVX-alt" title="PIVX"></i>
<i class="cc PPT" title="PPT"></i><!--span class="name">Populous (PPT)</span-->
<i class="cc POT" title="POT"></i>
<i class="cc POT-alt" title="POT"></i>
<i class="cc PPC" title="PPC"></i>
<i class="cc PPC-alt" title="PPC"></i>
<h2>Q</h2>
<i class="cc QRK" title="QRK"></i>
<i class="cc QRK-alt" title="QRK"></i>
<i class="cc QTUM" title="QTUM"></i>
<i class="cc QTUM-alt" title="QTUM"></i>
<h2>R</h2>
<i class="cc RADS" title="RADS"></i>
<i class="cc RADS-alt" title="RADS"></i>
<i class="cc RBIES" title="RBIES"></i>
<i class="cc RBIES-alt" title="RBIES"></i>
<i class="cc RBT" title="RBT"></i>
<i class="cc RBT-alt" title="RBT"></i>
<i class="cc RBY" title="RBY"></i>
<i class="cc RBY-alt" title="RBY"></i>
<i class="cc RDD" title="RDD"></i>
<i class="cc RDD-alt" title="RDD"></i>
<i class="cc REP" title="REP"></i>
<i class="cc REP-alt" title="REP"></i>
<i class="cc RIC" title="RIC"></i>
<i class="cc RIC-alt" title="RIC"></i>
<i class="cc RHOC" title="RHOC"></i>
<i class="cc RISE" title="RISE"></i>
<i class="cc RISE-alt" title="RISE"></i>
<h2>S</h2>
<i class="cc SALT" title="SALT"></i>
<i class="cc SALT-alt" title="SALT"></i>
<i class="cc SAR" title="SAR"></i>
<i class="cc SAR-alt" title="SAR"></i>
<i class="cc SCOT" title="SCOT"></i>
<i class="cc SCOT-alt" title="SCOT"></i>
<i class="cc SDC" title="SDC"></i>
<i class="cc SDC-alt" title="SDC"></i>
<i class="cc SIA" title="SIA"></i>
<i class="cc SIA-alt" title="SIA"></i>
<i class="cc SJCX" title="SJCX"></i>
<i class="cc SJCX-alt" title="SJCX"></i>
<i class="cc SLG" title="SLG"></i>
<i class="cc SLG-alt" title="SLG"></i>
<i class="cc SLS" title="SLS"></i>
<i class="cc SLS-alt" title="SLS"></i>
<i class="cc SNRG" title="SNRG"></i>
<i class="cc SNRG-alt" title="SNRG"></i>
<i class="cc SNT" title="SNT"></i><!--span class="name">Status (SNT)</span-->
<i class="cc START" title="START"></i>
<i class="cc START-alt" title="START"></i>
<i class="cc STEEM" title="STEEM"></i>
<i class="cc STEEM-alt" title="STEEM"></i>
<i class="cc STRAT" title="STRAT"></i>
<i class="cc STRAT-alt" title="STRAT"></i>
<i class="cc SWIFT" title="SWIFT"></i>
<i class="cc SWIFT-alt" title="SWIFT"></i>
<i class="cc SYNC" title="SYNC"></i>
<i class="cc SYNC-alt" title="SYNC"></i>
<i class="cc SYS" title="SYS"></i>
<i class="cc SYS-alt" title="SYS"></i>
<h2>T</h2>
<i class="cc TRIG" title="TRIG"></i>
<i class="cc TRIG-alt" title="TRIG"></i>
<i class="cc TRX" title="TRX"></i><!--span class="name">TRON (TRX)</span-->
<i class="cc TX" title="TX"></i>
<i class="cc TX-alt" title="TX"></i>
<h2>U</h2>
<i class="cc UBQ" title="UBQ"></i>
<i class="cc UBQ-alt" title="UBQ"></i>
<i class="cc UNITY" title="UNITY"></i>
<i class="cc UNITY-alt" title="UNITY"></i>
<i class="cc USDT" title="USDT"></i>
<i class="cc USDT-alt" title="USDT"></i>
<h2>V</h2>
<i class="cc VERI" title="VERI"></i><!--span class="name">Veritaseum (VERI)</span-->
<i class="cc VET" title="VET"></i><!--span class="name">VeChain (VET)</span-->
<i class="cc VIA" title="VIA"></i>
<i class="cc VIA-alt" title="VIA"></i>
<i class="cc VIOR" title="VIOR"></i>
<i class="cc VIOR-alt" title="VIOR"></i>
<i class="cc VNL" title="VNL"></i>
<i class="cc VNL-alt" title="VNL"></i>
<i class="cc VPN" title="VPN"></i>
<i class="cc VPN-alt" title="VPN"></i>
<i class="cc VRC" title="VRC"></i>
<i class="cc VRC-alt" title="VRC"></i>
<i class="cc VTC" title="VTC"></i>
<i class="cc VTC-alt" title="VTC"></i>
<h2>W</h2>
<i class="cc WAVES" title="WAVES"></i>
<i class="cc WAVES-alt" title="WAVES"></i>
<h2>X</h2>
<i class="cc XAI" title="XAI"></i>
<i class="cc XAI-alt" title="XAI"></i>
<i class="cc XBS" title="XBS"></i>
<i class="cc XBS-alt" title="XBS"></i>
<i class="cc XBC" title="XBC"></i>
<i class="cc XCP" title="XCP"></i>
<i class="cc XCP-alt" title="XCP"></i>
<i class="cc XEM" title="XEM"></i>
<i class="cc XEM-alt" title="XEM"></i>
<i class="cc XLM" title="XLM"></i>
<i class="cc XLM-alt" title="XLM"></i>
<i class="cc XMR" title="XMR"></i>
<i class="cc XMY" title="XMY"></i>
<i class="cc XPM" title="XPM"></i>
<i class="cc XPM-alt" title="XPM"></i>
<i class="cc XRP" title="XRP"></i>
<i class="cc XRP-alt" title="XRP"></i>
<i class="cc XTZ" title="XTZ"></i>
<i class="cc XTZ-alt" title="XTZ"></i>
<i class="cc XVC" title="XVC"></i>
<i class="cc XVC-alt" title="XVC"></i>
<i class="cc XVG" title="XVG"></i>
<i class="cc XVG-alt" title="XVG"></i>
<i class="cc XZC" title="XZC"></i>
<i class="cc XZC-alt" title="XZC"></i>
<h2>Y</h2>
<i class="cc YBC" title="YBC"></i>
<i class="cc YBC-alt" title="YBC"></i>
<h2>Z</h2>
<i class="cc ZEC" title="ZEC"></i>
<i class="cc ZEC-alt" title="ZEC"></i>
<i class="cc ZEIT" title="ZEIT"></i>
<i class="cc ZEIT-alt" title="ZEIT"></i>
<i class="cc ZRX" title="ZRX"></i>
<i class="cc ZRX-alt" title="ZRX"></i>
</div>
<style>
body {
font-family: "Inter UI", "Helvetica", "Arial", sans-serif;
width: 100%;
max-width: 72rem;
padding: 1rem 2rem;
margin: 0 auto; }
a {
color: #0060BD; }
a:hover {
text-decoration: none; }
code {
color: #0060BD;
background: #deefff;
padding: 2px 5px;
border-radius: 4px; }
.icons {
margin: 3rem 0; }
i.cc {
font-size: 4rem;
display: inline-block;
margin: 0 1.3rem 1.3rem 0;
transition: 0.1s ease all; }
i.cc:hover {
color: #0060BD;
transform: rotate(-20deg);
transform-origin: 0.49em 0.55em; }
</style>
</body>
</html>