CSS to implement sprites and font icons

CSS to implement sprites and font icons

Sprites:

In the past, each image resource was an independent image. When the browser visited different web pages in the website, it repeatedly obtained these images, which meant that the resources needed to be accessed many times.

In order to reduce the number of times resources are accessed, multiple commonly used images are combined into one image (the caching mechanism of the web page will omit the local resources that are already available. If the resource was obtained the previous time, it will not be accessed again until the cached resource expires. [It 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 have a ticket that can play all games, then you don’t have to bother buying tickets again and again]).

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

Example:

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

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <style>
        div{
            display:inline-block;
        }
        div:first-child{
            width:79px;
            height: 79px;
            background-image:url('abcd.jpg');
            background-position:-396px 0;
        }
        div:nth-child(2){
            width:82px;
            height: 82px;
            background-image:url('abcd.jpg');
            background-position:-326px -98px;
        }
        div:nth-child(3){
            width:82px;
            height: 82px;
            background-image:url('abcd.jpg');
            background-position:-326px -98px;
        }
        div:nth-child(4){
            width:79px;
            height: 79px;
            background-image:url('abcd.jpg');
            background-position:-396px 0;
        }
        div:nth-child(5){
            width:48px;
            height: 77px;
            background-image:url('abcd.jpg');
            background-position:-81px -101px;
        }
        div:nth-child(6){
            width:48px;
            height: 77px;
            background-image:url('abcd.jpg');
            background-position:-286px 0;
        }

    </style>
</head>
<body>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</body>
</html>

result:

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

In reality, many background images use this technique.

For example, JD.com 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 an image. Considering that sprites process pictures one by one, someone came up with a brilliant idea - converting pictures into fonts (in fact, fonts were originally designed that way.)

After conversion into fonts, special codes can be used to display the specified image.

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

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

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

style.css can provide a way to use font icons

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

Then use:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <style>
    /* Declare the font. The following text is in the css file in the downloaded folder*/
        @font-face {
      font-family: 'icomoon';
      src: url('fonts/icomoon.eot?ni3k5c');
      src: url('fonts/icomoon.eot?ni3k5c#iefix') format('embedded-opentype'),
        url('fonts/icomoon.ttf?ni3k5c') format('truetype'),
        url('fonts/icomoon.woff?ni3k5c') format('woff'),
        url('fonts/icomoon.svg?ni3k5c#icomoon') format('svg');
      font-weight: normal;
      font-style: normal;
        }
        /* use*/
        [class^="icon-"], [class*="icon-"] {
          /* use !important to prevent issues with browser extensions that change fonts */
          font-family: 'icomoon' !important;
          speak: none;
          font-style: normal;
          font-weight: normal;
          font-variant: normal;
          text-transform: none;
          line-height: 1;
          /* Better Font Rendering =========== */
          -webkit-font-smoothing: antialiased;
          -moz-osx-font-smoothing: grayscale;
        }
        .icon-home:before {
          content: "\e900";
        }
        .icon-image:before {
          content: "\e90d";
        }
        .icon-music:before {
          content: "\e911";
        }
        div{
            font-family:'icomoon';/* Must be consistent with the above*/
        }
    </style>
</head>
<body>
    <div class=".icon-imagee"></div> 
    <!-- The first way to use:
    Import the style.css file and use the properties of the class selector of the specified icon as the corresponding class attribute value -->
    <div></div> <!-- The second way to use:
    Make a font declaration for the tag, then open demo.html and copy the icon [one code on the left and one icon on the right]
     -->
     <!-- The first method is to use ::before to add, we can also use other ::before methods to add-->
</body>
</html>

Summarize

The above is the CSS implementation of sprites and font icons introduced by the editor. I hope it will be helpful to everyone. If you have any questions, please leave me a message and the editor will reply to you in time. I would also like to thank everyone for their support of the 123WORDPRESS.COM website!

<<:  Detailed explanation of how to enter and exit the Docker container

>>:  mySql SQL query operation on statistical quantity

Recommend

Solution to PHP not being able to be parsed after nginx installation is complete

Table of contents Method 1 Method 2 After install...

Mini Programs enable product attribute selection or specification selection

This article shares the specific code for impleme...

Practical basic Linux sed command example code

The Linux stream editor is a useful way to run sc...

Vue+element ui realizes anchor positioning

This article example shares the specific code of ...

Detailed tutorial on installing Spring boot applications on Linux systems

Unix/Linux Services systemd services Operation pr...

How to set the number of mysql connections (Too many connections)

During the use of mysql, it was found that the nu...

MySQL server 5.7.20 installation and configuration method graphic tutorial

This article records the installation and configu...

JavaScript to achieve dynamic table effect

This article shares the specific code for JavaScr...

Solution to Ubuntu 20.04 Firefox cannot play videos (missing flash plug-in)

1. Flash plug-in package download address: https:...

Tomcat CentOS installation process diagram

Tomcat CentOS Installation This installation tuto...

Detailed explanation of log processing of Docker containers

Docker has many log plug-ins. The default is to u...

Vue template configuration and webstorm code format specification settings

Table of contents 1. Compiler code format specifi...

A useful mobile scrolling plugin BetterScroll

Table of contents Make scrolling smoother BetterS...

Detailed examples of the difference between methods watch and computed in Vue.js

Table of contents Preface introduce 1. Mechanism ...

Is it necessary to give alt attribute to img image tag?

Do you add an alt attribute to the img image tag? ...