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
JavaScript adds prototype method implementation for built-in objects
The order in which objects call methods: If the m...
Use nginx to configure domain name-based virtual hosts
1. What is a virtual host? Virtual hosts use spec...
Detailed explanation of component development of Vue drop-down menu
This article example shares the specific code for...
How to import, register and use components in batches in Vue
Preface Components are something we use very ofte...
Vue local component data sharing Vue.observable() usage
As components become more detailed, you will enco...
Detailed explanation of how to copy and backup docker container data
Here we take the Jenkins container as an example ...
MySql uses skip-name-resolve to solve the problem of slow external network connection client
The MySQL built on Tencent Cloud is always very s...
Detailed explanation of the reasons why MySQL connections are hung
Table of contents 1. Background Architecture Prob...
Docker View JVM Memory Usage
1. Enter the host machine of the docker container...
Shell script settings to prevent brute force ssh
The shell script sets access control, and the IP ...
iFrame is a great way to use it as a popup layer to cover the background
I have been working on a project recently - Budou ...
Example of Vue transition to achieve like animation effect
Table of contents Results at a Glance Heart Effec...
Detailed process of using Vscode combined with docker for development
Preface Using Docker and VS Code can optimize the...
How to configure pseudo-static and client-adaptive Nginx
The backend uses the thinkphp3.2.3 framework. If ...
Simply understand the writing and execution order of MySQL statements
There is a big difference between the writing ord...