1. 简介
layui是一款轻量级的前端UI框架，可以用来快速构建漂亮、高效的Web界面。与其他框架相比，layui具有易用性、代码轻量、功能强大、兼容性好等优点，因此深受广大开发者喜爱。在layui中，icon是非常重要的一部分，可以让我们的网站更加美观和易读。接下来，我们将介绍如何在layui中添加icon。
2. 提供的icon
在layui中，提供了非常丰富的icon，这些icon可以用来表示很多不同的意思。下面是一些常用的icon：
用户
收藏
编辑
删除
刷新
下载
如果需要使用其他icon,可以在layui官网中查找。如果在官网中找不到想要的icon，可以自己制作。下面介绍如何自己制作icon。
3. 制作自定义icon
在layui中，可以使用fontclass和svg两种方式来制作icon。这里我们以fontclass方式为例。
第一步：选择一个icon编辑器，这里我们推荐icomoon。
第二步：打开icomoon官网，注册一个账号，登录后点击“+new project”创建一个新项目。
第三步：点击“Import Icons”按钮，将本地的svg图标上传到icomoon中。
<i class="icon icon-xxx"></i>注意：上面的“icon-xxx”中的“xxx”要替换成自己的图标名称。
3.2 使用svg制作icon
使用svg制作icon需要用到一些专业软件，这里我们不再详细介绍。如果需要使用svg方式制作icon，可以在官网中查找相关的教程。
4. 添加icon
在layui中，添加icon非常简单，只需要在对应的HTML标签中添加“layui-icon”类和icon名称即可。
<i class="layui-icon layui-icon-user"></i>上面的代码中，“layui-icon”类表示使用layui的icon， “layui-icon-user”表示要使用用户icon。
如果要设置icon的颜色和大小，可以通过CSS样式进行设置。例如：
<i class="layui-icon layui-icon-user" style="font-size:24px;color:red"></i>上面的代码中，“font-size”和“color”属性用来设置icon的大小和颜色。
5. 总结
通过本篇文章的介绍，我们学习了如何在layui中添加和自定义icon。在实际开发过程中，icon不仅美观、易读，而且可以提升用户的交互体验，因此我们在使用layui的时候一定要充分利用好icon。