Home > Web Front-end > Layui Tutorial > How to add icon in layui

How to add icon in layui

藏色散人
Release: 2020-11-13 10:28:36
Original
6545 people have browsed it

How to add icons in layui: First open the iconfont official website and select the font icon library you like; then click "Download to local" in the project, and copy the decompressed file to the local project; finally, download it locally Just introduce the relevant html code into the project.

How to add icon in layui

Recommendation: "layUI Tutorial"

The font icons of layui2.0 and previous versions cannot meet the needs of the project , whose icons come from Alibaba www.iconfont.cn, so I manually enriched the project font icon library, which is recorded as follows.

1. Add font icons to the shopping cart

Open www.iconfont.cn, select the font icon library you like, and add it to the "Library" (i.e. font shopping cart) icon), as shown in the figure belowHow to add icon in layui

2. Add the icon to the project

Click the "Shopping Cart Icon" on the right, and then add the selected font icon Add to project. It is recommended to create a new project to facilitate future expansion.

3. Download and introduce the code

In the project, click "Download to local", then copy the decompressed file to the local project and install it locally Just introduce the iconfont.css file.

4. Select the font icon

to open the demo_unicode.html file in the browser. Follow the file prompts and introduce the relevant html code into the local project.
Such as 3

If it is layui, for a beautiful style, you can modify the css code of iconfont.css as follows

.iconfont{font-family:"iconfont" !important;
font-style:normal;
-webkit-font-smoothing: antialiased;
display: inline-block;
-webkit-text-stroke-width: 0.2px;
font-size:14px;
transition: all 0.4s linear 0s;-o-transition: all 0.2s linear 0s;-moz-transition: all 0.2s linear 0s;
}
Copy after login

5 . If you need to add font icons in the future, repeat the above steps, directly download the project code from Alibaba iconfont to your local area, overwrite the previous code (except iconfont.css), and you can use the new font icon.

The above is the detailed content of How to add icon in layui. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template