首先去官网下载layui的文件，这是下载文件的目录树
├─css //css目录 │ │─modules //模块css目录（一般如果模块相对较大，我们会单独提取，比如下面三个：） │ │ ├─laydate │ │ ├─layer │ │ └─layim │ └─layui.css //核心样式文件 ├─font //字体图标目录 ├─images //图片资源目录（目前只有layim和编辑器用到的GIF表情） │─lay //模块核心目录 │ └─modules //各模块组件 │─layui.js //基础核心库 └─layui.all.js //包含layui.js和所有模块的合并文件
然后创建项目在webapp下引入layui的文件如图
创建jsp页面，在head中引入layui的css文件,在body中引入jq文件
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>图标</title>
<%--引入css样式--%>
<link rel="stylesheet" href="/layui/css/layui.css">
</head>
<body>
<%--引入js文件--%>
<script src="/layui/layui.all.js"></script>
</body>
</html>
这里我遇到一个坑怪我没注意，按照文档引入之后发现layui的css文件404报错了,一直搜以为是乱码的问题，殊不知可能是IDEA2020的问题这版本bug挺多,但昨天的img里面的href就不用加相对路径名。所以这个路径名要正确
所以正确的引入方式是
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>图标</title>
<%--引入css样式--%>
<link rel="stylesheet" href="${pageContext.request.contextPath}/layui/css/layui.css">
</head>
<body>
<%--引入js文件--%>
<script src="${pageContext.request.contextPath}/layui/layui.js"></script>
<div class="layui-icon"></div>
</body>
</html>
=================================================================
1.Layui的页面元素的图标介绍
使用方法：通过对一个内联元素（一般推荐用 i标签）设定 class="layui-icon"，来定义一个图标，然后对元素加上图标对应的 font-class（注意：layui 2.3.0 之前只支持采用 unicode 字符)，即可显示出你想要的图标，譬如：
<div class="layui-icon"></div>
小tips: 空格 &是&
第二种方式:直接在class后面追加图标对应的class
<div class="layui-icon layui-icon-rate-solid"></div>
