Css-icon icons (icon font)

1. Concept

This little red dot is an icon, and the icon is actually a font in CSS.

2. Why is an icon that is essentially a font?

2.1 Images increase the size of the total file.
2.2 Images add additional HTTP requests, greatly reducing the performance of the Web page.
2.3 Images cannot be scaled much, as the image zooms in and out and is distorted.

3. Advantages of font icons

3.1 You can do things like pictures, change the transparency, the degree of rotation, etc.
3.2 The essence is the text, can change the color very casually, produces the shadow, the transparency effect and so on
3.3 Smaller, portable information not cut
3.4 Almost all browsers supported
3.5 for mobile device-friendly

4. Process of using font icons

website See bookmarks, art---icons

5. Font Introduction to HTML

With https://icomoon.io/#home为例
Click the Icomoon App in the top right corner


Put the Fonts folder in the downloaded package into our project
declaring fonts in HTML

@font-face {  font-family: ‘icomoon‘;  src:  url(‘fonts/icomoon.eot?7kkyc2‘);  src:  url(‘fonts/icomoon.eot?7kkyc2#iefix‘) format(‘embedded-opentype‘),    url(‘fonts/icomoon.ttf?7kkyc2‘) format(‘truetype‘),    url(‘fonts/icomoon.woff?7kkyc2‘) format(‘woff‘),    url(‘fonts/icomoon.svg?7kkyc2#icomoon‘) format(‘svg‘);  font-weight: normal;  font-style: normal;}

Use Fonts for boxes

span {        font-family: "icomoon";    }

Add structure inside the box

span::before {         content: "\e900";    }或者  这个框框是从下载来的zip包中的demo.html里面找的，复制就可以<span>?</span>  

Example 1.

<!     DOCTYPE html>

Label I,span,em,button can also be done

6. Append the new icon to the original font library

If the original font icon in the work is not enough, we need to add a new font icon, but the original can not be deleted, continue to use, at this time we need to do this
The Selection.json in the compressed package from the new upload, and then, select the new icon you want to download the package from the new, replace the original file.

7. There are other ways to use the icon, not discussed

Css-icon icons (icon font)