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
Detailed explanation of CocosCreator project structure mechanism
Table of contents 1. Project folder structure 1. ...
How to Fix File System Errors in Linux Using ‘fsck’
Preface The file system is responsible for organi...
How to install and modify the initial password of mysql5.7.18
For Centos installation of MySQL, please refer to...
How to simply configure multiple servers in nginx
1: I won’t go into the details of how to install ...
Detailed explanation of how to adjust Linux command history
The bash history command in Linux system helps to...
Detailed explanation of how to use Docker to build a simple Java development and compilation environment
There are many versions of the Java language. In ...
MySQL learning: five major constraints of database tables explained in detail for beginners
Table of contents 1. Constraint concepts and clas...
HTML page header code is completely clear
All the following codes are between <head>.....
Building command line applications with JavaScript
Table of contents 1. Install node 2. Install Comm...
Pycharm2017 realizes the connection between python3.6 and mysql
This article shares with you how to connect pytho...
Vue implements card flip carousel display
Vue card flip carousel display, while switching d...
Comparing the performance of int, char, and varchar in MySQL
There are many seemingly true "rumors" ...
JS implements sliding up and down on the mobile terminal one screen at a time
This article shares with you the specific code of...
Quickly master how to get started with Vuex state management in Vue3.0
Vuex is a state management pattern developed spec...
Reasons and solutions for prompting to save action after uploading files in form
The json data must be returned in html format That...