<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 <iclass="ss ss-tmp"></i>) and control their size, color, drop shadow, or any dimension just as you would with text!</h3>
</section>
<sectionclass="content">
<h4>Using Keyrune in your project</h4>
<p>Keyrune is CSS and font package you can use in your project to easily display MTG set symbols as font icons. You can download the source and manually include it in your application, or include it via Bower or NPM (project name "keyrune" for both).</p>
<p>Each set symbol has its own font character. Display them in a manner similar to <ahref="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 <ahref="http://mtgjson.com">MTG JSON</a>.</p>
<h5>Including Keyrune in your project</h5>
<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>
<p><strong>New!</strong> You can also now use Keyrune via CDN thanks to the amazing <ahref="https://jsdelivr.com">jsDelivr</a> project! Include the latest version, reference:</p>
<p><strong>Note:</strong> as of v3.1.1 (June 2017) the URL structure at jsDelivr changed to the above. Also, you do not need to explicitly include the font-family via @font-face, but if you still would like to here is the css ruleset:</p><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: <iclass="ss ss-mor"></i></p>
<p>You can also install Keyrune just like you would with any font, for use in desktop applications like Word, Pages, or Illustrator. This can be useful if you're designing and printing binder covers or set dividers.</p>
<p><strong>Note:</strong> For those unfamiliar with CSS projects like this, none of the styling in the documentation will be available when using Keyrune in a desktop app—you have to style everything manually like you would with any other font or "Word Art", for instance.</p>
<p>Follow these steps to work with Keyrune on your desktop:</p>
<ol>
<li><strong>Install the Keyrune font.</strong> To do this, click the "Download" button above, unzip the archive that downloads, then navigate to Keyrune-master/fonts. Double click on <strong>keyrune.ttf</strong> and install it.</li>
<li><strong>Open up your desktop application.</strong> Check to see that "Keyrune" shows up in your list of available fonts.</li>
<li><strong>Go to the <ahref="cheatsheet.html">Cheatsheet</a>.</strong> Copy the symbol that you want to use and then paste it into the application you're using. You should see it show up correctly in there, with the font "Keyrune" active. You can't "type" this font like you would with any other (like Times New Roman), as it uses a reserved character set; you can only copy and paste from the Cheatsheet.</li>
<li><strong>Style the symbol however you want.</strong> Unfortunately you're going to have to do this manually :( I've created a <ahref="https://www.dropbox.com/s/gp45uuuejfy089n/Keyrune_desktop_example.docx?dl=1">sample Word document</a> that you can use as a reference with rare Urza's Saga, mythic Morningtide, and uncommon Mercadian Masques symbols as examples. In that doc, each symbol has a 2.5pt black border (on 144pt font) and a gradient applied to each one for their rarities.</li>
</ol>
<p>Every time new set symbols are added to Keyrune you need to reinstall the keyrune.ttf. If you don't see the updated glyphs, try uninstalling the font first and then installing it.</p>
<p>Feel free to use the font and symbols however you like in your project, subject to the license terms below.</p>
</section>
<sectionclass="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 <ahref="http://icomoon.io">IcoMoon</a> app. For styling, currently LESS is supported with Sass coming soon.</p>
</section>
<sectionclass="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 (<ahref="http://magicthegathering.com">http://magicthegathering.com</a>)</li>
<li>The Keyrune font is licensed under the the SIL OFL 1.1 (<ahref="http://scripts.sil.org/OFL">http://scripts.sil.org/OFL</a>)</li>
<li>Keyrune CSS, LESS, Sass, and other project files are licensed under the GPL 3.0 License at (<ahref="https://opensource.org/licenses/GPL-3.0">https://opensource.org/licenses/GPL-3.0</a>)</li>
</ul>
<p>Attribution is <strong>greatly appreciated</strong> but not required!</p>
</section>
</div>
</main>
<footer>
<divclass="wrapper">
<divclass="float-left">
<p>Made with ♥ by <ahref="http://andrewgioia.com">Andrew Gioia</a></p>
