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
Vue.js implements calendar function
This article example shares the specific code of ...
CSS box hide/show and then the top layer implementation code
.imgbox{ width: 1200px; height: 612px; margin-rig...
Building an image server with FastDFS under Linux
Table of contents Server Planning 1. Install syst...
Detailed explanation of Vue router routing guard
Table of contents 1. Global beforeEach 1. Global ...
Nginx Location Configuration Tutorial from Scratch
Basics The matching order of location is "ma...
Detailed explanation of the process of nginx obtaining the real source IP after passing through multiple layers of proxy
question Nginx takes $remote_addr as the real IP ...
View disk IO in Linux and find out the processes that occupy high IO read and write
Background - Online Alert An online server issued...
Things to note when writing self-closing XHTML tags
The img tag in XHTML should be written like this:...
Faint: "Use web2.0 to create standard-compliant pages"
Today someone talked to me about a website develo...
Hidden overhead of Unix/Linux forks
Table of contents 1. The origin of fork 2. Early ...
Pure CSS to implement iOS style open and close selection box function
1 Effect Demo address: https://www.albertyy.com/2...
Steps to install MySQL on Windows using a compressed archive file
Recently, I need to do a small verification exper...
Three ways to use CSS inline styles, embedded styles, and external reference styles
A simple example of how to use the three methods ...
Detailed explanation of multi-version concurrency control of large objects in MySQL
MySQL 8.0: MVCC for Large Objects in InnoDB In th...
Using vue3+threejs to imitate the iView official website big wave special effects example
Table of contents Preface 1. Rendering 2. Code 3....