How to add icon in layui

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.

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 below

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;
}

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!