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.
每一個網(wǎng)站項目管理自己圖標的方式都不一樣跟啤。 在支持響應(yīng)式的網(wǎng)站項目中乙漓，我們可能會看到如下圖的圖片管理方式，相同的圖標會保存多種規(guī)格梨州、顏色祖秒，于是需要保存四個圖像文件诞吱。在很普通的網(wǎng)站中，這種小圖標一般會有十幾個竭缝，那么房维，采用這種方式保存圖標就顯得很繁瑣。
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:
它是一個網(wǎng)絡(luò)應(yīng)用抬纸，你可以從中獲得矢量圖標咙俩， 生成圖標字體文件等等。它不僅可以幫你管理圖標湿故，還可以使你的圖標變得可編輯：
- 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.
它提供了大量的高質(zhì)量圖標砚哆，幾乎可以滿足一般網(wǎng)站的圖標需求独撇。
Get Started
- open icoMoon App
打開 icoMoon App - search icons that you want, or you can import icons from your local PC.
查找你想要的圖標屑墨，或者從你的電腦中引入（在需要將你自己設(shè)計的圖標放入字體文件時非常好用） - 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:
這些圖標可以被設(shè)計成很多種樣式：
.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";
}
