Advanced CSS Tips

Table of contents

1. Sprite map

1.1 Why do we need a sprite map

1.2 Use of sprites

2. Font icons

2.1 Generation of font icons

2.2 Advantages of Font Icons

2.3 Download of font icons

2.4 Introduction of font icons

2.5 Addition of font icons

---

1. Sprite map

1.1 Why do we need a sprite map

 A website often responds with a lot of small background images as decorations. When there are too many images in a website, the server will frequently accept and send requests for images, which will greatly reduce the page loading speed if the server requests more pressure.

  Therefore, in order to effectively reduce the number of times the server accepts and sends requests and increase the speed of page loading, CSS sprite technology, also known as css sprite, css sprite, has emerged.

(Core principle: Integrate some small background images in the web page into one image, so that the server only needs one request)

1.2 Use of sprites

Using the core of a sprite map:

1. Sprite image technology is mainly aimed at the use of background images, which is to integrate multiple small background images into one large image.
2. This large image is also called sprites or Sprite
3. Move the position of the background image, you can use background-position at this time
4. The moving distance is the x and y axis coordinates of the target image, and the coordinates are different in the webpage.
5. Because it generally moves up and to the left, the value is a negative value.
6. When using sprite images, you need to measure accurately, the size and position of each image.

Using Sprite Map Core Summary

1. Sprite images are mainly used for small background images
2. It is mainly realized by means of the position of the background image -- background-position
3. In general, the sprites are negative values ​​(be sure to pay attention to the coordinates in the webpage: the right side of the x-axis is a positive value, and the left side is a negative value, and the y-axis is the same)

2. Font icons

2.1 Generation of font icons

Usage scenarios of font icons: mainly used to display some common and commonly used small icons in web pages.

In the past, sprites were used to do it, but sprites have many shortcomings.

1. The image itself is relatively large.
2. The picture itself will be distorted when zoomed in and zoomed out.
3. Changing Xianyang once the picture is made is very complicated. 

At this time, there is a technology that solves the above problems very well, even if the font icon iconfont

Font icons can provide front-end engineers with a convenient and efficient icon usage. What is displayed is an icon, which is essentially a font.

2.2 Advantages of Font Icons

• Lightweight: An icon is smaller than a series of images. Once the font is loaded, the image will be rendered immediately, reducing server requests.
• Flexibility: The essence is actually text, which can change the color at will, produce shadows, transparency effects, rotation, etc.
• Compatibility: almost all browsers are supported, please rest assured to use  

Note: The font icon cannot replace the sprite technology, it is just an improvement and optimization of some icons in the work 

Summarize:

1. If you encounter some small icons with relatively simple structure and style, use font icons.
2. If you encounter some small pictures with complex structures and styles, use sprites.

Use of Font Icons

The font icon is a small icon that is common on some web pages, we can download it directly from the Internet, so the usage can be divided into:

1. Font icon download
2. References to font icons (introduced into html web pages)
3. Addition of font icons (new small icons will be added later) 

2.3 Download of font icons

Recommended website:

https://iconion.com/posts/icomoon/ https://iconion.com/posts/icomoon/  Founded in 2011, IcoMoon launched the first custom icon font generator, which allows users to choose the icon they want , so that they call it a font. The content of this font is very comprehensive. The only regret is that the foreign server is slow to open the Internet.

https://www.iconfont.cn/ https://www.iconfont.cn/ An iconfont font icon library of Ali M2UX, including Taobao icon library and Ali icon library. You can use Ai to make icons to upload codes. free.

2.4 Introduction of font icons

After the download is complete, be careful not to delete the original file, it will be used later.

1. Put the fonts folder in the download package into the root directory of the page.

2. Globally declare fonts in css styles: simply understand that these font files are introduced into our pages through css. Be sure to pay attention to the font file path problem.

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

 3. Add a small icon in the html tag

 Code:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 字体声明 */
        
        @font-face {
            font-family: 'icomoon';
            src: url('fonts/icomoon.eot?p4ssmb');
            src: url('fonts/icomoon.eot?p4ssmb#iefix') format('embedded-opentype'), url('fonts/icomoon.ttf?p4ssmb') format('truetype'), url('fonts/icomoon.woff?p4ssmb') format('woff'), url('fonts/icomoon.svg?p4ssmb#icomoon') format('svg');
            font-weight: normal;
            font-style: normal;
            font-display: block;
        }
        
        span {
            font-family: 'icomoon';
            font-size: 100px;
            color: palegoldenrod;
        }
    </style>
</head>

<body>
    <span></span>
</body>

</html>

2.5 Addition of font icons

If the original font icons are not enough during work, we need to add new font icons to the original font files.

Re-upload the selection.json in the compressed package, then select the icon you want, re-download the compressed package, and replace the original file.