Feather Font

This is a iconfont version of Feather. Thanks to colebemis for the great work!

Feather is a collection of simply beautiful open source icons. Each icon is designed on a 24x24 grid with an emphasis on simplicity, consistency and readability.

feathericons.com

Feather font is icon font for websites, apps. It gives you scalable vector icons that can instantly be customized -- size, color, drop shadow, and anything that can be done with the power of CSS.

Font-class is one kind of derived usage of Unicode, which solved the problems of intuitive writing and semantic ambiguity

Compared with Unicode, its characteristics as following:

• Good compatibility, it supports IE 8+ and all usual browsers.
• When you want to change one icon, you just need to alter the quote of Unicode in class, because it define icons by "class".
• But its one kind of font essentially, it can not support multi-color icon as well.

1. Define the Feather font

@font-face {
 font-family: "feather";
 src: url('iconfont.eot?t=1501834582692'); /* IE9*/
 src: url('iconfont.eot?t=1501834582692#iefix') format('embedded-opentype'), /* IE6-IE8 */
 url('iconfont.woff?t=1501834582692') format('woff'), /* chrome, firefox */
 url('iconfont.ttf?t=1501834582692') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
 url('iconfont.svg?t=1501834582692#feather') format('svg'); /* iOS 4.1- */
}

2. Define the style of iconfont usage

.icon {
 /* use !important to prevent issues with browser extensions that change fonts */
 font-family: 'feather' !important;
 speak: none;
 font-style: normal;
 font-weight: normal;
 font-variant: normal;
 text-transform: none;
 line-height: 1;
 /* Better Font Rendering =========== */
 -webkit-font-smoothing: antialiased;
 -moz-osx-font-smoothing: grayscale;
}

3. Copy the individual code of icon into pages.

<i class="icon icon-xxx"></i>

If you intend to use Feather Font with a CDN, you can load the css from a CDN provider.

<link rel="stylesheet" type="text/css" href="//at.alicdn.com/t/font_o5hd5vvqpoqiwwmi.css">

And then use the feather and icon-xxx class

<i class="feather icon-xxx></i>

the name of icon-xxx, you can check the document above.

Sketch document in src/feather.sketch