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
How to Install Xrdp Server (Remote Desktop) on Ubuntu 20.04
Xrdp is an open source implementation of Microsof...
Detailed example of database operation object model in Spring jdbc
Detailed example of database operation object mod...
Solve the problem of qt.qpa.plugin: Could not load the Qt platform plugin "xcb" in Qt under Ubuntu 18.04
Problem Description After installing Qt5.15.0, an...
Simple usage example of MySQL 8.0 recursive query
Preface This article uses the new features of MyS...
Swiper+echarts realizes the left and right scrolling effect of multiple dashboards
This article shares the specific code of swiper+e...
A quick solution to the problem that there is no data directory and my-default.ini in the unzipped package of Windows 64-bit MySQL 5.7 or above, and the service cannot be started (problem summary)
I am a beginner in SQL and thought that the insta...
An article to give you a deep understanding of Mysql triggers
Table of contents 1. When inserting or modifying ...
Detailed explanation of generic cases in TypeScript
Definition of Generics // Requirement 1: Generics...
JavaScript canvas to achieve raindrop effects
This article example shares the specific code of ...
MySQL character set garbled characters and solutions
Preface A character set is a set of symbols and e...
mysql5.6.zip format compressed version installation graphic tutorial
Preface: MySQL is a relational database managemen...
JavaScript Basics: Error Capture Mechanism
Table of contents Preface Error Object throw try…...
Explanation of MySQL's horizontal and vertical table partitioning
In my previous article, I said that the optimizat...
Detailed steps for Navicat to remotely connect to SQL Server and convert to MySQL
Preface Recently, I encountered a program using S...
Detailed explanation of how Zabbix monitors the master-slave status of MySQL
After setting up the MySQL master-slave, you ofte...