Feather Font

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

What is Feather?

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

What is Feather Font?

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.

Quote as Font-class

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.

Usage

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- */
}

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;
}

Copy the individual code of icon into pages.

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

Use CDN

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

Sketch document in src/feather.sketch

AT-UI/feather-font