CSS Implementation of Wizard Picture and Font Icon

Time:2019-9-8

Wizard Map:

In the past, each image resource was a separate picture. When browsers visited different web pages in the website, they repeatedly acquired this picture, which meant that they needed to visit many resources.

In order to reduce the number of accesses to resources, several commonly used pictures are aggregated into one picture (the caching mechanism of web pages omits the local existing resources, if this resource was acquired the previous time, then it will not be accessed again until the cached resources are invalid. It’s a bit like going to an amusement park. Some tickets can play all the games, while some tickets can only play one game. If you have tickets that can play all the games, you don’t have to bother buying tickets again and again.

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

Examples:

Here’s a 26-letter list. Let’s use this chart 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 intercept what we want to see.

In reality, this technique is used in many background pictures.

For example, Jingdong LOGO:

Some small icons of Jingdong:

Font icon:

As we all know, the file size of the unit font is smaller than the size of the picture. Considering that the wizard is dealing with pictures one by one, some people have a fantastic idea of converting pictures into fonts (actually, the font was designed that way).

When converted into fonts, special code can be used to display the specified image.

The font icon has a distinct advantage over the wizard image, because it is a font, so it can change the color of the font, change the size of the font (and not distort it).

Example: [The following is a demonstration of how to use font icons, not how to make font icons]

I used icomoon to make a font icon, [icomoon has ready-made icon selection] and downloaded it. The following is the file name.

Style. CSS provides a way to use font icons

Demo. HTML provides a second way to use font icons.

Then use:

 

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <style >
    /* Declare fonts. The following stack of 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'; /* to be consistent with the above*/
        }
    </style>
</head>
<body>
    <div class=".icon-imagee"></div> 
    <! - The first way of use:
    Import the style. CSS file and use the class selector property of the specified icon as the corresponding class attribute value
     -->
    <div> </div> <!--The second way of using:
    Make a font declaration for the label, then open demo. HTML and copy the icon. [A code on the left and an icon on the right]
     -->
     <! - The first method is to use: before to add, we can also use other ways:: before to add - >
</body>
</html>

summary

Above mentioned is a small edition to introduce to you the implementation of CSS wizard and font icons, I hope to help you, if you have any questions, please leave me a message, small edition will respond to you in time. Thank you very much for your support to developpaer.

Recommended Today

Resolving Time Zone Errors with Docker

1. The correct time zone in China is set to CST, i.e.China Standard TimeIn usedockerstart-upJenkinsWhen mirroring, the settings for mirroring are usuallyCoordinated Universal Time。 So add parameters at startup -v /etc/localtime:/etc/localtimeMount the local time zone to the mirror, so that the mirror gets the correct time zone. Then go to Jenkins and fill in the […]