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
You can use cdn. hosted by github page and clouded by Cloudflare example:
<head>
...
<link rel="stylesheet" href="http://cdn.arshen.ir/micon/3.0.168/dist/micon/css/micon.min.css">
...
</head>To install via Bower, simply do the following:
$ bower install micon --save
Download last Micon version release from Github
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>example:
<i class="mi mi-Home"></i>
OR
<i class="mi"></i>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, mustache) with down command.
$ npm install
2- customize your icons from /icons/.
if add new icon, insert icon name in db.json.
example:
{
...,
"svgfilename": {
"info": {
"created": "1.0.155" //font-version
},
"alias": [
"aliasname1",
"aliasname2"
]
}
}3- customize config.json for your font.
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
you can build custom your font page (like Micon github page) with this Instructions
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.
We are thinking of supporting react and vuejs
- update mdl2 icons version => 168 (October 2018)
- 350 new icon (35 icon untitled)
- svg icons get larger
- update webbrand icons (268 new icon)
- remove classic create font css
- use scss compiler for create font css
- remove sourcemap by default
- change lodash with mustache
- update scss and less template to Font-Awesome 5.6.3
- rename fontname.(scss|less) file to style.(scss|less)
- move font config from gulpfile.js to config.json file in root
- icons name db file move to icons pack directory (db.json)
- rewrite gulpfile.js
- fix #13 issues
- fix less compile problem
- add sourcemap for micon and micon_nb
- support bower
- add scss and less template
- move templates to .templates
- fix style.css problem
- 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)
- 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
- initial build
- remove duplicate svg path and use css alias
Micon is licensed under the MIT license.
E-mail: [email protected]
Telegram: @Arshen