CSS uses Alibaba vector library to quickly add good-looking icon effects to the corresponding positions (example code)
|
Enter Alibaba vector icon library Alibaba Vector Icon Library
1. Unicode This is the use of these two Unicode When you start entering, a code will be automatically generated. If not, click Generate. Example:
@font-face {
font-family: 'iconfont'; /* project id 1743720 */
src: url('//at.alicdn.com/t/font_1743720_lf0mzduk11.eot');
src: url('//at.alicdn.com/t/font_1743720_lf0mzduk11.eot?#iefix') format('embedded-opentype'),
url('//at.alicdn.com/t/font_1743720_lf0mzduk11.woff2') format('woff2'),
url('//at.alicdn.com/t/font_1743720_lf0mzduk11.woff') format('woff'),
url('//at.alicdn.com/t/font_1743720_lf0mzduk11.ttf') format('truetype'),
url('//at.alicdn.com/t/font_1743720_lf0mzduk11.svg#iconfont') format('svg');
}The most important one is iconfont At the same time, we also need to modify the corresponding url path Take the first example
<!--Original url-->
src: url('//at.alicdn.com/t/font_1743720_lf0mzduk11.eot');
<!--After the modified URL, open the browser and visit the corresponding URL. If it prompts you to download the eot file, the modification is successful-->
src: url('https://at.alicdn.com/t/font_1743720_lf0mzduk11.eot');The reference to icons in Unicode is as follows In the personal page just now, select Unicode and you can see the added icons are all below, take search as an example
After you move your mouse up, you can see the icon for copying the code. Click Copy The following is the example code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Icon Usage</title>
<style>
@font-face {
font-family: 'iconfont'; /* project id 1743720 */
src: url('https://at.alicdn.com/t/font_1743720_lf0mzduk11.eot');
src: url('https://at.alicdn.com/t/font_1743720_lf0mzduk11.eot?#iefix') format('embedded-opentype'),
url('https://at.alicdn.com/t/font_1743720_lf0mzduk11.woff2') format('woff2'),
url('https://at.alicdn.com/t/font_1743720_lf0mzduk11.woff') format('woff'),
url('https://at.alicdn.com/t/font_1743720_lf0mzduk11.ttf') format('truetype'),
url('https://at.alicdn.com/t/font_1743720_lf0mzduk11.svg#iconfont') format('svg');
}
.wrapper {
width: 1090px;
height: 300px;
background-color: antiquewhite;
margin: 0px auto;
text-align: center;
}
.iconTest::before {
/*This is the copied icon code, modified to the following format*/
/* content: ""; */
content: "\e61a";
font-family: "iconfont";
}
</style>
</head>
<body>
<div class="container">
<div class="wrapper">
<span class="iconTest"> : Hello CSS</span>
</div>
</div>
</body>
</html>Rendering
###Reference to icons in Font Class This is going to be much simpler. Next to Unicode on the personal homepage of the icon library is Fonte Class, click it, then select any icon and copy the code.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Icon Usage</title>
<!--Use it by importing css resources, and modify the url to add https://-->
<link rel="stylesheet" href="https://at.alicdn.com/t/font_1743720_lf0mzduk11.css">
<style>
.wrapper {
width: 1090px;
height: 300px;
background-color: antiquewhite;
margin: 0px auto;
text-align: center;
}
</style>
</head>
<body>
<div class="container">
<div class="wrapper">
<!--iconfont indicates that this is an icon style-->
<!--icon-sousuot means this is a search icon-->
<span class="iconfont icon-sousuo"></span><span> : Hello CSS</span>
</div>
</div>
</body>
</html>Easier to use Sometimes, a complex web page contains references to various icons. For example, each column in the navigation bar needs an icon in front of it. This is where ::before is used. Similarly, sometimes span is used to reference icons. At this time, we can introduce the usage method in Font-Class to achieve the use of two scenarios.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Icon Usage</title>
<link rel="stylesheet" href="https://at.alicdn.com/t/font_1743720_lf0mzduk11.css">
<style>
.wrapper {
width: 1090px;
height: 300px;
background-color: antiquewhite;
margin: 0px auto;
text-align: center;
}
.iconTest::after {
content: "\e61a";
font-family: "iconfont";
}
</style>
</head>
<body>
<div class="container">
<div class="wrapper">
<span class="iconfont icon-sousuo"></span><span class="iconTest"> : Hello CSS</span>
</div>
</div>
</body>
</html>The result is that there are search icons before and after Hello CSS Reason: When we open the imported css, we can find that it also contains Unicode. Therefore, we only need to introduce Font-Class for subsequent use. The hexadecimal code corresponding to the icon is copied in Unicode, which is also a little trick. Summarize This concludes this article about how to use Alibaba vector library with CSS to quickly add good-looking icon effects (example code) to the corresponding positions. For more relevant CSS Alibaba vector icon library content, please search for previous articles on 123WORDPRESS.COM or continue to browse the related articles below. I hope you will support 123WORDPRESS.COM in the future! |
<<: Implementation of building custom images with Dockerfile
>>: Usage and demonstration of ref in Vue
Recommend
MySQL uses events to complete scheduled tasks
Events can specify the execution of SQL code once...
Detailed graphic explanation of sqlmap injection
Table of contents 1. We found that this website m...
js realizes the magnifying glass effect of shopping website products
This article shares the specific code of js to ac...
How to insert pictures into HTML pages and add map index examples
1. Image formats supported on the WEB: GIF: can s...
Detailed explanation of the simple use of MySQL query cache
Table of contents 1. Implementation process of qu...
Do you know how to use vue-cropper to crop pictures in vue?
Table of contents 1. Installation: 2. Use: 3. Bui...
MySQL 8.0.20 installation and configuration method graphic tutorial
MySQL download and installation (version 8.0.20) ...
Summary of changes in the use of axios in vue3 study notes
Table of contents 1. Basic use of axio 2. How to ...
MySQL 5.7.17 compressed package installation-free configuration process diagram
There are two versions of MySQL database manageme...
Learn one minute a day to use Git server to view debug branches and fix them
Debug branch During the normal development of a p...
How to modify the default network segment of Docker0 bridge in Docker
1. Background When the Docker service is started,...
JavaScript imitates Jingdong carousel effect
This article shares the specific code for JavaScr...
Solution to the error when installing Docker on CentOS version
1. Version Information # cat /etc/system-release ...
Detailed use cases of vue3 teleport
Official Website https://cli.vuejs.org/en/guide/ ...
Detailed explanation of the principles and implementation methods of Mysql account management
This article uses examples to illustrate the prin...