diff --git a/.gitignore b/.gitignore index 090a1f0..e43b0f9 100644 --- a/.gitignore +++ b/.gitignore @@ -1,2 +1 @@ -.idea .DS_Store diff --git a/README.md b/README.md index 805c734..e8de493 100644 --- a/README.md +++ b/README.md @@ -1,4 +1,4 @@ -# Mana v0.6 +# Mana v1.0.0 ## The Magic: the Gathering mana symbol font! @@ -36,3 +36,4 @@ Attribution is **greatly appreciated** but not required! * v0.4 - adding classes for 16, 17, 18, 19, and 20 symbols * v0.5 - adding the new colorless wastes symbol * v0.6 - adding double-faced card symbols (day, night) +* v1.0.0 - finally documentation is live! diff --git a/bower.json b/bower.json index 799a3bf..66f629f 100644 --- a/bower.json +++ b/bower.json @@ -1,22 +1,14 @@ { - "name": "mana", + "name": "Mana Documentation", "homepage": "https://github.com/andrewgioia/Mana", - "version": "0.6", "authors": [ "Andrew Gioia " ], - "description": "Magic: the Gathering mana symbol pictographic font", - "main": [ - "css/mana.css" - ], + "description": "Mana documentation and examples website", + "main": "index.html", "moduleType": [], "keywords": [ - "mana", - "mtg", - "mana symbols", - "magic", - "gathering", - "font" + "mana" ], "license": "MIT", "private": true, @@ -25,8 +17,9 @@ "node_modules", "bower_components", "test", - "tests", - ".git", - ".gitignore" - ] + "tests" + ], + "dependencies": { + "mana": "*" + } } diff --git a/bower_components/mana/.bower.json b/bower_components/mana/.bower.json new file mode 100644 index 0000000..78a28fd --- /dev/null +++ b/bower_components/mana/.bower.json @@ -0,0 +1,40 @@ +{ + "name": "mana", + "homepage": "https://github.com/andrewgioia/Mana", + "authors": [ + "Andrew Gioia " + ], + "description": "Magic: the Gathering mana symbol pictographic font", + "main": [ + "css/mana.css" + ], + "moduleType": [], + "keywords": [ + "mana", + "mtg", + "mana symbols", + "magic", + "gathering", + "font" + ], + "license": "MIT", + "private": true, + "ignore": [ + "**/.*", + "node_modules", + "bower_components", + "test", + "tests", + ".git", + ".gitignore" + ], + "_release": "808c5a8cb8", + "_resolution": { + "type": "branch", + "branch": "master", + "commit": "808c5a8cb856b005fae28e93ae554a3e2ef67c2e" + }, + "_source": "https://github.com/andrewgioia/Mana.git", + "_target": "*", + "_originalSource": "mana" +} \ No newline at end of file diff --git a/bower_components/mana/README.md b/bower_components/mana/README.md new file mode 100644 index 0000000..805c734 --- /dev/null +++ b/bower_components/mana/README.md @@ -0,0 +1,38 @@ +# Mana v0.6 + +## The Magic: the Gathering mana symbol font! + +Mana is a complete set of Magic: the Gathering mana, tap, and card type symbols as a pictographic font. You can use this font anywhere you want to display mana and tap symbols—in your MtG app or website, documents, card images, anything! + +## Usage + +Each mana symbol has its own font character. Display them in a manner similar to [Keyrune](http://andrewgioia.github.io/Keyrune) using the `` element and class syntax. Class name codes are based on textual mana symbol codes (like g for Green or 3 for, well, {3}). + +To use Mana, move the web font files to your `/fonts` directory and include the mana.css stylesheet in your ``: + +```html + +``` + +## Editing the Source + +Feel free to edit the source files and compile Mana to fit your needs. Currently LESS is supported, with Sass coming soon. + +## License + +All mana, tap, and card type symbol images are copyright Wizards of the Coast ([http://magicthegathering.com](http://magicthegathering.com)) + +The Mana font is licensed under the the SIL OFL 1.1 ([http://scripts.sil.org/OFL](http://scripts.sil.org/OFL)) + +Mana CSS, LESS, and Sass files are licensed under the MIT License ([http://opensource.org/licenses/mit-license.html](http://opensource.org/licenses/mit-license.html)) + +Attribution is **greatly appreciated** but not required! + +## Changelog + +* v0.1 - initial font creation and CSS/LESS files added +* v0.2 - Flashback symbol added +* v0.3 - phyrexian mana classes use MTGJson standard; project-specific LESS prefix added (@JayGray) +* v0.4 - adding classes for 16, 17, 18, 19, and 20 symbols +* v0.5 - adding the new colorless wastes symbol +* v0.6 - adding double-faced card symbols (day, night) diff --git a/bower_components/mana/bower.json b/bower_components/mana/bower.json new file mode 100644 index 0000000..799a3bf --- /dev/null +++ b/bower_components/mana/bower.json @@ -0,0 +1,32 @@ +{ + "name": "mana", + "homepage": "https://github.com/andrewgioia/Mana", + "version": "0.6", + "authors": [ + "Andrew Gioia " + ], + "description": "Magic: the Gathering mana symbol pictographic font", + "main": [ + "css/mana.css" + ], + "moduleType": [], + "keywords": [ + "mana", + "mtg", + "mana symbols", + "magic", + "gathering", + "font" + ], + "license": "MIT", + "private": true, + "ignore": [ + "**/.*", + "node_modules", + "bower_components", + "test", + "tests", + ".git", + ".gitignore" + ] +} diff --git a/css/mana.css b/bower_components/mana/css/mana.css similarity index 100% rename from css/mana.css rename to bower_components/mana/css/mana.css diff --git a/css/mana.min.css b/bower_components/mana/css/mana.min.css similarity index 100% rename from css/mana.min.css rename to bower_components/mana/css/mana.min.css diff --git a/fonts/mana.eot b/bower_components/mana/fonts/mana.eot similarity index 100% rename from fonts/mana.eot rename to bower_components/mana/fonts/mana.eot diff --git a/fonts/mana.svg b/bower_components/mana/fonts/mana.svg similarity index 100% rename from fonts/mana.svg rename to bower_components/mana/fonts/mana.svg diff --git a/fonts/mana.ttf b/bower_components/mana/fonts/mana.ttf similarity index 100% rename from fonts/mana.ttf rename to bower_components/mana/fonts/mana.ttf diff --git a/fonts/mana.woff b/bower_components/mana/fonts/mana.woff similarity index 100% rename from fonts/mana.woff rename to bower_components/mana/fonts/mana.woff diff --git a/fonts/mana.woff2 b/bower_components/mana/fonts/mana.woff2 similarity index 100% rename from fonts/mana.woff2 rename to bower_components/mana/fonts/mana.woff2 diff --git a/fonts/mplantin.eot b/bower_components/mana/fonts/mplantin.eot similarity index 100% rename from fonts/mplantin.eot rename to bower_components/mana/fonts/mplantin.eot diff --git a/fonts/mplantin.svg b/bower_components/mana/fonts/mplantin.svg similarity index 100% rename from fonts/mplantin.svg rename to bower_components/mana/fonts/mplantin.svg diff --git a/fonts/mplantin.ttf b/bower_components/mana/fonts/mplantin.ttf similarity index 100% rename from fonts/mplantin.ttf rename to bower_components/mana/fonts/mplantin.ttf diff --git a/fonts/mplantin.woff b/bower_components/mana/fonts/mplantin.woff similarity index 100% rename from fonts/mplantin.woff rename to bower_components/mana/fonts/mplantin.woff diff --git a/bower_components/mana/index.html b/bower_components/mana/index.html new file mode 100644 index 0000000..af3c5ec --- /dev/null +++ b/bower_components/mana/index.html @@ -0,0 +1,159 @@ + + + + + + Mana + + + + + +

