<!doctype html> <html> <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="chrome=1" /> <title>Keyrune | Andrew Gioia</title> <link rel="stylesheet" href="bower_components/keyrune/css/keyrune.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">Set Icons</a> <a href="examples.html" class="item">Examples</a> <a href="http://github.com/andrewgioia/Keyrune" class="item">GitHub Project</a> <span class="item"> <iframe src="https://ghbtns.com/github-btn.html?user=andrewgioia&repo=keyrune&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"> <div class="bigicon"> <i class="ss ss-leg"></i> </div> <h1>Keyrune</h1> <h2>Magic: the Gathering set symbol font</h2> <div class="actions"> <a class="dl button" href="https://github.com/andrewgioia/Keyrune/archive/master.zip"> <i class="ss ss-pmtg2"></i> Download </a> <a class="vs button" href="icons.html"> <i class="ss ss-mmq"></i> View Set Icons </a> </div> <p> Current version 1.4.2 includes all sets to Commander 2015. </p> </div> </header> <main> <div class="wrapper"> <section> <h3><strong>Keyrune is a complete set of scalable vector icons for Magic set symbols.</strong> Drop them into your application, website, or custom cards (like this <i class="ss ss-tmp"></i>) and control their size, color, drop shadow, or any dimension just as you would with text!</h3> </section> <section class="content"> <h4>Using Keyrune</h4> <p>Each set symbol has its own font character. Display them in a manner similar to <a href="http://fontawesome.io">Font Awesome</a> using the <code><i class="ss ss-exp"></i></code> element. Class name codes are based on the expansion codes from <a href="http://mtgjson.com">MTG JSON</a>.</p> <p>To use Keyrune, move the font files to your /fonts directory and include the <code>keyrune.css</code> stylesheet in your <code><head></code>:</p> <blockquote> <<span class="e">link</span> <span class="a">href</span>=<span class="v">"css/keyrune.css"</span> <span class="a">rel</span>=<span class="v">"stylesheet"</span> <span class="a">type</span>=<span class="v">"text/css"</span> /> </blockquote> <p>Insert set symbol icons by using the <code>.ss</code> class and then the set code class, such as <code>.ss-mor</code> for Morningtide: <i class="ss ss-mor"></i></p> <blockquote> <<span class="e">i</span> <span class="a">class</span>=<span class="v">"ss ss-mor"</span>></<span class="e">i</span>> </blockquote> </section> <section class="content"> <h4>Editing the Source</h4> <p>Feel free to edit the source files and compile Keyrune to fit your needs. All SVG glyphs are compiled into font files using the wonderful <a href="http://icomoon.io">IcoMoon</a> app. For styling, currently LESS is supported with Sass coming soon.</p> </section> <section class="content"> <h4>License</h4> <p>Please review the following licenses for each component of Keyrune:</p> <ul> <li>All set symbol images are copyright Wizards of the Coast (<a href="http://magicthegathering.com">http://magicthegathering.com</a>)</li> <li>The Keyrune font is licensed under the the SIL OFL 1.1 (<a href="http://scripts.sil.org/OFL">http://scripts.sil.org/OFL</a>)</li> <li>Keyrune CSS, LESS, and Sass files are licensed under the MIT License (<a href="http://opensource.org/licenses/mit-license.html">http://opensource.org/licenses/mit-license.html</a>)</li> </ul> <p>Attribution is <strong>greatly appreciated</strong> but not required!</p> </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 set images © <a href="http://magicthegathering.com">Wizards of the Coast</a><br /> The Keyrune font is licensed under the the <a href="http://scripts.sil.org/OFL">SIL OFL 1.1</a><br /> Keyrune 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>