css plus sprite map
1. Preface·Basic knowledge
1-1. visual studio code software
Microsoft officially announced the Visual Studio Code project at the Build Developer Conference on April 30, 2015: a cross-platform source code editor that runs on Mac OS X, Windows and Linux for writing modern Web and cloud applications .
1. Visual Studio Code download link:https://code.visualstudio.com/
1.2 Visual Studio Code installation tutorial:
https://blog.csdn.net/weixin_37590454/article/details/89436577
1-2 Unicode
Unicode (also known as Unicode, Universal Code, Single Code) is an industry standard in the field of computer science, including character sets, encoding schemes, etc. Unicode was created to solve the limitations of traditional character encoding schemes. It sets a unified and unique binary encoding for each character in each language to meet the requirements of cross-language and cross-platform text conversion and processing. Research and development started in 1990 and officially announced in 1994.
2.css plus wizard diagram steps
1. Open the "Alibaba Vector Icon Library" in the browser.
2. Enter the desired icon in the search box: for example "Camera"
3. Add the selected icon to the shopping cart.
4. Click the shopping cart
→ download code
→ save the downloaded compressed package in the corresponding location (modify and remember the location).
5. unpack the archive
→ to demo_index.htmland infont.csscopy the file to the corresponding position (and bearing in mind the position of modifications).
6. Add the wizard to the program. Figure
6.1 Use link to import the iconfont.css file in the header.
(The size font-size:100px;and color of the sprite can be adjusted by changing the content of the sprite folder color:purple;)
<head>
<link rel="stylesheet" href="iconfont.css">
<style>
.iconfont{
font-size: 400px;
color: purple;
}
</style>
</head>
6.2 Use the span tag to add the sprite image to the body. The specific content in the span tag can demo_index.htmlbe found in the file.
<body>
<span class="iconfont"></span>
</body>
link tag: Introduce the .css library into the program
Link label format:<link rel="stylesheet" href="地址+文件名">
Address + file name: current path: ./iconfont.cssor iconfont.css
previous path:../iconfont.css