Mana

+

MTG Mana Symbol Demos

+

+ This HTML file is for demo purposes and is not necessary for Mana installation or use. + You can view all of the mana symbol font icons and the available examples below (casting cost background and increased sizes). +

+

Regular mana symbols

+

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

+

Phyrexian, snow, colorless, and split symbols

+

+ + + + + + + +
+ + + + + + + + + + + + + + + +

+

Tap and roll symbols

+

+ + + + +

+

2x size (3-6x also included)

+

+ + + + + +

+

Half mana symbols

+

+ + + + + +

+

Un-set mana symbols

+

+ + + + +

+

Future Sight type symbols

+

+ + + + + + + +    + +

+

Planeswalker symbols

+

+ + + + +

+

Double-faced card symbols

+

+ + +

+ + + diff --git a/less/core.less b/bower_components/mana/less/core.less similarity index 100% rename from less/core.less rename to bower_components/mana/less/core.less diff --git a/less/cost.less b/bower_components/mana/less/cost.less similarity index 100% rename from less/cost.less rename to bower_components/mana/less/cost.less diff --git a/less/dfc.less b/bower_components/mana/less/dfc.less similarity index 100% rename from less/dfc.less rename to bower_components/mana/less/dfc.less diff --git a/less/icons.less b/bower_components/mana/less/icons.less similarity index 100% rename from less/icons.less rename to bower_components/mana/less/icons.less diff --git a/less/loyalty.less b/bower_components/mana/less/loyalty.less similarity index 100% rename from less/loyalty.less rename to bower_components/mana/less/loyalty.less diff --git a/less/mana.less b/bower_components/mana/less/mana.less similarity index 100% rename from less/mana.less rename to bower_components/mana/less/mana.less diff --git a/less/path.less b/bower_components/mana/less/path.less similarity index 100% rename from less/path.less rename to bower_components/mana/less/path.less diff --git a/less/sizes.less b/bower_components/mana/less/sizes.less similarity index 100% rename from less/sizes.less rename to bower_components/mana/less/sizes.less diff --git a/less/variables.less b/bower_components/mana/less/variables.less similarity index 100% rename from less/variables.less rename to bower_components/mana/less/variables.less diff --git a/cheatsheet.html b/cheatsheet.html new file mode 100644 index 0000000..dee81c1 --- /dev/null +++ b/cheatsheet.html @@ -0,0 +1,138 @@ + + + + Icon Cheatsheet | Mana + + + + + + + + +
+
+

