mirror of
https://github.com/andrewgioia/mana.git
synced 2024-10-31 23:44:47 +00:00
Updated icons page and new attributes page showing all of the available options
This commit is contained in:
Andrew Gioia
parent
254f584f38
commit
48cd786eb0
199
attributes.html
Normal file
199
attributes.html
Normal file
@ -0,0 +1,199 @@
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="chrome=1" />
|
||||
<title>Attributes and Examples | 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="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 & 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><strong>Mana</strong> has some built in icon options to easily change the <strong>size and position</strong>, convert the mana symbols to the <strong>casting costs</strong>, and create planeswalker <strong>loyalty symbols</strong> with numbers. Take a look below at examples of each option with the class names to implement them.</h3>
|
||||
</section>
|
||||
<section class="content">
|
||||
<h4>The Basic Icon</h4>
|
||||
<div class="example float-left">
|
||||
<span class="each">
|
||||
<i class="ms ms-u"></i> .ms-u
|
||||
</span>
|
||||
</div>
|
||||
<div class="explanation">
|
||||
<p>You can place Mana icons anywhere using the CSS classname prefix <code>ms</code> (for "mana symbol") and then the mana/card symbol's <a href="icons.html">suffix</a>.</p>
|
||||
<blockquote>
|
||||
<<span class="e">i</span> <span class="a">class</span>=<span class="v">"ms ms-u"</span>></<span class="e">i</span>> <br />
|
||||
</blockquote>
|
||||
</div>
|
||||
<div class="clear"></div>
|
||||
</section>
|
||||
<section class="content">
|
||||
<h4>Creating a Casting Cost</h4>
|
||||
<div class="example float-left">
|
||||
<span class="each">
|
||||
<i class="ms ms-g ms-cost"></i> .ms-cost
|
||||
</span>
|
||||
<span class="each">
|
||||
<i class="ms ms-r ms-cost ms-shadow"></i> + .ms-shadow
|
||||
</span>
|
||||
</div>
|
||||
<div class="explanation">
|
||||
<p>Add the <code>.ms-cost</code> class to create a casting cost circle around the symbol. Append the <code>.ms-shadow</code> class to add a drop shadow.</p>
|
||||
<blockquote>
|
||||
<<span class="e">i</span> <span class="a">class</span>=<span class="v">"ms ms-g ms-cost"</span>></<span class="e">i</span>> <br />
|
||||
<<span class="e">i</span> <span class="a">class</span>=<span class="v">"ms ms-r ms-cost ms-shadow"</span>></<span class="e">i</span>>
|
||||
</blockquote>
|
||||
</div>
|
||||
<div class="clear"></div>
|
||||
</section>
|
||||
<section class="content">
|
||||
<h4>Split Casting Costs</h4>
|
||||
<div class="example float-left">
|
||||
<span class="each">
|
||||
<i class="ms ms-wu ms-split ms-cost"></i> .ms-split
|
||||
</span>
|
||||
<span class="each">
|
||||
<i class="ms ms-2b ms-split ms-cost ms-shadow"></i> + .ms-shadow
|
||||
</span>
|
||||
</div>
|
||||
<div class="explanation">
|
||||
<p>Automatically create split casting costs using the <code>.ms-split</code> class along with the 2 symbols' codes. This works for color pairs and the "2" with a color.</p>
|
||||
<blockquote>
|
||||
<<span class="e">i</span> <span class="a">class</span>=<span class="v">"ms ms-wu ms-split ms-cost"</span>></<span class="e">i</span>><br />
|
||||
<<span class="e">i</span> <span class="a">class</span>=<span class="v">"ms ms-2b ms-split ms-cost ms-shadow"</span>></<span class="e">i</span>>
|
||||
</blockquote>
|
||||
</div>
|
||||
<div class="clear"></div>
|
||||
</section>
|
||||
<section class="content">
|
||||
<h4>Half Mana Casting Costs</h4>
|
||||
<div class="example float-left">
|
||||
<span class="each">
|
||||
<span class="ms-half"><i class="ms ms-w ms-cost"></i></span> .ms-half
|
||||
</span>
|
||||
</div>
|
||||
<div class="explanation">
|
||||
<p>Even though there's only been <a href="http://magiccards.info/uh/en/16.html">one of these ever printed</a> you can still create them :P Half costs require a bit more markup:</p>
|
||||
<blockquote>
|
||||
<<span class="e">span</span> <span class="a">class</span>=<span class="v">"ms-half"</span>><br />
|
||||
<<span class="e">i</span> <span class="a">class</span>=<span class="v">"ms ms-w ms-cost"</span>></<span class="e">i</span>><br />
|
||||
</<span class="e">span</span>>
|
||||
</blockquote>
|
||||
</div>
|
||||
<div class="clear"></div>
|
||||
</section>
|
||||
<section class="content">
|
||||
<h4>Planeswalker Symbols</h4>
|
||||
<div class="example float-left">
|
||||
<span class="each">
|
||||
<i class="ms ms-loyalty-up ms-loyalty-3"></i> .ms-loyalty-up
|
||||
</span>
|
||||
<span class="each">
|
||||
<i class="ms ms-loyalty-down ms-loyalty-2"></i> .ms-loyalty-down
|
||||
</span>
|
||||
</div>
|
||||
<div class="explanation">
|
||||
<p>You can create planewalker loyalty symbols for the starting value, zero, and ticking up or down. The number that appears is based on a class you add, like <code>.ms-loyalty-4</code>.</p>
|
||||
<blockquote>
|
||||
<<span class="e">i</span> <span class="a">class</span>=<span class="v">"ms ms-loyalty-up ms-loyalty-3"</span>></<span class="e">i</span>><br />
|
||||
<<span class="e">i</span> <span class="a">class</span>=<span class="v">"ms ms-loyalty-down ms-loyalty-2"</span>></<span class="e">i</span>>
|
||||
</blockquote>
|
||||
</div>
|
||||
<div class="clear"></div>
|
||||
</section>
|
||||
<section class="content">
|
||||
<h4>Increase the Symbol's Size</h4>
|
||||
<div class="example float-left">
|
||||
<span class="each">
|
||||
<i class="ms ms-r ms-2x"></i> .ms-2x
|
||||
</span>
|
||||
<span class="each">
|
||||
<i class="ms ms-r ms-3x"></i> .ms-3x
|
||||
</span>
|
||||
<span class="each">
|
||||
<i class="ms ms-r ms-4x"></i> .ms-4x
|
||||
</span>
|
||||
<span class="each">
|
||||
<i class="ms ms-r ms-5x"></i> .ms-5x
|
||||
</span>
|
||||
<span class="each">
|
||||
<i class="ms ms-r ms-6x"></i> .ms-6x
|
||||
</span>
|
||||
</div>
|
||||
<div class="explanation">
|
||||
<p>To conveniently increase the size of a mana or card symbol you can append the classes <code>ms-2x</code>, <code>ms-3x</code>, <code>ms-4x</code>, <code>ms-4x</code>, and <code>ms-6x</code>. These classes increase the size by a factor equal to class name number.</p>
|
||||
<blockquote>
|
||||
<<span class="e">i</span> <span class="a">class</span>=<span class="v">"ms ms-r ss-2x"</span>></<span class="e">i</span>> ms-2x<br />
|
||||
<<span class="e">i</span> <span class="a">class</span>=<span class="v">"ms ms-r ss-3x"</span>></<span class="e">i</span>> ms-3x<br />
|
||||
<<span class="e">i</span> <span class="a">class</span>=<span class="v">"ms ms-r ss-4x"</span>></<span class="e">i</span>> ms-4x<br />
|
||||
<<span class="e">i</span> <span class="a">class</span>=<span class="v">"ms ms-r ss-5x"</span>></<span class="e">i</span>> ms-5x<br />
|
||||
<<span class="e">i</span> <span class="a">class</span>=<span class="v">"ms ms-r ss-6x"</span>></<span class="e">i</span>> ms-6x
|
||||
</blockquote>
|
||||
</div>
|
||||
<div class="clear"></div>
|
||||
</section>
|
||||
<section class="content">
|
||||
<h4>Fixed Width</h4>
|
||||
<div class="example float-left">
|
||||
<span class="each"><i class="ms ms-planeswalker ms-fw"></i> Planeswalker</span>
|
||||
<span class="each"><i class="ms ms-land ms-fw"></i> Land</span>
|
||||
</div>
|
||||
<div class="explanation">
|
||||
<p>Some of the card symbols are variable width by default, if you put them in a list they may stack irregularly. To fix their width to a standard size, just append the class <code>.ms-fw</code> and the symbols will have a constant width and centered icon.</p>
|
||||
<blockquote>
|
||||
<<span class="e">i</span> <span class="a">class</span>=<span class="v">"ss ss-planeswalker ss-fw"</span>></<span class="e">i</span>> Planeswalker symbol<br />
|
||||
<<span class="e">i</span> <span class="a">class</span>=<span class="v">"ss ss-land ss-fw"</span>></<span class="e">i</span>> Land symbol
|
||||
</blockquote>
|
||||
</div>
|
||||
<div class="clear"></div>
|
||||
</section>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<footer>
|
||||
<div class="wrapper">
|
||||
<div class="float-left">
|
||||
<p>Made with ♥ 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 © <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>
|
||||
11
css/main.css
11
css/main.css
@ -148,8 +148,8 @@ h4 {
|
||||
h5 {
|
||||
color: #555;
|
||||
font-size: 17px;
|
||||
font-weight: normal;
|
||||
margin: 25px 0 -5px;
|
||||
font-weight: bold;
|
||||
margin: 15px 0 5px;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
@ -244,7 +244,7 @@ blockquote {
|
||||
margin-bottom: -5px;
|
||||
}
|
||||
|
||||
.icon .ss {
|
||||
.icon .ms {
|
||||
font-size: 22px;
|
||||
margin-right: 5px;
|
||||
margin-top: -2px;
|
||||
@ -252,7 +252,7 @@ blockquote {
|
||||
width: 32px;
|
||||
}
|
||||
|
||||
.icon:hover .ss {
|
||||
.icon:hover .ms {
|
||||
font-size: 32px;
|
||||
text-shadow: 0 1px 0 #fff;
|
||||
}
|
||||
@ -313,7 +313,8 @@ blockquote {
|
||||
|
||||
.example .each {
|
||||
display: block;
|
||||
padding-bottom: 2px;
|
||||
padding-top: 1px;
|
||||
padding-bottom: 7px;
|
||||
}
|
||||
|
||||
.explanation {
|
||||
|
||||
285
icons.html
285
icons.html
@ -40,126 +40,181 @@
|
||||
<div class="wrapper">
|
||||
<section>
|
||||
<h3>
|
||||
View the full list of mana symbols and other Magic card symboles. To use the symbols on your desktop or just get the vectors, check out the <a href="cheatsheet.html">Cheatsheet</a>.
|
||||
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 Symbols</h4>
|
||||
<h5>Raw Symbols</h5>
|
||||
<p>
|
||||
<i class="ms ms-w"></i>
|
||||
<i class="ms ms-u"></i>
|
||||
<i class="ms ms-b"></i>
|
||||
<i class="ms ms-r"></i>
|
||||
<i class="ms ms-g"></i>
|
||||
<i class="ms ms-c"></i>
|
||||
</p>
|
||||
<h5>Mana Costs</h5>
|
||||
<p>
|
||||
<i class="ms ms-w ms-cost"></i>
|
||||
<i class="ms ms-u ms-cost"></i>
|
||||
<i class="ms ms-b ms-cost"></i>
|
||||
<i class="ms ms-r ms-cost"></i>
|
||||
<i class="ms ms-g ms-cost"></i>
|
||||
<i class="ms ms-c ms-cost"></i>
|
||||
<i class="ms ms-0 ms-cost"></i>
|
||||
<i class="ms ms-1 ms-cost"></i>
|
||||
<i class="ms ms-2 ms-cost"></i>
|
||||
<i class="ms ms-3 ms-cost"></i>
|
||||
<i class="ms ms-4 ms-cost"></i>
|
||||
<i class="ms ms-5 ms-cost"></i>
|
||||
<i class="ms ms-6 ms-cost"></i>
|
||||
<i class="ms ms-7 ms-cost"></i>
|
||||
<i class="ms ms-8 ms-cost"></i>
|
||||
<i class="ms ms-9 ms-cost"></i>
|
||||
<i class="ms ms-10 ms-cost"></i>
|
||||
<i class="ms ms-11 ms-cost"></i>
|
||||
<i class="ms ms-12 ms-cost"></i>
|
||||
<i class="ms ms-13 ms-cost"></i>
|
||||
<i class="ms ms-14 ms-cost"></i>
|
||||
<i class="ms ms-15 ms-cost"></i>
|
||||
<i class="ms ms-16 ms-cost"></i>
|
||||
<i class="ms ms-17 ms-cost"></i>
|
||||
<i class="ms ms-18 ms-cost"></i>
|
||||
<i class="ms ms-19 ms-cost"></i>
|
||||
<i class="ms ms-20 ms-cost"></i>
|
||||
<i class="ms ms-x ms-cost"></i>
|
||||
<i class="ms ms-y ms-cost"></i>
|
||||
<i class="ms ms-z ms-cost"></i>
|
||||
</p>
|
||||
<h5>Phyrexian, snow, and split symbols</h5>
|
||||
<p>
|
||||
<i class="ms ms-wp ms-cost"></i>
|
||||
<i class="ms ms-up ms-cost"></i>
|
||||
<i class="ms ms-bp ms-cost"></i>
|
||||
<i class="ms ms-rp ms-cost"></i>
|
||||
<i class="ms ms-gp ms-cost"></i>
|
||||
<i class="ms ms-s ms-cost"></i>
|
||||
<i class="ms ms-c ms-cost"></i>
|
||||
<br />
|
||||
<i class="ms ms-wu ms-split ms-cost"></i>
|
||||
<i class="ms ms-wb ms-split ms-cost"></i>
|
||||
<i class="ms ms-ub ms-split ms-cost"></i>
|
||||
<i class="ms ms-ur ms-split ms-cost"></i>
|
||||
<i class="ms ms-br ms-split ms-cost"></i>
|
||||
<i class="ms ms-bg ms-split ms-cost"></i>
|
||||
<i class="ms ms-rw ms-split ms-cost"></i>
|
||||
<i class="ms ms-rg ms-split ms-cost"></i>
|
||||
<i class="ms ms-gw ms-split ms-cost"></i>
|
||||
<i class="ms ms-gu ms-split ms-cost"></i>
|
||||
<i class="ms ms-2w ms-split ms-cost"></i>
|
||||
<i class="ms ms-2u ms-split ms-cost"></i>
|
||||
<i class="ms ms-2b ms-split ms-cost"></i>
|
||||
<i class="ms ms-2r ms-split ms-cost"></i>
|
||||
<i class="ms ms-2g ms-split ms-cost"></i>
|
||||
</p>
|
||||
<h5><a href="http://gatherer.wizards.com/Pages/Card/Details.aspx?multiverseid=74257">Half mana symbols</a></h5>
|
||||
<p>
|
||||
<span class="ms-half"><i class="ms ms-w ms-cost"></i></span>
|
||||
<span class="ms-half"><i class="ms ms-u ms-cost"></i></span>
|
||||
<span class="ms-half"><i class="ms ms-b ms-cost"></i></span>
|
||||
<span class="ms-half"><i class="ms ms-r ms-cost"></i></span>
|
||||
<span class="ms-half"><i class="ms ms-g ms-cost"></i></span>
|
||||
</p>
|
||||
<h5>Un-set mana symbols</h5>
|
||||
<p>
|
||||
<i class="ms ms-1-2 ms-cost"></i>
|
||||
<i class="ms ms-infinity ms-cost"></i>
|
||||
<i class="ms ms-100 ms-cost"></i>
|
||||
<i class="ms ms-100000 ms-cost"></i>
|
||||
</p>
|
||||
<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-c"></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> 17 <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-19"></i> 19 <em>(19)</em></span>
|
||||
</div>
|
||||
<div class="icon" id="1000000" name="1000000">
|
||||
<span><i class="ms ms-100000 ms-fw" style="font-size: .75em"></i> 1,000,000 <em>(1000000)</em></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h4 style="padding-top:25px;">Card Symbols</h4>
|
||||
<h5>Tap and roll symbols</h5>
|
||||
<p>
|
||||
<i class="ms ms-tap ms-cost"></i>
|
||||
<i class="ms ms-untap ms-cost"></i>
|
||||
<i class="ms ms-tap-alt ms-cost"></i>
|
||||
<i class="ms ms-chaos"></i>
|
||||
</p>
|
||||
<h5>Future Sight type symbols</h5>
|
||||
<p>
|
||||
<i class="ms ms-artifact ms-2x"></i>
|
||||
<i class="ms ms-creature ms-2x"></i>
|
||||
<i class="ms ms-enchantment ms-2x"></i>
|
||||
<i class="ms ms-instant ms-2x"></i>
|
||||
<i class="ms ms-land ms-2x"></i>
|
||||
<i class="ms ms-planeswalker ms-2x"></i>
|
||||
<i class="ms ms-sorcery ms-2x"></i>
|
||||
|
||||
<i class="ms ms-flashback ms-2x"></i>
|
||||
</p>
|
||||
<h5>Planeswalker symbols</h5>
|
||||
<p>
|
||||
<i class="ms ms-loyalty-up ms-loyalty-3 ms-2x"></i>
|
||||
<i class="ms ms-loyalty-down ms-loyalty-x ms-2x"></i>
|
||||
<i class="ms ms-loyalty-zero ms-loyalty-0 ms-2x"></i>
|
||||
<i class="ms ms-loyalty-start ms-loyalty-4 ms-3x"></i>
|
||||
</p>
|
||||
<h5>Double-faced card symbols</h5>
|
||||
<p>
|
||||
<i class="ms ms-dfc ms-dfc-day"></i>
|
||||
<i class="ms ms-dfc ms-dfc-night"></i>
|
||||
</p>
|
||||
<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="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>
|
||||
</section>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user