mana/cheatsheet.html
2016-06-20 22:08:52 -04:00

139 lines
8.4 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="bower_components/mana/css/mana.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="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">Complete set of Magic mana and card symbol font icons</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>
<div class="clear"></div>
</div>
<div class="vectors">
<span class="utf"><i>&#xe61a;</i> ms-tap <code>&amp;#xe61a;</code></span>
<span class="utf"><i>&#xe61b;</i> ms-untap <code>&amp;#xe61b;</code></span>
<span class="utf"><i>&#xe61c;</i> ms-tap-alt <code>&amp;#xe61c;</code></span>
<span class="utf"><i>&#xe616;</i> ms-chaos <code>&amp;#xe616;</code></span>
<span class="utf"><i>&#xe61d;</i> ms-1-2 <code>&amp;#xe61d;</code></span>
<span class="utf"><i>&#xe902;</i> ms-infinity <code>&amp;#xe902;</code></span>
<span class="utf"><i>&#xe903;</i> ms-s <code>&amp;#xe903;</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-100000 <code>&amp;#xe901;</code></span>
<div class="clear"></div>
</div>
<div class="vectors">
<span class="utf"><i>&#xe61e;</i> ms-artifact <code>&amp;#xe61e;</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>&#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>&#xe623;</i> ms-planeswalker <code>&amp;#xe623;</code></span>
<span class="utf"><i>&#xe624;</i> ms-sorcery <code>&amp;#xe624;</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>&#xe629;</i> ms-flashback <code>&amp;#xe629;</code></span>
<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>
<div class="clear"></div>
</div>
</div>
</main>
<footer>
<div class="wrapper">
<div class="float-left">
<p>Made with &hearts; by <a href="http://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>