mana/icons.html

354 lines
20 KiB
HTML

<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="chrome=1" />
<title>Mana Icons | 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">Complete set of Magic mana and card symbol font icons</h2>
</div>
</header>
<main>
<div class="wrapper">
<section>
<h3>
View the full list of mana symbols and other Magic card symboles.
To see all the different variations and casting cost styles, check out the <a href="attributes.html">Attributes</a> page.
To use the symbols on your desktop or just get the vectors, check out the <a href="cheatsheet.html">Cheatsheet</a>.
</h3>
</section>
<section class="content icons">
<h4>Mana &amp; Resource Symbols</h4>
<div class="icons">
<div class="icon" id="w" name="W">
<span><i class="ms ms-w"></i> White <em>(w)</em></span>
</div>
<div class="icon" id="u" name="U">
<span><i class="ms ms-u"></i> Blue <em>(u)</em></span>
</div>
<div class="icon" id="b" name="B">
<span><i class="ms ms-b"></i> Black <em>(b)</em></span>
</div>
<div class="icon" id="r" name="R">
<span><i class="ms ms-r"></i> Red <em>(r)</em></span>
</div>
<div class="icon" id="g" name="G">
<span><i class="ms ms-g"></i> Green <em>(g)</em></span>
</div>
<div class="icon" id="c" name="C">
<span><i class="ms ms-c"></i> Colorless Mana <em>(c)</em></span>
</div>
<div class="icon" id="p" name="P">
<span><i class="ms ms-p"></i> Phyrexian Mana <em>(p)</em></span>
</div>
<div class="icon" id="s" name="Snow">
<span><i class="ms ms-s"></i> Snow Mana <em>(s)</em></span>
</div>
<div class="icon" id="x" name="X">
<span><i class="ms ms-x"></i> X <em>(x)</em></span>
</div>
<div class="icon" id="y" name="Y">
<span><i class="ms ms-y"></i> Y <em>(y)</em></span>
</div>
<div class="icon" id="z" name="Z">
<span><i class="ms ms-z"></i> Z <em>(z)</em></span>
</div>
<div class="icon" id="0" name="0">
<span><i class="ms ms-0"></i> 0 <em>(0)</em></span>
</div>
<div class="icon" id="1" name="1">
<span><i class="ms ms-1"></i> 1 <em>(1)</em></span>
</div>
<div class="icon" id="2" name="2">
<span><i class="ms ms-2"></i> 2 <em>(2)</em></span>
</div>
<div class="icon" id="3" name="3">
<span><i class="ms ms-3"></i> 3 <em>(3)</em></span>
</div>
<div class="icon" id="4" name="4">
<span><i class="ms ms-4"></i> 4 <em>(4)</em></span>
</div>
<div class="icon" id="5" name="5">
<span><i class="ms ms-5"></i> 5 <em>(5)</em></span>
</div>
<div class="icon" id="6" name="6">
<span><i class="ms ms-6"></i> 6 <em>(6)</em></span>
</div>
<div class="icon" id="7" name="7">
<span><i class="ms ms-7"></i> 7 <em>(7)</em></span>
</div>
<div class="icon" id="8" name="8">
<span><i class="ms ms-8"></i> 8 <em>(8)</em></span>
</div>
<div class="icon" id="9" name="9">
<span><i class="ms ms-9"></i> 9 <em>(9)</em></span>
</div>
<div class="icon" id="10" name="10">
<span><i class="ms ms-10"></i> 10 <em>(10)</em></span>
</div>
<div class="icon" id="11" name="11">
<span><i class="ms ms-11"></i> 11 <em>(11)</em></span>
</div>
<div class="icon" id="12" name="12">
<span><i class="ms ms-12"></i> 12 <em>(12)</em></span>
</div>
<div class="icon" id="13" name="13">
<span><i class="ms ms-13"></i> 13 <em>(13)</em></span>
</div>
<div class="icon" id="14" name="14">
<span><i class="ms ms-14"></i> 14 <em>(14)</em></span>
</div>
<div class="icon" id="15" name="15">
<span><i class="ms ms-15"></i> 15 <em>(15)</em></span>
</div>
<div class="icon" id="16" name="16">
<span><i class="ms ms-16"></i> 16 <em>(16)</em></span>
</div>
<div class="icon" id="17" name="17">
<span><i class="ms ms-17"></i> 17 <em>(17)</em></span>
</div>
<div class="icon" id="18" name="18">
<span><i class="ms ms-18"></i> 18 <em>(18)</em></span>
</div>
<div class="icon" id="19" name="19">
<span><i class="ms ms-19"></i> 19 <em>(19)</em></span>
</div>
<div class="icon" id="20" name="20">
<span><i class="ms ms-20"></i> 20 <em>(20)</em></span>
</div>
<div class="icon" id="1-2" name="1/2">
<span><i class="ms ms-1-2"></i> 1/2 <em>(1-2)</em></span>
</div>
<div class="icon" id="infinity" name="Infinity">
<span><i class="ms ms-infinity"></i> Infinity <em>(infinity)</em></span>
</div>
<div class="icon" id="100" name="100">
<span><i class="ms ms-100 ms-fw" style="font-size: 1.0em"></i> 100 <em>(100)</em></span>
</div>
<div class="icon" id="1000000" name="1000000">
<span><i class="ms ms-1000000 ms-fw" style="font-size: .75em"></i> &nbsp;&nbsp;&nbsp;&nbsp;1,000,000 <em>(1000000)</em></span>
</div>
<div class="icon" id="e" name="Energy">
<span><i class="ms ms-e"></i> Energy <em>(e)</em></span>
</div>
</div>
<h4 style="padding-top:25px;">Card Symbols</h4>
<div class="icons">
<div class="icon" id="tap" name="Tap">
<span><i class="ms ms-tap"></i> Tap <em>(tap)</em></span>
</div>
<div class="icon" id="untap" name="Untap">
<span><i class="ms ms-untap"></i> Untap <em>(untap)</em></span>
</div>
<div class="icon" id="tap-alt" name="Tap (Alt)">
<span><i class="ms ms-tap-alt"></i> Tap <em>(tap-alt)</em></span>
</div>
<div class="icon" id="chaos" name="Chaos">
<span><i class="ms ms-chaos"></i> Chaos <em>(chaos)</em></span>
</div>
<div class="icon" id="artifact" name="Artifact">
<span><i class="ms ms-artifact"></i> Artifact <em>(artifact)</em></span>
</div>
<div class="icon" id="creature" name="Creature">
<span><i class="ms ms-creature"></i> Creature <em>(creature)</em></span>
</div>
<div class="icon" id="enchantment" name="Enchantment">
<span><i class="ms ms-enchantment"></i> Enchantment <em>(enchantment)</em></span>
</div>
<div class="icon" id="instant" name="Instant">
<span><i class="ms ms-instant"></i> Instant <em>(instant)</em></span>
</div>
<div class="icon" id="land" name="Land">
<span><i class="ms ms-land"></i> Land <em>(land)</em></span>
</div>
<div class="icon" id="planeswalker" name="Planeswalker">
<span><i class="ms ms-planeswalker"></i> Planeswalker <em>(planeswalker)</em></span>
</div>
<div class="icon" id="sorcery" name="Sorcery">
<span><i class="ms ms-sorcery"></i> Sorcery <em>(sorcery)</em></span>
</div>
<div class="icon" id="multiple" name="Multiple">
<span><i class="ms ms-multiple"></i> Multiple <em>(multiple)</em></span>
</div>
<div class="icon" id="flashback" name="Flashback">
<span><i class="ms ms-flashback"></i> Flashback <em>(flashback)</em></span>
</div>
<div class="icon" id="loyalty-up" name="Loyalty Up">
<span><i class="ms ms-loyalty-up"></i> Loyalty Up <em>(loyalty-up)</em></span>
</div>
<div class="icon" id="loyalty-down" name="Loyalty Down">
<span><i class="ms ms-loyalty-down"></i> Loyalty Down <em>(loyalty-down)</em></span>
</div>
<div class="icon" id="loyalty-zero" name="Loyalty Zero">
<span><i class="ms ms-loyalty-zero"></i> Loyalty Zero <em>(loyalty-zero)</em></span>
</div>
<div class="icon" id="loyalty-start" name="Loyalty Start">
<span><i class="ms ms-loyalty-start"></i> Loyalty Start <em>(loyalty-start)</em></span>
</div>
<div class="icon" id="dfc-day" name="DFC (Day)">
<span><i class="ms ms-dfc-day"></i> DFC Day <em>(dfc-day)</em></span>
</div>
<div class="icon" id="dfc-night" name="DFC (Night)">
<span><i class="ms ms-dfc-night"></i> DFC Night <em>(dfc-night)</em></span>
</div>
<div class="icon" id="dfc-spark" name="DFC (Spark)">
<span><i class="ms ms-dfc-spark"></i> DFC Spark <em>(dfc-spark)</em></span>
</div>
<div class="icon" id="dfc-ignite" name="DFC (Ignite)">
<span><i class="ms ms-dfc-ignite"></i> DFC Ignite <em>(dfc-ignite)</em></span>
</div>
<div class="icon" id="dfc-moon" name="DFC (Moon)">
<span><i class="ms ms-dfc-moon"></i> DFC Moon <em>(dfc-moon)</em></span>
</div>
<div class="icon" id="dfc-emrakul" name="DFC (Emrakul)">
<span><i class="ms ms-dfc-emrakul"></i> DFC Emrakul <em>(dfc-emrakul)</em></span>
</div>
<div class="icon" id="dfc-enchantment" name="DFC (Enchantment)">
<span><i class="ms ms-dfc-enchantment"></i> DFC Enchantment <em>(dfc-enchantment)</em></span>
</div>
<div class="icon" id="power" name="Power">
<span><i class="ms ms-power"></i> Power <em>(power)</em></span>
</div>
<div class="icon" id="toughness" name="Toughness">
<span><i class="ms ms-toughness"></i> Toughness <em>(toughness)</em></span>
</div>
<div class="icon" id="artist-brush" name="Artist (Brush)">
<span><i class="ms ms-artist-brush"></i> Artist (Brush) <em>(artist-brush)</em></span>
</div>
<div class="icon" id="artist-nib" name="Artist (Nib)">
<span><i class="ms ms-artist-nib"></i> Artist (Nib) <em>(artist-nib)</em></span>
</div>
<div class="icon" id="saga" name="Saga">
<span><i class="ms ms-saga ms-saga-1"></i> Saga <em>(saga)</em></span>
</div>
<div class="icon" id="acorn" name="Acorn">
<span><i class="ms ms-acorn"></i> Acorn <em>(acorn)</em></span>
</div>
</div>
<h4 style="padding-top:25px;">Guild and Clan Watermarks</h4>
<div class="icons">
<div class="icon" id="azorius" name="Azorius">
<span><i class="ms ms-guild-azorius"></i> Azorius <em>(guild-azorius)</em></span>
</div>
<div class="icon" id="boros" name="Boros">
<span><i class="ms ms-guild-boros"></i> Boros <em>(guild-boros)</em></span>
</div>
<div class="icon" id="dimir" name="Dimir">
<span><i class="ms ms-guild-dimir"></i> Dimir <em>(guild-dimir)</em></span>
</div>
<div class="icon" id="golgari" name="Golgari">
<span><i class="ms ms-guild-golgari"></i> Golgari <em>(guild-golgari)</em></span>
</div>
<div class="icon" id="gruul" name="Gruul">
<span><i class="ms ms-guild-gruul"></i> Gruul <em>(guild-gruul)</em></span>
</div>
<div class="icon" id="izzet" name="Izzet">
<span><i class="ms ms-guild-izzet"></i> Izzet <em>(guild-izzet)</em></span>
</div>
<div class="icon" id="orzhov" name="Orzhov">
<span><i class="ms ms-guild-orzhov"></i> Orzhov <em>(guild-orzhov)</em></span>
</div>
<div class="icon" id="rakdos" name="Rakdos">
<span><i class="ms ms-guild-rakdos"></i> Rakdos <em>(guild-rakdos)</em></span>
</div>
<div class="icon" id="selesnya" name="Selesnya">
<span><i class="ms ms-guild-selesnya"></i> Selesnya <em>(guild-selesnya)</em></span>
</div>
<div class="icon" id="simic" name="Simic">
<span><i class="ms ms-guild-simic"></i> Simic <em>(guild-simic)</em></span>
</div>
<div class="icon" id="abzan" name="Abzan">
<span><i class="ms ms-clan-abzan"></i> Abzan <em>(clan-abzan)</em></span>
</div>
<div class="icon" id="jeskai" name="Jeskai">
<span><i class="ms ms-clan-jeskai"></i> Jeskai <em>(clan-jeskai)</em></span>
</div>
<div class="icon" id="mardu" name="Mardu">
<span><i class="ms ms-clan-mardu"></i> Mardu <em>(clan-mardu)</em></span>
</div>
<div class="icon" id="sultai" name="Sultai">
<span><i class="ms ms-clan-sultai"></i> Sultai <em>(clan-sultai)</em></span>
</div>
<div class="icon" id="temur" name="Temur">
<span><i class="ms ms-clan-temur"></i> Temur <em>(clan-temur)</em></span>
</div>
<div class="icon" id="atarka" name="Atarka">
<span><i class="ms ms-clan-atarka"></i> Atarka <em>(clan-atarka)</em></span>
</div>
<div class="icon" id="dromoka" name="Dromoka">
<span><i class="ms ms-clan-dromoka"></i> Dromoka <em>(clan-dromoka)</em></span>
</div>
<div class="icon" id="kolaghan" name="Kolaghan">
<span><i class="ms ms-clan-kolaghan"></i> Kolaghan <em>(clan-kolaghan)</em></span>
</div>
<div class="icon" id="ojutai" name="Ojutai">
<span><i class="ms ms-clan-ojutai"></i> Ojutai <em>(clan-ojutai)</em></span>
</div>
<div class="icon" id="silumgar" name="Silumgar">
<span><i class="ms ms-clan-silumgar"></i> Silumgar <em>(clan-silumgar)</em></span>
</div>
</div>
<h4 style="padding-top:25px;">Poleis Symbols</h4>
<div class="icons">
<div class="icon" id="setessa" name="Setessa">
<span><i class="ms ms-polis-setessa"></i> Setessa <em>(polis-setessa)</em></span>
</div>
<div class="icon" id="akros" name="Akros">
<span><i class="ms ms-polis-akros"></i> Akros <em>(polis-akros)</em></span>
</div>
<div class="icon" id="meletis" name="Meletis">
<span><i class="ms ms-polis-meletis"></i> Meletis <em>(polis-meletis)</em></span>
</div>
</div>
</section>
</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>