IcoMoon App Provides Pixel Perfect Icon Solutions

Why IcoMoon App?

Background

Cases differ much when different web project manage its icons, which are small, simple but of great amount. In one case, for responsive web project, similar images of different sizes and of different kinds of status, such as active, hover or focused will be saved. To manage these images is really a fussy work.
每一个网站项目管理自己图标的方式都不一样。在支持响应式的网站项目中，我们可能会看到如下图的图片管理方式，相同的图标会保存多种规格、颜色，于是需要保存四个图像文件。在很普通的网站中，这种小图标一般会有十几个，那么，采用这种方式保存图标就显得很繁琐。

What's IcoMoon App?

It's a web application to get free vector icons, generate icon font, etc. Not only can It help you manage icons, it make an icon image more editable:
它是一个网络应用，你可以从中获得矢量图标，生成图标字体文件等等。它不仅可以帮你管理图标，还可以使你的图标变得可编辑：

All icons are in a font file.
所有的图标都在一个文件中。
You can treat the icons as character, which means you can change an icon's size, color, gradient and so on.
你可以像对待字符一样对待图标，你可以改变它的大小，颜色，渐变等等。
A large amount of high-quality icons provided for you.
它提供了大量的高质量图标，几乎可以满足一般网站的图标需求。

Get Started

open icoMoon App
打开 icoMoon App
search icons that you want, or you can import icons from your local PC.
查找你想要的图标，或者从你的电脑中引入（在需要将你自己设计的图标放入字体文件时非常好用）
simple change on each icon
对每一个icon作简单的更改（方向，缩放等等）
Generate Font, you can change the icon name and reference code, it's important. Then download
生成字体文件，你可以更改图标的引入名称。然后下载
You can get a zip, and then extract it, you can view demo, it tells you how to use the icon font.
你会获得一个压缩包，解压它，可以看到有一个实例文件，它告诉了你怎么使用这个字体文件。

Usage of the icon font is as easy as below:
字体文件的使用方式如下：

@font-face {
    font-family: 'icomoon';
    src:  url('fonts/icomoon.eot?qx10w1');
    src:  url('fonts/icomoon.eot?qx10w1#iefix') format('embedded-opentype'),
    url('fonts/icomoon.ttf?qx10w1') format('truetype'),
    url('fonts/icomoon.woff?qx10w1') format('woff'),
    url('fonts/icomoon.svg?qx10w1#icomoon') format('svg');
    font-weight: normal;
    font-style: normal;
}
[class^="icon-"], [class*=" icon-"] {
    font-family: 'icomoon' !important;
}

These icons can be styled as below:
这些图标可以被设计成很多种样式：

.icon-quill {
    color: orange;
}
.icon-music {
    font-style: italic;
    color: grey
}
.icon-book {
    background-image: -webkit-gradient(linear, 0 0, 0 bottom, from(rgba(0, 128, 0, 1)), to(rgba(51, 51, 51, 1)));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.icon-quill:before {
    content: "\e907";
}
.icon-music:before {
    content: "\e911";
}
.icon-connection:before {
    content: "\e91b";
}
.icon-book:before {
    content: "\e91f";
}