Micon, The iconic windows 10 font and CSS toolkit.
Switch branches/tags
Clone or download
Latest commit 06a2d00 Jul 10, 2017
Permalink
Failed to load latest commit information.
.templates Version 2.2.155 Jan 5, 2017
dist Version 2.2.155 Jan 5, 2017
icons edits Dec 24, 2016
.gitignore Version 2.0.155 (23/12/2016) Dec 23, 2016
.travis.yml fix travis Dec 23, 2016
LICENSE Update LICENSE Jan 14, 2017
README.md add microsoft pull Jul 10, 2017
bower.json some fix and update Jan 11, 2017
gulpfile.js Version 2.2.155 Jan 5, 2017
name_db.json Version 2.0.155 (23/12/2016) Dec 23, 2016
package.json Update package.json Jan 14, 2017

README.md

Micon Build Status

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