css sprite & Fonts icon

Sprite

1. Why sprite
   • In order to effectively reduce the number of incoming and outgoing requests of the server, the page load faster. The emergence of CSS Sprites technology
2. Use the sprite (sprites) of
   • Wizard technology mainly for the background image. It is to integrate multiple small background image to a big picture.
   • The big picture also known as sprites Sprite sprite or map
   • Mobile background image position using the background-position
   • The distance traveled is x and y coordinates of the target image. Note that the coordinates of the page is different
   • When using the sprite requires precise profile, small size and location of each background image

Fonts icon

1. Mainly used to display Web pages general, commonly used small icon
2. Sprite shortcomings
   • Image files are large
   • Zoom in and out the picture itself will be distorted
   • Once you've created the picture you want to replace complex
3. Font icon icons provide a convenient and efficient way to use front-end engineers, show the icon, essentially within the font
4. advantage
   • Lightweight: an icon font is smaller than the series of images, fonts, once loaded, the icon will be rendered immediately, reduce server requests
   • Flexibility: in fact, is the essence of the text, can be very casual change color, shadows, transparency, rotation, etc.
   • Compatibility: supports almost all browsers
   • 【note】
     • Fonts icon can not replace the technical wizard, but to enhance the work of the icon part of the technology and optimization
5. Download Font icon
   • icomoon font library http://icomoon.io
   • Ali iconfont font library http: //www.iconfontcn/
6. The introduction of the font icon
   • The download package inside the font folder into the root directory page
   • In the global life style CSS font: Simple to understand these font files introduced into our page by css
   • Add a small icon in the html tag
   • 
7. Additional font icon
   • The compressed inside selection.json new upload, and then select a new icon you want to re-download the archive, and replace the original file

CSS triangle painting

div{
                width:0;
                height:0;
                line-height: 0;
                font-size: 0;
                border: 50px solid transparent;
                border-left-color: black;
}