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
Tutorial on building nextcloud personal network disk with Docker
Table of contents 1. Introduction 2. Deployment E...
Responsive Web Design Learning (2) — Can videos be made responsive?
Previous episode review: Yesterday we talked abou...
Steps to install MySQL using Docker under Linux
As a tester, you may often need to install some s...
Example of fork and mutex lock process in Linux multithreading
Table of contents Question: 1. First attempt 2. R...
Analysis of mysql temporary table usage [query results can be stored in temporary tables]
This article uses an example to illustrate the us...
Several ways to center a box in Web development
1. Record several methods of centering the box: 1...
CSS container background 10 color gradient Demo (linear-gradient())
grammar background: linear-gradient(direction,col...
JavaScript to add and delete messages on the message board
This article shares a small example of adding and...
mysql 5.7.18 winx64 free installation configuration method
1. Download 2. Decompression 3. Add the path envi...
10 Website Usability Tips Everyone Should Know
Let’s not waste any more time and get straight to...
Pure CSS and Flutter realize breathing light effect respectively (example code)
Last time, a very studious fan asked if it was po...
MySQL 8.0.13 download and installation tutorial with pictures and text
MySQL is the most commonly used database. You mus...
Implementation of element multiple form validation
In the project, form testing is often encountered...
MySQL 5.7.23 installation and configuration graphic tutorial
This article records the detailed installation pr...
Vue implements login verification code
This article example shares the specific code of ...