Fontcreator making Iconfont (contains two tutorials)

The first step

In the AI to draw a good vector, or in PS will be a solid color picture in PNG format, it is best to enlarge many times the solid color picture. Because the import into the fontcreator will appear very small, if not vector, the picture will have a jagged shape when it is pulled large.

Step Two

Select vector Graphics in AI to copy, open Fontcreator, select an already installed font, or choose New Project, here is a new project to demonstrate.

Generally the first few empty do not move, select a after clicking Insert glyph will have such a blank lattice, choose this blank lattice right-click

Right-click and select Properties, code point can start from $e000, write, remember to click on the right of the lightning sign, to search for matches, if not occupied then this code point can be used, the name can be filled with the name you want to fill in. Finally, press apply, and then double-click the space to start editing, remember that after editing, in the properties of the left and right side axis is set to 0, so that can be displayed on the page.

The status after completion is as follows

The Unicode code for this font is $f112, and the name is
After you have finished exporting fonts, you can export fonts in Woff and OTF formats in Fontcreator, and if you need to support other browsers, select convert font format online.

Step Three

referencing fonts in CSS

@Font-face{Font-family: ' Emotion ';Src: Url' Emotion.eot ');/* ie9*/Src: Url' Emotion.eot? #iefix ')Format' Embedded-opentype '),/* IE6-IE8 */Url ' Emotion.woff ') format ( ' Woff '), /* Chrome, Firefox */url ( ' Emotion.ttf ') /* Chrome, Firefox, Opera, Safari, Android, IOS 4.2+*/url ( ' emotion.svg#svgfontname ') format ( ' svg '); /* iOS 4.1-*/}.equip-icon{font-family:              /span>        

After the reference, you can use pseudo-class to write in CSS.

.equip-icon:before {content: "\F112";}

The actual page effect, ignoring the bottom of the blue circle, this black is. (￣▽￣ ")

Then use it happily, Iconfont is suitable for the small icon of solid color, personal feel more suitable for the design of mobile End interface.

Icon Font (iconfont) Make icon Font (Iconfont) Introduction

Icon Font (iconfont) is now more and more widely used, greatly improving the diversification of the web, to solve the problem of retinal screen distortion. It is said that Microsoft began to support the private method from IE4 (@font-face), later W3 in CSS2 also introduced this method, but later CSS2.1 was deleted, it is a pity. It was good news until CSS3, which was introduced again.
See more: http://www.w3.org/TR/css3-fonts/.

But often will be asked, mobile use no problem, the PC on IE can, I can responsibly say: Of course you can. The reason above said, @font-face originally is Microsoft IE private method, so from IE4 started already support (I did not test OH), but now the site to IE6 and IE6 has been gracefully degraded to normal browsing, use of the site, the UI restore is not worth the effort to do compatibility, Moreover, it is absolutely no problem to use IE6 in the actual project.

In a word, it is now safe to boldly use the icon font (iconfont) on the PC and mobile side.
Learn more about the largest and most complete amount of icons Couari Iconfont website.

Icon Font (iconfont) make one. Icomoon

This tutorial a lot of search, is a very convenient and fast way to provide upload, edit or select Icomoon-free download can be used directly.
Website: https://icomoon.io/app/

Two. Ali Iconfont

and Iconfont provide similar functions
Website: http://iconfont.cn/

The advantages of the above two methods are convenient and quick, but perhaps sometimes not enough to meet your individual needs.
For example, if you just need to replace an already icon and keep the character code unchanged or more personalized, you might want to look at the following method.

Three. Font editing software production

1. First prepare the software, in addition to Ps,ai, but also need high-logic fontcreator. Fontcreator is a powerful font editing software. Official website Download: http://www.high-logic.com/font-editor/fontcreator/download.html

2. PS Export icon path to AI (icon must be path)
   

3. Ai opens the exported icon path (open may be blank, you can find and add color to select All)
   

4. Open Fontcreator, new or open font
   

5. Add an icon glyph or double-click the icon glyph you want to edit
   

6. Copy icon path from AI to Fontcreator, resize position
   Refer to (http://mux.alimama.com/posts/1025)
   

7. Export fonts, only TTF and woff two formats
   

8. Go to everythingfonts convert TTF to SVG and EOT, Ttf2svg Ttf2eot
   

9. All right, knock it off.

Fontcreator making Iconfont (contains two tutorials)