首先去官網下載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>