Mana & Card Icons

+ + + Download + +

Complete set of Magic mana and card symbol font icons

+
+
+ +
+
+
+

+ 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. +

+
+
+

Icons, CSS Class, and Unicode

+
+ ms-w  + ms-u  + ms-b  + ms-r  + ms-g  + ms-c  + ms-0  + ms-1  + ms-2  + ms-3  + ms-4  + ms-5  + ms-6  + ms-7  + ms-8  + ms-9  + ms-10  + ms-11  + ms-12  + ms-13  + ms-14  + ms-15  + ms-16  + ms-17  + ms-18  + ms-19  + ms-20  + ms-x  + ms-y  + ms-z  + ms-p  + ms-s  +
+
+
+ ms-tap  + ms-untap  + ms-tap-alt  + ms-chaos  + ms-1-2  + ms-infinity  + ms-s  +
+
+
+ ms-100  + ms-100000  +
+
+
+ ms-artifact  + ms-creature  + ms-enchantment  + ms-instant  + ms-land  + ms-planeswalker  + ms-sorcery  + ms-loyalty-up  + ms-loyalty-down  + ms-loyalty-zero  + ms-loyalty-start  + ms-flashback  + ms-dfc-night  + ms-dfc-day  +
+
+
+
+ + + + + diff --git a/css/main.css b/css/main.css new file mode 100644 index 0000000..c6327c9 --- /dev/null +++ b/css/main.css @@ -0,0 +1,338 @@ +@font-face { + font-family: 'Beleren'; + src: url( '../fonts/beleren.eot' ); + src: url( '../fonts/beleren.woff' ) format( 'woff' ), + url( '../fonts/beleren.ttf' ) format( 'truetype' ), + url( '../fonts/beleren.svg' ) format( 'svg' ); + font-weight: normal; + font-style: normal; + } + +body { + background: #fff; + color: #333; + font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", + Geneva, "Helvetica Neue", Helvetica, Arial, sans-serif; + font-size: 15px; + margin: 0; + padding: 0; +} + +.wrapper { + max-width: 1080px; + width: 80%; + margin: 0 auto; +} + +a { + color: #007185; + text-decoration: none; + } + + a:hover { + color: #263D41; + } + +section#banner { + background: #b6c1b0; + color: #555; + padding: 12px 0; + text-align: right; + text-shadow: 0 1px 0 #bacec2; +} + + section#banner .item { + display: inline-block; + margin-left: 15px; + } + + section#banner .logo { + color: #333; + float: left; + font-family: Beleren; + font-size: 18px; + margin-top: -2px; + } + +header { + background: #d3d8c1; + border-bottom: 1px solid #adb7a7; + color: #333; + margin: 0; + overflow-y: hidden; + padding: 25px 0 15px; +} + + header.main { + height: 272px; + } + + .bigicon { + float: right; + font-size: 364px; + line-height: 200px; + margin-top: -40px; + text-shadow: 0 2px 0 #fff; + } + + header .vs { + margin-left: 5px; + } + +p { + font-size: 16px; + line-height: 1.6em; + margin: 20px 0; +} + + section.icons p { + margin-left: 25px; + } + +ul { + margin: 0; +} + +li { + margin: 0 0 10px; +} + +h1 { + color: #444; + margin: 0; + font-family: Beleren; + font-size: 64px; + font-weight: lighter; + padding: 0 0 20px; + text-shadow: 0 1px 0 #fff; +} + + h1.sub { + font-size: 48px; + padding: 0 0 15px; + } + +h2 { + color: #444; + font-family: Beleren; + font-size: 30px; + font-weight: lighter; + margin: 0; + padding: 0 0 30px; + text-shadow: 0 1px 0 #fff; +} + + h2.sub { + font-size: 26px; + padding: 0 0 20px; + } + +h3 { + color: #444; + font-size: 19px; + font-weight: normal; + line-height: 1.6em; + padding-bottom: 20px; + text-align: left; +} + +h4 { + color: #61605B; + font-family: Beleren; + font-size: 24px; + font-weight: lighter; + margin: 15px 0 5px; + text-align: left; +} + +h5 { + color: #555; + font-size: 17px; + font-weight: normal; + margin: 25px 0 -5px; + padding: 0; +} + +main { + margin: 0; + padding: 20px 0 25px; +} + + main section.content { + padding: 0 0 10px; + } + +blockquote, +code { + font-family: Inconsolate, 'Courier New', Courier, monospace; +} + +code { + background: #F7EEF1; + color: #BB073B; + padding: 1px 3px; + border-radius: 2px; +} + +blockquote { + background: #eee; + border-bottom: 1px solid #d3d8c1; + line-height: 1.4em; + padding: 20px 20px 18px; + margin: 20px 0 25px; + border-radius: 4px; +} + +.button { + background: #008eae; + border-bottom: 2px solid #166075; + color: #fff; + display: inline-block; + font-size: 20px; + padding: 10px 18px 9px; + border-radius: 4px; + text-shadow: 0 1px 0 #333; +} + + .button:hover { + background: #00809F; + border-bottom-color: #155A6E; + color: #fff; + } + + .button .ss { + margin-right: 5px; + position: relative; + top: -2px; + } + + .button.vs { + background: #666; + border-bottom-color: #333; + } + + .button.vs:hover { + background: #555; + border-bottom-color: #222; + } + + .button.dl.float-right { + margin-top: -10px; + } + +.icons { + padding: 10px 0 5px; +} + +.icon { + border-radius: 3px; + display: inline-block; + overflow: hidden; + width: 24.5%; +} + + .icon span { + display: inline-block; + padding: 9px 10px; + white-space: nowrap; + } + + .icon:hover { + background: #eee; + position: relative; + margin-top: -4px; + margin-bottom: -5px; + } + + .icon .ss { + font-size: 22px; + margin-right: 5px; + margin-top: -2px; + text-align: right; + width: 32px; + } + + .icon:hover .ss { + font-size: 32px; + text-shadow: 0 1px 0 #fff; + } + + .icon em { + color: #999; + font-size: 13px; + font-style: normal; + } + +.vectors { + padding: 10px 0 0; +} + +.utf { + display: inline-block; + width: 25%; + float: left; + padding: 6px 0; +} + + .utf.long { + width: 33%; + } + + .utf i { + display: inline-block; + font-family: mana; + font-style: normal; + font-size: 1.25em; + vertical-align: top; + padding: 0 5px 0 0; + text-align: center; + width: 1.25em; + } + + .utf i.long { + text-align: left; + width: auto; + } + + .utf code { + background-color: #f5f5f5; + color: #555; + margin-left: 3px; + } + +.example { + font-size: 16px; + padding: 15px 0 0; + width: 200px; +} + + .example .each { + display: block; + padding-bottom: 2px; + } + +.explanation { + margin-left: 200px; +} + +footer { + border-top: 1px solid #eee; + margin-top: 20px; + padding: 10px 0 30px; +} + +.float-left { + float: left; +} + +.float-right { + float: right; +} + +.clear { + clear: both; +} + +.e { color: #63A35C; } +.a { color: #795DA3; } +.v { color: #183691; } diff --git a/fonts/beleren.eot b/fonts/beleren.eot new file mode 100644 index 0000000..11f41cc Binary files /dev/null and b/fonts/beleren.eot differ diff --git a/fonts/beleren.otf b/fonts/beleren.otf new file mode 100644 index 0000000..d4105a2 Binary files /dev/null and b/fonts/beleren.otf differ diff --git a/fonts/beleren.svg b/fonts/beleren.svg new file mode 100644 index 0000000..84c1bb5 --- /dev/null +++ b/fonts/beleren.svg @@ -0,0 +1,3634 @@ + + + + +Created by FontForge 20090914 at Wed Mar 11 16:33:40 2015 + By www-data +Copyright (c) 2013 Wizards of the Coast, a Hasbro Subsidiary. All rights reserved. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/fonts/beleren.ttf b/fonts/beleren.ttf new file mode 100644 index 0000000..7dd1bff Binary files /dev/null and b/fonts/beleren.ttf differ diff --git a/fonts/beleren.woff b/fonts/beleren.woff new file mode 100644 index 0000000..e2f1f32 Binary files /dev/null and b/fonts/beleren.woff differ diff --git a/icons.html b/icons.html new file mode 100644 index 0000000..3acbca6 --- /dev/null +++ b/icons.html @@ -0,0 +1,183 @@ + + + + Mana Icons | Mana + + + + + + + + +
+
+

Mana & Card Icons

+ + + Download + +

Complete set of Magic mana and card symbol font icons

+
+
+ +
+
+
+

+ 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 Cheatsheet. +

+
+
+

Mana Symbols

+
Raw Symbols
+

+ + + + + + +

+
Mana Costs
+

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

+
Phyrexian, snow, and split symbols
+

+ + + + + + + +
+ + + + + + + + + + + + + + + +

+
Half mana symbols
+

+ + + + + +

+
Un-set mana symbols
+

+ + + + +

+

Card Symbols

+
Tap and roll symbols
+

+ + + + +

+
Future Sight type symbols
+

+ + + + + + + +    + +

+
Planeswalker symbols
+

+ + + + +

+
Double-faced card symbols
+

+ + +

+
+
+
+ + + + + diff --git a/index.html b/index.html index af3c5ec..55488fa 100644 --- a/index.html +++ b/index.html @@ -3,157 +3,101 @@ - Mana - + Mana | Andrew Gioia + + - -

Mana

-

MTG Mana Symbol Demos

-

- This HTML file is for demo purposes and is not necessary for Mana installation or use. - You can view all of the mana symbol font icons and the available examples below (casting cost background and increased sizes). -

-

Regular mana symbols

-

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

-

Phyrexian, snow, colorless, and split symbols

-

- - - - - - - -
- - - - - - - - - - - - - - - -

-

Tap and roll symbols

-

- - - - -

-

2x size (3-6x also included)

-

- - - - - -

-

Half mana symbols

-

- - - - - -

-

Un-set mana symbols

-

- - - - -

-

Future Sight type symbols

-

- - - - - - - -    - -

-

Planeswalker symbols

-

- - - - -

-

Double-faced card symbols

-

- - -

+ + + +
+
+
+ +
+

Mana

+

Magic: the Gathering card symbol font

+
+ + + Download + + + + View Mana Icons + +
+

+ Current version 1.0.0 includes all known mana and card icons. +

+
+
+ +
+
+
+

Mana is a complete set of scalable vector icons for Magic mana (and other card) symbols. Drop them into your application, website, or custom cards (like this ) and control their size, color, drop shadow, or any dimension just as you would with text!

+
+
+

Using Mana

+

Each mana/card symbol has its own font character. Display them in a manner similar to Font Awesome using the <i class="ms ..."></i> element. There are class names for each mana color (w, u, b, r, g, c) and for the various symbols that appear on cards (like tap). See the full list of available symbols.

+

To use Mana, move the font files to your /fonts directory and include the mana.css stylesheet in your <head>:

+
+ <link href="css/mana.css" rel="stylesheet" type="text/css" /> +
+

Insert set symbol icons by using the .ms class and then the mana/symbol code class(es), such as .ms-u for blue mana:

+
+ <i class="ms ms-u"></i> +
+
+
+

Editing the Source

+

Feel free to edit the source files and compile Mana to fit your needs. All SVG glyphs are compiled into font files using the wonderful IcoMoon app. For styling, currently LESS is supported with Sass coming soon.

+
+
+

License

+

Please review the following licenses for each component of Mana:

+ +

Attribution is greatly appreciated but not required!

+
+
+
+ +