Micon

Micon (MDL2 Icons), The iconic windows 10 font and CSS toolkit.
this icon exracted as segmdl2.ttf in windows 10 and converted too css toolkit based on Font Awesome. Micon icons that can instantly be customized -- size, color, drop shadow, and anything that can be done with the power of CSS.

Online Demo and Documents: http://xtoolkit.github.io/Micon/ (Because i am very busy, online Documents not updated for bower and building)

sry for my bad english

Installation

Quick option: use cdn

You can use cdn. hosted by github page and clouded by Cloudflare example:

<head>
...
<link rel="stylesheet" href="http://cdn.arshen.ir/micon/2.2.155/dist/micon/css/micon.min.css">
...
</head>

Option one: install with bower

To install via Bower, simply do the following:

$ bower install micon --save

Option two: Download repo or builded font

Download last Micon version release from Github

Get started

1- Copy the entire micon-repo/dist/micon/ directory into your project. if you do not use webbrand icon in font use micon-repo/dist/micon_nb/

2- In the <head> of your html, reference the location to your micon.min.css.
example:

<head>
...
<link rel="stylesheet" href="micon-repo/dist/micon/css/micon.min.css">
...
</head>

use icons in html

example:

<i class="mi mi-Home"></i>
OR
<i class="mi">&#xEB6F;</i>

Build Instructions (for make custom font)

This repo already comes with all the files built and ready to go, but can also build the fonts from the source. Requires nodeJs.

Follow these steps to build custom font:

1- install requires Dependencies (gulp, gulp-consolidate, gulp-iconfont, gulp-rename, loadash) with down command.

$ npm install

2- customize your icons from /icons/.
if add new icon, insert icon name in name_db.json.
example:

{
    ...,
    "svgfilename": [
        "svgfilename",
        "aliasname1",
        "aliasname2",
        ...
    ]
}

3- config gulpfile.js for your fontname, fontversion and etc.

4- customize your scss, less and css template in .templates/. (default use Font-Awesome template Edited by Micon)

5- build your font with down command

$ npm start

6- end, you can see demo your font in /dist/your_fontname/html-demo-your_fontname.html

Page Build Instructions (for make custom your font page)

you can build custom your font page (like Micon github page) with this Instructions

Versioning

Micon will be maintained under the Semantic Versioning guidelines as much as possible. Releases will be numbered with the following format:

<major>.<minor>.<fpatch>

And constructed with the following guidelines:

major -> Breaking backward compatibility bumps the major
minor -> Bug fixes, New additions
fpatch -> Version of segmdl2.ttf

For more information on SemVer, please visit http://semver.org.

Next version

Next Micon font version release, when RedSton2 font version release.

now RedSton2 released! but i'm waiting for release official name for new icons from Microsoft. (issues)

Change Logs

Version 2.2.155 (05/01/2017)

fix #13 issues
fix less compile problem
add sourcemap for micon and micon_nb

Version 2.1.155 (29/12/2016)

support bower
add scss and less template
move templates to .templates
fix style.css problem

Version 2.0.155 (23/12/2016)

add GulpJs for build Micon or Easy create custom font fork Micon icons
add webBrand icons
add woff2 and otf standard font
add html-demo-micon.html for simple portable view icons.
update style template
fix alias name problem
fix some font view probrom (etc height of icons)

Version 1.0.155 (16/08/2016)

update icons version => 155 (RedStone)
rename icons name with official MDL2 icons name
remove woff2 and otf font
fixed icon animation problem
fixed icon height problem
create Change logs page

Version 0.9.136 (12/09/2015)

initial build
remove duplicate svg path and use css alias

License

Micon is licensed under the MIT license.

Contact

E-mail: arshen@outlook.com
Telegram: @Arshen

UpperLEFTY / Micon