All Projects → andrewgioia → Mana

andrewgioia / Mana

Magic: the Gathering mana symbol pictographic font

Labels

Projects that are alternatives of or similar to Mana

Halo Theme Xue
追求个性与至简
Stars: ✭ 139 (-24.04%)
Mutual labels:  less
Webpack Encore
A simple but powerful API for processing & compiling assets built around Webpack
Stars: ✭ 1,975 (+979.23%)
Mutual labels:  less
Website
IPFS project website
Stars: ✭ 173 (-5.46%)
Mutual labels:  less
Hexo Theme Concise
Hexo 简约主题,响应式设计支持 PC、平板、手机等设备,代码高亮使用 monokai-sublime 风格,支持亮/暗色主题跟随系统。可以最低兼容到 IE8。
Stars: ✭ 146 (-20.22%)
Mutual labels:  less
Reactql
Universal React+GraphQL starter kit: React 16, Apollo 2, MobX, Emotion, Webpack 4, GraphQL Code Generator, React Router 4, PostCSS, SSR
Stars: ✭ 1,833 (+901.64%)
Mutual labels:  less
Biosyntax
Syntax highlighting for computational biology
Stars: ✭ 164 (-10.38%)
Mutual labels:  less
Gridea Theme Pure
一款专为 Gridea 设计的主题 - 简约、漂亮。
Stars: ✭ 137 (-25.14%)
Mutual labels:  less
Web Study
本仓库是自己总结的前端开发一些基础知识,包括html5,css3, canvas, jQuery, less ,ES6, webpack,Vue等,也包含了一些算法和数据结构方面的练习,同时也记录了自己工作中的踩坑总结,适合想要学习前端开发的伙伴,你可以clone项目到本地,然后一步一步跟着我的demo敲,希望大家都能全栈。
Stars: ✭ 176 (-3.83%)
Mutual labels:  less
Mailspring Theme Starter
A starting point for creating your own custom Mailspring themes!
Stars: ✭ 152 (-16.94%)
Mutual labels:  less
Compile Hero
🔰Visual Studio Code Extension For Compiling Language
Stars: ✭ 169 (-7.65%)
Mutual labels:  less
React Admin
🎉 A magical react admin
Stars: ✭ 149 (-18.58%)
Mutual labels:  less
Kirby Webpack
💪 A Kirby CMS starter-kit with modern frontend tools
Stars: ✭ 150 (-18.03%)
Mutual labels:  less
Spring Petclinic Reactjs
ReactJS (with TypeScript) and Spring Boot version of the Spring Petclinic sample application
Stars: ✭ 165 (-9.84%)
Mutual labels:  less
Peep
The CLI text viewer tool that works like less command on small pane within the terminal window.
Stars: ✭ 139 (-24.04%)
Mutual labels:  less
Memos
React+React-router+redux+redux-thunk+less+es6实现的简易备忘录,在线demo地址:
Stars: ✭ 174 (-4.92%)
Mutual labels:  less
Fossasia.org
FOSSASIA Website https://fossasia.org
Stars: ✭ 1,821 (+895.08%)
Mutual labels:  less
Web
Mirror of git://ffmpeg.org/ffmpeg-web
Stars: ✭ 155 (-15.3%)
Mutual labels:  less
Lessormore
Jekyll theme.
Stars: ✭ 181 (-1.09%)
Mutual labels:  less
Valine Docs
Documentations for Valine
Stars: ✭ 175 (-4.37%)
Mutual labels:  less
Pipeline Stage View Plugin
Visualizes Jenkins pipelines
Stars: ✭ 167 (-8.74%)
Mutual labels:  less

Mana v1.10.0

The Magic: the Gathering mana symbol font!

View the documentation site to see Mana in action!

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!

Installation

The easiest way to get Mana into your project is to use the NPM package:

$> npm install mana-font

Bower is still supported but given their notice to migrate away from it I recommend NPM if you're using a package manager. This project is registered as 'mana-font' with NPM and mana with Bower. Just install using the above commands in your project and you can edit anything as needed.

You can also download the zip file here at Github and use the font files and CSS files in your project as needed.

Using Mana in your project

Each mana symbol has its own font character. Display them in a manner similar to any icon font, like Keyrune, using the <i class="ms ms-g"></i> 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.min.css stylesheet in your <head>:

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

You can also include Mana via CDN thanks to the amazing jsDelivr project! To include the latest version, reference:

<link href="//cdn.jsdelivr.net/npm/[email protected]/css/mana.min.css" rel="stylesheet" type="text/css" />

Replace mana.min.css with mana.css for the unminified version, if you need that.

Editing the source

You can edit the Sass or Less source files and compile Mana to fit your needs, add custom classes, or extend it in your project.

The mana.svg font file contains every glyph used in Mana. If you'd like to completely decompile it, you can view the SVG coordinates in any text editor or upload it to an SVG font editor like IcoMoon (which I use for Mana and Keyrune) or Birdfont.

To add new icons, I recommend first creating a project in IcoMoon and uploading Mana into it. Draw any new glyphs in a vector/SVG editor of your choice export them as SVGs. Then upload each individual glyphs to your IcoMoon project and generate the font files when you're ready. You can add them to your project the same way you would with Mana (putting the font files in a /fonts directory and referencing them in your CSS file with an @font-face declaration).

Using Mana in desktop software

If you'd like to use Mana as a desktop font (e.g., in a Word document) there are a few steps and things to know. First, to get it loaded on your system just download the latest zip file, extract it, and navigate to mana-master\fonts. In there, install the mana.ttf font (typically by double clicking it).

Mana uses private use characters for the font glyphs so you unfortunately can't normally "type" anything in Word to see the symbols. To do so, open up the Mana Cheatsheet and copy the symbol you want, then paste it into Word (or whatever software you're using).

License

All mana, tap, and card type symbol images are copyright Wizards of the Coast (http://magicthegathering.com)

The Mana font is licensed under the the SIL OFL 1.1 (http://scripts.sil.org/OFL)

Mana CSS, LESS, and Sass files are licensed under the MIT License (http://opensource.org/licenses/mit-license.html)

Attribution is greatly appreciated but not required!

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].