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
Web Design Tutorial (1): Steps and Overall Layout
<br /> Note: All texts, except those indicat...
How to handle concurrent updates of MySQL data
Will UPDATE lock? Will the SQL statement be locke...
Two ways to visualize ClickHouse data using Apache Superset
Apache Superset is a powerful BI tool that provid...
Vue Basic Tutorial: Conditional Rendering and List Rendering
Table of contents Preface 1.1 Function 1.2 How to...
Mysql splits string into array through stored procedure
To split a string into an array, you need to use ...
Analysis of the Linux input subsystem framework principle
Input subsystem framework The linux input subsyst...
How to connect to MySQL remotely through Navicat
Using Navicat directly to connect via IP will rep...
Vue achieves seamless carousel effect
This article shares the specific code of Vue to a...
How to convert JavaScript array into tree structure
1. Demand The backend provides such data for the ...
Examples of using the Li tag in HTML
I hope to align the title on the left and the dat...
How to do a good refactoring is not only refactoring the code but also refactoring life
It is really not easy to do a good reconstruction...
Implementation code of front-end HTML skin changing function
50 lines of code to change 5 skin colors, includi...
Several common CSS layouts (summary)
Summary This article will introduce the following...
Four ways to modify the default CSS style of element-ui components in Vue
Table of contents Preface 1. Use global unified o...
Detailed explanation of vite2.0 configuration learning (typescript version)
introduce You Yuxi’s original words. vite is simi...