mana/cheatsheet.html

282 lines
22 KiB
HTML

<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="chrome=1" />
<title>Icon Cheatsheet | Mana</title>
<link rel="stylesheet" href="css/mana.min.css" />
<link rel="stylesheet" href="css/main.css" />
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
</head>
<body>
<section id="banner">
<div class="wrapper">
<a href="index.html" class="logo"><i class="ms ms-g" style="top:-2px;position:relative;"></i> Mana</a>
<a href="index.html" class="item">Home</a>
<a href="icons.html" class="item">Mana Icons</a>
<a href="attributes.html" class="item">Attributes</a>
<a href="http://github.com/andrewgioia/Mana" class="item">GitHub Project</a>
<span class="item">
<iframe src="https://ghbtns.com/github-btn.html?user=andrewgioia&repo=mana&type=star&count=true" frameborder="0" scrolling="0" width="100px" height="20px" style="margin-bottom: -4px;"></iframe>
</span>
<span class="item">
Created by
<a href="http://andrewgioia.com">Andrew Gioia</a>
</span>
</div>
</section>
<header>
<div class="wrapper">
<h1 class="sub">Mana &amp; Card Icons</h1>
<a class="dl button float-right" href="https://github.com/andrewgioia/Mana/archive/master.zip">
<i class="ms ms-instant"></i>
Download
</a>
<h2 class="sub">The complete Mana copy-able reference</h2>
</div>
</header>
<main>
<div class="wrapper">
<section>
<h3>
To use Mana on the desktop, install mana.otf, set it
as the font in your application, then copy and paste the
icons (not the unicode) directly from this page into
your designs. The UTF8 representation is provided as
a reference as well.
</h3>
</section>
<section class="content">
<h4>Icons, CSS Class, and Unicode</h4>
<div class="vectors">
<span class="utf"><i>&#xe600;</i> ms-w <code>&amp;#xe600;</code></span>
<span class="utf"><i>&#xe601;</i> ms-u <code>&amp;#xe601;</code></span>
<span class="utf"><i>&#xe602;</i> ms-b <code>&amp;#xe602;</code></span>
<span class="utf"><i>&#xe603;</i> ms-r <code>&amp;#xe603;</code></span>
<span class="utf"><i>&#xe604;</i> ms-g <code>&amp;#xe604;</code></span>
<span class="utf"><i>&#xe904;</i> ms-c <code>&amp;#xe904;</code></span>
<span class="utf"><i>&#xe605;</i> ms-0 <code>&amp;#xe605;</code></span>
<span class="utf"><i>&#xe606;</i> ms-1 <code>&amp;#xe606;</code></span>
<span class="utf"><i>&#xe607;</i> ms-2 <code>&amp;#xe607;</code></span>
<span class="utf"><i>&#xe608;</i> ms-3 <code>&amp;#xe608;</code></span>
<span class="utf"><i>&#xe609;</i> ms-4 <code>&amp;#xe609;</code></span>
<span class="utf"><i>&#xe60a;</i> ms-5 <code>&amp;#xe60a;</code></span>
<span class="utf"><i>&#xe60b;</i> ms-6 <code>&amp;#xe60b;</code></span>
<span class="utf"><i>&#xe60c;</i> ms-7 <code>&amp;#xe60c;</code></span>
<span class="utf"><i>&#xe60d;</i> ms-8 <code>&amp;#xe60d;</code></span>
<span class="utf"><i>&#xe60e;</i> ms-9 <code>&amp;#xe60e;</code></span>
<span class="utf"><i>&#xe60f;</i> ms-10 <code>&amp;#xe60f;</code></span>
<span class="utf"><i>&#xe610;</i> ms-11 <code>&amp;#xe610;</code></span>
<span class="utf"><i>&#xe611;</i> ms-12 <code>&amp;#xe611;</code></span>
<span class="utf"><i>&#xe612;</i> ms-13 <code>&amp;#xe612;</code></span>
<span class="utf"><i>&#xe613;</i> ms-14 <code>&amp;#xe613;</code></span>
<span class="utf"><i>&#xe614;</i> ms-15 <code>&amp;#xe614;</code></span>
<span class="utf"><i>&#xe62a;</i> ms-16 <code>&amp;#xe62a;</code></span>
<span class="utf"><i>&#xe62b;</i> ms-17 <code>&amp;#xe62b;</code></span>
<span class="utf"><i>&#xe62c;</i> ms-18 <code>&amp;#xe62c;</code></span>
<span class="utf"><i>&#xe62d;</i> ms-19 <code>&amp;#xe62d;</code></span>
<span class="utf"><i>&#xe62e;</i> ms-20 <code>&amp;#xe62e;</code></span>
<span class="utf"><i>&#xe615;</i> ms-x <code>&amp;#xe615;</code></span>
<span class="utf"><i>&#xe616;</i> ms-y <code>&amp;#xe616;</code></span>
<span class="utf"><i>&#xe617;</i> ms-z <code>&amp;#xe617;</code></span>
<span class="utf"><i>&#xe618;</i> ms-p <code>&amp;#xe618;</code></span>
<span class="utf"><i>&#xe619;</i> ms-s <code>&amp;#xe619;</code></span>
<span class="utf"><i>&#xe907;</i> ms-e <code>&amp;#xe907;</code></span>
<div class="clear"></div>
</div>
<div class="vectors">
<span class="utf"><i>&#xe902;</i> ms-1-2 <code>&amp;#xe902;</code></span>
<span class="utf"><i>&#xe929;</i> ms-acorn <code>&amp;#xe929;</code></span>
<span class="utf"><i>&#xe923;</i> ms-artist-brush <code>&amp;#xe923;</code></span>
<span class="utf"><i>&#xe924;</i> ms-artist-nib <code>&amp;#xe924;</code></span>
<span class="utf"><i>&#xe61d;</i> ms-chaos <code>&amp;#xe61d;</code></span>
<span class="utf"><i>&#xe903;</i> ms-infinity <code>&amp;#xe903;</code></span>
<span class="utf"><i>&#xe627;</i> ms-loyalty-up <code>&amp;#xe627;</code></span>
<span class="utf"><i>&#xe625;</i> ms-loyalty-down <code>&amp;#xe625;</code></span>
<span class="utf"><i>&#xe626;</i> ms-loyalty-zero <code>&amp;#xe626;</code></span>
<span class="utf"><i>&#xe628;</i> ms-loyalty-start <code>&amp;#xe628;</code></span>
<span class="utf"><i>&#xe985;</i> ms-multicolor <code>&amp;#xe985;</code></span>
<span class="utf"><i>&#xe921;</i> ms-power <code>&amp;#xe921;</code></span>
<span class="utf"><i>&#xe92a;</i> ms-saga <code>&amp;#xe92a;</code></span>
<span class="utf"><i>&#xe61a;</i> ms-tap <code>&amp;#xe61a;</code></span>
<span class="utf"><i>&#xe61c;</i> ms-tap-alt <code>&amp;#xe61c;</code></span>
<span class="utf"><i>&#xe922;</i> ms-toughness <code>&amp;#xe922;</code></span>
<span class="utf"><i>&#xe61b;</i> ms-untap <code>&amp;#xe61b;</code></span>
<div class="clear"></div>
</div>
<div class="vectors">
<span class="utf"><i style="width:auto;">&#xe900;</i> ms-100 <code>&amp;#xe900;</code></span>
<span class="utf long"><i class="long">&#xe901;</i> ms-1000000 <code>&amp;#xe901;</code></span>
<div class="clear"></div>
</div>
<div class="vectors overflow">
<span class="utf"><i>&#xe61e;</i> ms-artifact <code>&amp;#xe61e;</code></span>
<span class="utf"><i>&#xe972;</i> ms-conspiracy <code>&amp;#xe972;</code></span>
<span class="utf"><i>&#xe61f;</i> ms-creature <code>&amp;#xe61f;</code></span>
<span class="utf"><i>&#xe620;</i> ms-enchantment <code>&amp;#xe620;</code></span>
<span class="utf"><i>&#xe629;</i> ms-flashback <code>&amp;#xe629;</code></span>
<span class="utf"><i>&#xe621;</i> ms-instant <code>&amp;#xe621;</code></span>
<span class="utf"><i>&#xe622;</i> ms-land <code>&amp;#xe622;</code></span>
<span class="utf"><i>&#xe925;</i> ms-multiple <code>&amp;#xe925;</code></span>
<span class="utf"><i>&#xe96e;</i> ms-phenomenon <code>&amp;#xe96e;</code></span>
<span class="utf"><i>&#xe96f;</i> ms-plane <code>&amp;#xe96f;</code></span>
<span class="utf"><i>&#xe623;</i> ms-planeswalker <code>&amp;#xe623;</code></span>
<span class="utf"><i>&#xe96c;</i> ms-rarity <code>&amp;#xe96c;</code></span>
<span class="utf"><i>&#xe970;</i> ms-scheme <code>&amp;#xe970;</code></span>
<span class="utf"><i>&#xe624;</i> ms-sorcery <code>&amp;#xe624;</code></span>
<span class="utf"><i>&#xe972;</i> ms-token <code>&amp;#xe96d;</code></span>
<span class="utf"><i>&#xe925;</i> ms-tribal <code>&amp;#xe925;</code></span>
<span class="utf"><i>&#xe971;</i> ms-vanguard <code>&amp;#xe971;</code></span>
<div class="clear"></div>
</div>
<div class="vectors overflow">
<span class="utf"><i>&#xe905;</i> ms-dfc-night <code>&amp;#xe905;</code></span>
<span class="utf"><i>&#xe906;</i> ms-dfc-day <code>&amp;#xe906;</code></span>
<span class="utf"><i>&#xe909;</i> ms-dfc-spark <code>&amp;#xe909;</code></span>
<span class="utf"><i>&#xe908;</i> ms-dfc-ignite <code>&amp;#xe908;</code></span>
<span class="utf"><i>&#xe90b;</i> ms-dfc-moon <code>&amp;#xe90b;</code></span>
<span class="utf"><i>&#xe90a;</i> ms-dfc-emrakul <code>&amp;#xe90a;</code></span>
<span class="utf"><i>&#xe920;</i> ms-dfc-enchantment <code>&amp;#xe920;</code></span>
<span class="utf"><i>&#xe983;</i> ms-dfc-modal-face <code>&amp;#xe983;</code></span>
<span class="utf"><i>&#xe984;</i> ms-dfc-modal-back <code>&amp;#xe984;</code></span>
<div class="clear"></div>
</div>
<div class="vectors overflow">
<span class="utf"><i>&#xe90c;</i> ms-guild-azorius <code>&amp;#xe90c;</code></span>
<span class="utf"><i>&#xe90d;</i> ms-guild-boros <code>&amp;#xe90d;</code></span>
<span class="utf"><i>&#xe90e;</i> ms-guild-dimir <code>&amp;#xe90e;</code></span>
<span class="utf"><i>&#xe90f;</i> ms-guild-golgari <code>&amp;#xe90f;</code></span>
<span class="utf"><i>&#xe910;</i> ms-guild-gruul <code>&amp;#xe910;</code></span>
<span class="utf"><i>&#xe911;</i> ms-guild-izzet <code>&amp;#xe911;</code></span>
<span class="utf"><i>&#xe912;</i> ms-guild-orzhov <code>&amp;#xe912;</code></span>
<span class="utf"><i>&#xe913;</i> ms-guild-rakdos <code>&amp;#xe913;</code></span>
<span class="utf"><i>&#xe914;</i> ms-guild-selesnya <code>&amp;#xe914;</code></span>
<span class="utf"><i>&#xe915;</i> ms-guild-simic <code>&amp;#xe915;</code></span>
<span class="utf"><i>&#xe916;</i> ms-clan-abzan <code>&amp;#xe916;</code></span>
<span class="utf"><i>&#xe917;</i> ms-clan-jeskai <code>&amp;#xe917;</code></span>
<span class="utf"><i>&#xe918;</i> ms-clan-mardu <code>&amp;#xe918;</code></span>
<span class="utf"><i>&#xe919;</i> ms-clan-sultai <code>&amp;#xe919;</code></span>
<span class="utf"><i>&#xe91a;</i> ms-clan-temur <code>&amp;#xe91a;</code></span>
<span class="utf"><i>&#xe91b;</i> ms-clan-atarka <code>&amp;#xe91b;</code></span>
<span class="utf"><i>&#xe91c;</i> ms-clan-dromoka <code>&amp;#xe91c;</code></span>
<span class="utf"><i>&#xe91d;</i> ms-clan-okutai <code>&amp;#xe91d;</code></span>
<span class="utf"><i>&#xe91e;</i> ms-clan-kolaghan <code>&amp;#xe91e;</code></span>
<span class="utf"><i>&#xe91f;</i> ms-clan-silumgar <code>&amp;#xe91f;</code></span>
<span class="utf"><i>&#xe926;</i> ms-polis-setessa <code>&amp;#xe926;</code></span>
<span class="utf"><i>&#xe927;</i> ms-polis-akros <code>&amp;#xe927;</code></span>
<span class="utf"><i>&#xe928;</i> ms-polis-meletis <code>&amp;#xe928;</code></span>
<div class="clear"></div>
</div>
<div class="vectors overflow">
<span class="utf"><i>&#xe947;</i> ms-ability-activated <code>&amp;#xe947;</code></span>
<span class="utf"><i>&#xe974;</i> ms-ability-adamant <code>&amp;#xe974;</code></span>
<span class="utf"><i>&#xe975;</i> ms-ability-adapt <code>&amp;#xe975;</code></span>
<span class="utf"><i>&#xe976;</i> ms-ability-addendum <code>&amp;#xe976;</code></span>
<span class="utf"><i>&#xe948;</i> ms-ability-adventure <code>&amp;#xe948;</code></span>
<span class="utf"><i>&#xe977;</i> ms-ability-afflict <code>&amp;#xe977;</code></span>
<span class="utf"><i>&#xe978;</i> ms-ability-afterlife <code>&amp;#xe978;</code></span>
<span class="utf"><i>&#xe979;</i> ms-ability-aftermath <code>&amp;#xe979;</code></span>
<span class="utf"><i>&#xe97a;</i> ms-ability-amass <code>&amp;#xe97a;</code></span>
<span class="utf"><i>&#xe94a;</i> ms-ability-ascend <code>&amp;#xe94a;</code></span>
<span class="utf"><i>&#xe97b;</i> ms-ability-companion <code>&amp;#xe97b;</code></span>
<span class="utf"><i>&#xe97c;</i> ms-ability-constellation <code>&amp;#xe97c;</code></span>
<span class="utf"><i>&#xe949;</i> ms-ability-convoke <code>&amp;#xe949;</code></span>
<span class="utf"><i>&#xe94b;</i> ms-ability-deathtouch <code>&amp;#xe94b;</code></span>
<span class="utf"><i>&#xe94c;</i> ms-ability-defender <code>&amp;#xe94c;</code></span>
<span class="utf"><i>&#xe97d;</i> ms-ability-devotion <code>&amp;#xe97d;</code></span>
<span class="utf"><i>&#xe94d;</i> ms-ability-double-strike <code>&amp;#xe94d;</code></span>
<span class="utf"><i>&#xe97e;</i> ms-ability-embalm <code>&amp;#xe97e;</code></span>
<span class="utf"><i>&#xe94e;</i> ms-ability-enrage <code>&amp;#xe94e;</code></span>
<span class="utf"><i>&#xe969;</i> ms-ability-escape <code>&amp;#xe969;</code></span>
<span class="utf"><i>&#xe97f;</i> ms-ability-eternalize <code>&amp;#xe97f;</code></span>
<span class="utf"><i>&#xe94f;</i> ms-ability-explore <code>&amp;#xe94f;</code></span>
<span class="utf"><i>&#xe950;</i> ms-ability-first-strike <code>&amp;#xe950;</code></span>
<span class="utf"><i>&#xe951;</i> ms-ability-flash <code>&amp;#xe951;</code></span>
<span class="utf"><i>&#xe952;</i> ms-ability-flying <code>&amp;#xe952;</code></span>
<span class="utf"><i>&#xe953;</i> ms-ability-haste <code>&amp;#xe953;</code></span>
<span class="utf"><i>&#xe954;</i> ms-ability-hexproof <code>&amp;#xe954;</code></span>
<span class="utf"><i>&#xe955;</i> ms-ability-hexproof-black <code>&amp;#xe955;</code></span>
<span class="utf"><i>&#xe956;</i> ms-ability-hexproof-blue <code>&amp;#xe956;</code></span>
<span class="utf"><i>&#xe957;</i> ms-ability-hexproof-green <code>&amp;#xe957;</code></span>
<span class="utf"><i>&#xe958;</i> ms-ability-hexproof-red <code>&amp;#xe958;</code></span>
<span class="utf"><i>&#xe959;</i> ms-ability-hexproof-white <code>&amp;#xe959;</code></span>
<span class="utf"><i>&#xe95a;</i> ms-ability-indestructible <code>&amp;#xe95a;</code></span>
<span class="utf"><i>&#xe95b;</i> ms-ability-jumpstart <code>&amp;#xe95b;</code></span>
<span class="utf"><i>&#xe989;</i> ms-ability-kicker <code>&amp;#xe989;</code></span>
<span class="utf"><i>&#xe988;</i> ms-ability-landfall <code>&amp;#xe988;</code></span>
<span class="utf"><i>&#xe95c;</i> ms-ability-lifelink <code>&amp;#xe95c;</code></span>
<span class="utf"><i>&#xe95d;</i> ms-ability-menace <code>&amp;#xe95d;</code></span>
<span class="utf"><i>&#xe95e;</i> ms-ability-mentor <code>&amp;#xe95e;</code></span>
<span class="utf"><i>&#xe980;</i> ms-ability-mutate <code>&amp;#xe980;</code></span>
<span class="utf"><i>&#xe987;</i> ms-ability-party <code>&amp;#xe987;</code></span>
<span class="utf"><i>&#xe981;</i> ms-ability-proliferate <code>&amp;#xe981;</code></span>
<span class="utf"><i>&#xe982;</i> ms-ability-prowess <code>&amp;#xe982;</code></span>
<span class="utf"><i>&#xe95f;</i> ms-ability-raid <code>&amp;#xe95f;</code></span>
<span class="utf"><i>&#xe960;</i> ms-ability-reach <code>&amp;#xe960;</code></span>
<span class="utf"><i>&#xe961;</i> ms-ability-revolt <code>&amp;#xe961;</code></span>
<span class="utf"><i>&#xe973;</i> ms-ability-riot <code>&amp;#xe973;</code></span>
<span class="utf"><i>&#xe96b;</i> ms-ability-spectacle <code>&amp;#xe96b;</code></span>
<span class="utf"><i>&#xe962;</i> ms-ability-static <code>&amp;#xe962;</code></span>
<span class="utf"><i>&#xe96a;</i> ms-ability-summoning-sickness <code>&amp;#xe96a;</code></span>
<span class="utf"><i>&#xe963;</i> ms-ability-surveil <code>&amp;#xe963;</code></span>
<span class="utf"><i>&#xe964;</i> ms-ability-trample <code>&amp;#xe964;</code></span>
<span class="utf"><i>&#xe965;</i> ms-ability-transform <code>&amp;#xe965;</code></span>
<span class="utf"><i>&#xe966;</i> ms-ability-triggered <code>&amp;#xe966;</code></span>
<span class="utf"><i>&#xe967;</i> ms-ability-undergrowth <code>&amp;#xe967;</code></span>
<span class="utf"><i>&#xe968;</i> ms-ability-vigilance <code>&amp;#xe968;</code></span>
<div class="clear"></div>
</div>
<div class="vectors overflow">
<span class="utf"><i>&#xe92b;</i> ms-counter-arrow <code>&amp;#xe92b;</code></span>
<span class="utf"><i>&#xe92c;</i> ms-counter-brick <code>&amp;#xe92c;</code></span>
<span class="utf"><i>&#xe92d;</i> ms-counter-charge <code>&amp;#xe92d;</code></span>
<span class="utf"><i>&#xe92e;</i> ms-counter-devotion <code>&amp;#xe92e;</code></span>
<span class="utf"><i>&#xe92f;</i> ms-counter-doom <code>&amp;#xe92f;</code></span>
<span class="utf"><i>&#xe930;</i> ms-counter-echo <code>&amp;#xe930;</code></span>
<span class="utf"><i>&#xe931;</i> ms-counter-flame <code>&amp;#xe931;</code></span>
<span class="utf"><i>&#xe932;</i> ms-counter-flood <code>&amp;#xe932;</code></span>
<span class="utf"><i>&#xe933;</i> ms-counter-fungus <code>&amp;#xe933;</code></span>
<span class="utf"><i>&#xe934;</i> ms-counter-gold <code>&amp;#xe934;</code></span>
<span class="utf"><i>&#xe935;</i> ms-counter-ki <code>&amp;#xe935;</code></span>
<span class="utf"><i>&#xe936;</i> ms-counter-lore <code>&amp;#xe936;</code></span>
<span class="utf"><i>&#xe937;</i> ms-counter-loyalty <code>&amp;#xe937;</code></span>
<span class="utf"><i>&#xe938;</i> ms-counter-mining <code>&amp;#xe938;</code></span>
<span class="utf"><i>&#xe939;</i> ms-counter-minus <code>&amp;#xe939;</code></span>
<span class="utf"><i>&#xe943;</i> ms-counter-minus-uneven <code>&amp;#xe943;</code></span>
<span class="utf"><i>&#xe93a;</i> ms-counter-muster <code>&amp;#xe93a;</code></span>
<span class="utf"><i>&#xe93b;</i> ms-counter-paw <code>&amp;#xe93b;</code></span>
<span class="utf"><i>&#xe93c;</i> ms-counter-pin <code>&amp;#xe93c;</code></span>
<span class="utf"><i>&#xe93d;</i> ms-counter-plus <code>&amp;#xe93d;</code></span>
<span class="utf"><i>&#xe944;</i> ms-counter-plus-uneven <code>&amp;#xe944;</code></span>
<span class="utf"><i>&#xe93e;</i> ms-counter-scream <code>&amp;#xe93e;</code></span>
<span class="utf"><i>&#xe93f;</i> ms-counter-skeleton <code>&amp;#xe93f;</code></span>
<span class="utf"><i>&#xe940;</i> ms-counter-skull <code>&amp;#xe940;</code></span>
<span class="utf"><i>&#xe941;</i> ms-counter-slime <code>&amp;#xe941;</code></span>
<span class="utf"><i>&#xe942;</i> ms-counter-time <code>&amp;#xe942;</code></span>
<span class="utf"><i>&#xe945;</i> ms-counter-verse <code>&amp;#xe945;</code></span>
<span class="utf"><i>&#xe946;</i> ms-counter-vortex <code>&amp;#xe946;</code></span>
<div class="clear"></div>
</div>
</section>
</div>
</main>
<footer>
<div class="wrapper">
<div class="float-left">
<p>Made with &hearts; by <a href="https://andrewgioia.com">Andrew Gioia</a></p>
</div>
<div class="float-right" style="text-align: right;">
<p>
All mana images and card symbols &copy; <a href="http://magicthegathering.com">Wizards of the Coast</a><br />
The Mana font is licensed under the the <a href="http://scripts.sil.org/OFL">SIL OFL 1.1</a><br />
Mana CSS, LESS, and Sass files are licensed under the <a href="http://opensource.org/licenses/mit-license.html">MIT License</a><br />
</p>
</div>
<div class="clear"></div>
</div>
</footer>
</body>
</html>