Why we give up CSS sprite using Iconfont font icon

Say at the beginning

A previous blog said that the project uses compression and CSS sprite technology to classify and combine icons;

But with the continuous improvement of the project, we also encountered a lot of problems:

1. How to classify the icons; just at the beginning is better, we classify the icons, there is probably a bank card icon category, such as adding and removing icons, payment types, and so on. But with the increasing of the icons and the direct crossover of the business, it becomes difficult to find the classification and gradually lose patience. If all the icons are integrated into a single graph, but there is a situation where some pages use only one icon, and the user only operates on this page, but download a whole big picture, wasting resources.

2. The icon position is not good control, many times in order to background-position: accurate positioning, especially to ensure that the mouse hover effect of the picture area and the default picture area is completely coincident; we often try to 1px, adjust. The eyes are looking at the flowers.

Such as:

650) this.width=650; "src=" Http://s2.51cto.com/wyfs02/M00/77/5D/wKioL1ZmvVXh6nPsAAAi0Tsotf8252.png "style=" float: none; "title=" Image 8.png "alt=" Wkiol1zmvvxh6npsaaai0tsotf8252.png "/>

650) this.width=650; "src=" Http://s3.51cto.com/wyfs02/M01/77/5E/wKiom1ZmvOaQM-eMAAAihjObZF4878.png "style=" float: none; "title=" Image 9.png "alt=" Wkiom1zmvoaqm-emaaaihjobzf4878.png "/>

3. Not conducive to maintaining the new icon has to modify the whole diagram, sometimes in order to ensure that a certain type of area, you have to adjust the location of other icons.

4. Zoom out, image distortion.

So we decided to abandon the CSS Sprite

Focus, focus

Why Choose Iconfont

1. Good compatibility. Mainstream browsers (including IE6) now support CSS3 custom fonts (@font-face), so you can try using font to replace the various icons on the image display site.

2. Easy to use; the developer calls the style directly, not for background-position: pinpoint the blind eye.

3. Facilitate maintenance, add, modify, delete icons conveniently, the individual icons are relatively independent.

4. Small size, fast request speed, can bring a better user experience.

5. Vector diagram, zoom in, stretch will not distort.

Some people may feel that the font icon is too monotonous, in the animation, transition, shadow seems to be difficult; however, in my opinion, these effects do not have a significant impact on the user experience, on the contrary, the font size is small, the page load quickly, Hover,mouse event, the switch effect is smooth, but can improve the user experience.

Share the Iconfont instances used in the current project below.

The process of generating the icon I skipped this. need to work with the UI, recommend using Fontcreator, recommend a blog Http://www.uisdc.com/learning-icon-font

as follows: (the article attachment, will attach our project current font picture library)

650) this.width=650; "src=" Http://s1.51cto.com/wyfs02/M02/77/5E/wKiom1ZmuYGyVcekAACzE9I_mJ0128.png "title=" Image 7.png "alt=" Wkiom1zmuygyvcekaacze9i_mj0128.png "/>

Preferred to get font files with Font-face

@font-face {font-family: "Iconfont"; Src=\ ' #\ '/* ie9*/src=\ ' #\ ' "/* ie6-ie8 * * URL (' Iconfont.woff '),/* Chrome, Firefox */url (' Woff F ') format (' TrueType '),/* Chrome, Firefox, Opera, Safari, Android, IOS 4.2+*/url (' iconfont.svg#iconfont ') format (' SVG ') ; /* IOS 4.1-*/}

From the Internet, find the current mainstream browser for the icon font support, as follows:

• IE: Support EOT format from IE4, IE9 start support Woff.

• Webkit/safari: Supports Truetype/opentype (. ttf), OpenType PS (. OTf), ios4.2+ support. Ttf,ios 4.2 The following only supports SVG fonts; safari5.1+ starts to support Woff format

• Chrome: In addition to WebKit support, start with Chrome 6 and start supporting the Woff format;

• Firefox: Support for. TTF and. OTF, starting with Firefox 3.6 support for the Woff format;

• Opera: Supports. ttf,. OTF,. svg. Opera 11 began to support Woff;

• IPad, IPhone and Android 3.0+ support SVG fonts.

So, we have created: Font files in Eot,.woff,avg and other formats

There are probably two ways of using it:

1. Directly under the font icon corresponding to the encoding

<i class= "icon Iconfont" >& #xe670;</i> <div class= "name" > Downloads </div> <div class= "code" >&amp; #xe670;</div> <div class= "Fontclass" >.xiazai</ Div> </li>

We do not recommend doing this because we need to remember the coding, and when we look at the code, we don't know what the icon means.

2. By pseudo-class: (It is recommended to use this, do not remember, see the code, you can also know the meaning of the icon)

<i class= "icon iconfont Icon-xiazai" ></i> <div class= "name" > Downloads </div> <div class= "code" >&amp; #xe670;</div> <div class= "Fontclass" >.xiazai</ Div> </li>

The corresponding styles are as follows:

. icon-xiazai:before {content: "\e670";}. Icon-yixuan:before {content: "\e671";}

So we can take these icons as text controls

For example: The Color,font-size property can be used.

Say in the end

Want to write this article for a long time, finally work overtime completed.

Note: The attachment is the library of our font icon.

This article from "Shuizhongyue" blog, reproduced please contact the author!

Why we give up CSS sprite using Iconfont font icon