Fonts draw icon icons in Web pages

There are three tips for drawing icon icons in a Web page with fonts:

1. Use CSS sprite to draw small icons in Web pages.

　　Implementation method:

• First, the small picture is integrated into a large picture
• Then, depending on the position of the specific icon on the large map, position the background. Background-position:xpos ypos; relative position is 0 0 in upper left corner, negative to right

Example part of the HTML code and JS code (through JS to change the location of the background map)

1 <ulclass= "Sprite">2         <Li>3             <sclass= "S-icon"></s>4             <ahref="">1</a>5         </Li>6         <Li>7             <sclass= "S-icon"></s>8             <ahref="">2</a>9         </Li>Ten         <Li> One             <sclass= "S-icon"></s> A             <ahref="">3</a> -         </Li> -         <Li> the             <sclass= "S-icon"></s> -             <ahref="">4</a> -         </Li> -  +     </ul>

HTML

<script type= "Text/javascript" >$ (document). Ready (function(e) {varSheight=$ (". Sprite S")). Height (); varSwidth=$ (". Sprite S")). width (); varSli=$ (". Sprite"). Children ("Li")); Sli.each (function() {                var$ This=$( This); varsindex=$ This. index (); $ This. Children ("s"). CSS ("background-position", "0-" +sheight*sindex+ "px"); $ This. Hover (function(e) {$ This. Children ("s"). CSS ("background-position",-swidth+ "px" + "-" +sheight*sindex+ "px"); },function(){                    $ This. Children ("s"). CSS ("background-position", "0-" +sheight*sindex+ "px");            });        });    }); </script>

JS

Correct use of CSS Sprites as appropriate

CSS Sprites Benefits:

• The goal of CSS Sprites (Image integration technology) is to speed up page loading by consolidating images and reducing the number of requests to the server.

CSS Sprites Cons :

• The time cost of flattening the picture will increase (the general flattening is to put together the same picture of the state, the rest of the different states into a picture, then maybe a picture state change, then the whole picture will need to re-create the Save)
• The time cost of coding and maintenance increases, and the type of sprite leads to endless testing and the re-placement of picture status.
• Incorrect use of sprites can affect accessibility.

Picture Optimization
First, for non-animated GIF is recommended to use PNG8 because it can also achieve the same effect, but also can save you 10%-30% of the file volume.
Second, Photoshop compared to fireworks, export the same quality PNG image, the volume will be slightly larger. Although fireworks did the corresponding compression optimization, but did not achieve the best compression.
Third, I know that the design of software, for the processing of PNG pictures did not achieve the best compression, picture volume and a certain amount of compression space. You can try using the Image optimization tool described below for lossless compression optimizations.
Four, the volume and size of the picture, the proposed volume is kept within 100K (more in line with the country's best request size), size 800px (the best size).
CSS sprites picture cutting technique
Third, the CSS sprites pictures in the color of the closer or the same combination can reduce the number of colors, because the image of a few color number of the file size will be relatively small.
Four, the size of the same CSS sprites picture left a large gap, to some extent, most of the situation will increase the volume, so the CSS sprites pictures do not have gaps.
Five, in the same size CSS sprites picture, vertically arranged pictures will be larger than the horizontal arrangement of the file size.
Six, in the CSS sprites picture, the horizontal arrangement picture will be larger than the vertical arrangement file volume.
Nine, the gold cutting bit: In the CSS sprites picture of the right or left for the most flexible position of the most suitable to put the text before the icon, so will not be affected by other CSS sprites picture intervention, do not need to reserve a certain line width.

————————————————————————————— I'm a split line ————————————————————————————

2, font+html in the Web page icon small icons

How to use: Login Https://icomoon.io on Demand to select the icon you want, export the icon to local, there will be a demo file, find the Fonts folder, the four files inside the desired font

Preview Download fonts

Download the demo file and choose Fonts

Click Get code to get the hexadecimal code corresponding to the icon

Encoding in HTML entity

After the preparation is done, you can encode it.

1 <ulclass= "Layout">2         <Li><ahref=""><Istyle= "color: #efe0ce;"class= "Imooc-icon">& #xea62;</I></a></Li>3         <Li><ahref=""><Istyle= "color: #ef7073;"class= "Imooc-icon">& #xea63;</I></a></Li>4         <Li><ahref=""><Istyle= "font-size:30px;"class= "Imooc-icon">& #xea6d;</I></a></Li>5         <Li><ahref=""><Istyle= "font-size:60px;"class= "Imooc-icon">& #xe9cb;</I></a></Li>6         <Li><ahref=""><Istyle= "font-size:90px;"class= "Imooc-icon">& #xe962;</I></a></Li>7 </ul>

HTML

1 @font-face{2 font-family:"icon";3 src:URL (".. /fonts/icomoon.eot ");4 src:URL (".. /fonts/icomoon.eot #iefix ") format (" Embedded-opentype ")5 , URL (".. /fonts/icomoon.woff ") format (" Woff ")6 , URL (".. /fonts/icomoon.ttf ") Format (" TrueType ")7 , URL (".. /fonts/icomoon.svg ") format (" SVG ");8 Font-weight:Normal;9 Font-style:Normal;Ten} One  A . Imooc-icon{ - font-family:"icon"; - Font-style:Normal; the Font-weight:Normal; - font-size:64px; - -webkit-font-smoothing:antialiased;/*make font anti-aliasing on a page*/ - -moz-osx-font-smoothing:Grayscale; +}

CSS

Benefits:

1. Flexibility: Easily change the color of icons or other CSS effects

2, Expandable: Change the size of the icon, just like changing the font size

3, Vector: Zoom icon does not affect the sharpness of

4. Compatibility: Font icons support all modern browsers (including IE6)

5, local use: By adding custom fonts to the system, can be used in a variety of design and editing applications

————————————————————————————— I'm a split line ————————————————————————————

3, Font+css in the Web page icon small icons

The third method is also the use of the above Icomoon, but this is the use of: before pseudo-elements, specific code such as:

Fonts draw icon icons in Web pages