A more convenient way to embed a large number of icons in a Web page than Css-sprite

This idea is found on a foreign website, the designers used a lot of small icons in the site, but did not use css-sprite technology, but the use of another special method. That's CSS3 's font-face technology. Loads a font file of your own, calling the character directly in the place where it needs to be displayed.

This method only applies to a large number of pure color, as the number does not seem to have the upper limit, a-z+0-9+ symbol is enough, malicious little, inserted in Chinese, every thousands of units.

Font-face icon VS css-sprite icon

They also combine n multiple icons into an HTTP request, Css-sprite is the method we often use, it can almost put all the pictures do not need to be tiled, and then to locate.

And Css-sprite's disadvantage is positioning, want to do the front end of Deadwood, almost daily with background-position, xy a pixel can not be bad, although there are tools, but the workload is magnified several times.

The font-face does not need to be positioned, as long as you follow the font editor, you can know which character corresponds to which icon. It's very convenient to use.

<style type= "text/css" media= "screen" >
<!--
i{font-family: ' Custom font name '; color: #000;}
I:hover{color: #0f0;}
-->
</style>
<div>
<li><i>A</i> XXX </li>
<li><i>B</i> XXX </li>
<li><i>C</i> XXX </li>
</div>

A/B/C will automatically become the corresponding icon in our font, how, very convenient, but Font-face has limitations, that is, must be a solid color icon, because the font can only be attached to it color properties to change colors.

In terms of maintenance, the Font-face method is more convenient, the replacement/Add/icon is very easy, and css-sprite is not easy to manage, especially when the picture and size are to be changed.