CSS implementation of sprites and font icons

This article mainly introduces the knowledge related to CSS implementation of sprites and font icons. It is very good and has reference value. Friends who need it can refer to it

Sprite:

In the past, each picture resource was an independent picture. When the browser accessed different web pages in the website, it repeatedly obtained these pictures, which meant that it needed to access Resources many times.

In order to reduce the number of resource accesses, multiple commonly used pictures are collected into one picture (the caching mechanism of the web page will omit existing local resources. If this resource is obtained previously, then it will be used later. It will not be accessed again until the cached resources expire. [The meaning is a bit like going to an amusement park. Some tickets can play all games, while some tickets can only play one game. If you hold a ticket that can play all games, then you You don’t have to bother buying tickets again and again]).

After gathering multiple commonly used pictures into one picture, set this picture as a background picture, and then use background-position to display different parts of the picture.

Example:

The following is a 26-letter alphabet. We use this picture to spell out a GOOGLE

Result:

As shown in the above example, we can combine multiple pictures Put it into a large picture, and then use background-position to capture the content we want to see.

In reality, many background pictures use this technology.

For example, JD.com’s LOGO:

Some small icons of JD.com:

Font icon:

As we all know, the file size of a unit font is smaller than the size of the picture. Considering that the sprite map processes pictures one by one, someone had a wonderful idea - -Convert pictures into fonts (actually the fonts were originally designed this way.)

After converting into fonts, you can use special codes to display the specified pictures.

Font icons have a very obvious advantage over sprites. Because they are fonts, they can change the font color and the font size (without distortion).

Example: [The following only demonstrates the use, not how to make font icons]

I used icomoon to create a set of font icons, [icomoon has ready-made icon selections], and downloaded it. Below are the file names.

style.css can provide a way to use font icons

demo.html can provide a second way Ways to use font icons.

Then use:

      
  
  

    

Related recommendations:

CSS to achieve the effect of bookmark pattern

The above is the detailed content of CSS implementation of sprites and font icons. For more information, please follow other related articles on the PHP Chinese website!