Icon font (IconFont) production_html/css_WEB-ITnose

Introduction to IconFont

IconFont is now more and more widely used, greatly increasing the diversity of web pages and solving the problem of retinal screen distortion. It is said that this private method (@font-face) was supported by Microsoft starting from IE4. Later, W3 also introduced this method in CSS2, but it was later deleted in CSS2.1, which is really a pity. Until CSS3, when it was introduced again, it was really good news.
For details, see: http://www.w3.org/TR/css3-fonts/.

However, I am often asked whether it is okay to use it on the mobile terminal, but IE on the PC is fine. I can responsibly say: of course. The reason is mentioned above. @font-face was originally a private method in Microsoft IE, so it has been supported since IE4 (I have not tested it), but now the website supports at least IE6 and IE6 has been gracefully downgraded to normal browsing. When using a website, the UI restoration is no longer worth the effort to make it compatible. Moreover, it is indeed no problem to use it in IE6 in actual projects.

In a word, you can now safely and boldly use icon fonts (Iconfont) on PC and mobile terminals.
For more information, please visit the Alibaba IconFont website, the largest and most complete library of appropriate icons in China.

Iconfont (Iconfont) Production

1. IcoMoon

This tutorial has a lot of them, it is a very convenient and fast way, providing uploading, editing or selection IcoMoon-Free can be downloaded and used directly.
Website: https://icomoon.io/app/

2. Ali IconFont

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

The above two methods have the advantage of being convenient and fast, but they may not meet your personalized needs sometimes.
For example: if you only need to replace an existing icon and keep the character code unchanged, or if you have more personalized needs, maybe you can look at the following method.

3. Font editing software production

1. First prepare the software. In addition to PS and AI, you 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 exports the icon path to AI (the icon must be a path)
   

3. AI opens the exported icon path (it may be blank when opened, you can select all to find and add color)
   

4. Open FontCreator, create or open a font
   

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

6. Copy from AI For the icon path to FontCreator, adjust the size position
   for reference (http://mux.alimama.com/posts/1025)
   

7. to export fonts, only TTF and WOFF two formats
   

8. Go to EverythingFonts to convert TTF to SVG and EOT, TTF2SVG TTF2EOT
   

9. Okay, call it a day.