Font icon creation, font icon

Font icon creation, font icon

Why do I need a font icon on the web end?

Good performance. In the previous project, the web page icons were used as images. when there were many icons, the size was relatively large. In addition, I have worked on the uidesign for two years. I always think it is difficult to cut the image. If the size of the same icon is not the same, directly enlarging the image will be distorted.

Font icon creation process

1: first, of course, a designer is needed... My common method is to design icons and save them as SVG format.

When there is no designer, you can also download the SVG icon you need on the http://www.iconfont.cn. You need to log on to your account and see the favorite icons to favorites or download them. This is not supported in the first version, and the icons are copyrighted, however, no one cares if it is used by a small company... it is not easy for a designer to support genuine copies and design as much as possible.

2: process the icons in SVG format. The recommended website is http://www.iconfont.cn/#http://fontello.com/. you can drag them in.

You can set the Icon size or company name in it. The red icon below indicates the desired download.

3. The downloaded file contains the following content:

The dome.html file displays the displayed icons on the webpage.

4: How to use it in a webpage, introduce a css file, and write the icon name to the class.

<! Doctype html> Class = "icon-daohang"> </I> </button> <button type = "button" class = "btn" title = "delete"> <IClass = "icon-shanchu"> </I> </button> <button type = "button" class = "btn" title = "Settings"> <IClass = "icon-shezhiqianhouzhui"> </I> </button> <button type = "button" class = "btn" title = "Search"> <IClass = "icon-jiansuo"> </I> </button> <button type = "button" class = "btn" title = "import"> <IClass = "icon-daoru"> </I> </button> <button type = "button" class = "btn" title = "Export"> <IClass = "icon-daochu"> </I> </button> </div> <button type = "button" class = "btn" title = "trend"> <IClass = "fa-area-chart"> </I> </button> <button type = "button" class = "btn" title = ""> <IClass = "fa-arrows"> </I> </button> <button type = "button" class = "btn" title = "Left and Right"> <IClass = "fa-arrows-h"> </I> </button> <button type = "button" class = "btn" title = "up/down"> <IClass = "fa-arrows-v"> </I> </button> <button type = "button" class = "btn" title = "Settings"> <IClass = "fa-asterisk"> </I> </button> <button type = "button" class = "btn" title = "@"> <IClass = "fa-"> </I> </button> </div> </body> 
Of course, if you do not want to design icons, you can also directly import external icon libraries, such as font-awesome.
Css file <link rel = "stylesheet" href = "font-awesome/css/font-awesome.min.css">
There are two methods:

The preceding figure shows the effect of <link rel = "stylesheet" href = "sk/css/sk.css">.
The following is the <link rel = "stylesheet" href = "font-awesome/css/font-awesome.min.css"> effect, the introduction is the position of the icon, do not need to make your own icon, however, when the icon library is changed, the effect may be affected.

 
5. Source Code Analysis of the introduced icon css file

@ Font-face attribute, added at css3, compatible with IE6
Code snippet for each icon:

Note that when you need to add an icon each time. Icon-kaiguandingyi: before {content: '\ e88a ';}/*''*/This code is useless, because there are several associated files that need to be modified at the same time, so try to log in with your own account on the website where the icon is generated, and you can generate your own icon library, it can be saved for a long time.
 
If you have any mistakes, I hope you can correct them. You can get a lot of guidance from cainiao.