本文参考官方文档《layui图标使用官方文档》,建议先看此文章,并结合本文的前两个步骤使用即可
1.下载layui.js相关文档,《layui.js下载》,下载之后里面的内容如下:
只需要把layui文件夹拷贝到自己项目中即可
2.页面引入,在自己要实现文件上传功能的html页面引入下面两个文件:
<script src="${basePath?if_exists}/demp/layui/layui.js" charset="utf-8"></script>
<link rel='stylesheet' href='${basePath?if_exists}/demp/layui/css/layui.css' media="all">
<!-- 注意:如果你直接复制所有代码到本地,上述css路径需要改成你本地的或者是项目里文件的路径 -->
3.本文实现了上传和下载按钮图标的使用,效果如下:
html代码如下(可以通过font-size和color属性定义图标的大小和颜色,具体看下面代码):
<html>
<head>
<title> New Document </title>
<link rel="stylesheet" href="C:\Users\tljj\Desktop\layui-v2.4.5\layui-v2.4.5\layui\css\layui.css" media="all">
<script src="C:\Users\tljj\Desktop\layui-v2.4.5\layui-v2.4.5\layui\layui.js" charset="utf-8"></script>
<!-- 注意:如果你直接复制所有代码到本地,上述css路径需要改成你本地的 -->
<style type="text/css">
.uploadBt {
background:#378D7E;
color:#FFFFFF;
padding: 3px 7px 5px 7px;
font-size:11px;
border-radius:2px 2px 2px 2px;
cursor:pointer;
}
.downloadBt {
background:#EC4E22;
color:#FFFFFF;
padding: 3px 7px 5px 7px;
font-size:11px;
border-radius:2px 2px 2px 2px;
cursor:pointer;
}
</style>
</head>
<body>
<br><br><br>
<div style="width:80%">
<span class="uploadBt" onclick="uploadLog(this,'${logInfo.logName?if_exists}')" >
<i class="layui-icon layui-icon-upload" style="font-size: 13px; color: #FFFFFF;"></i> 上传
</span>
<span class="downloadBt" onclick="downloadLog('${logInfo.logName?if_exists}')" >
<i class="layui-icon layui-icon-download-circle" style="font-size: 14px; color: #FFFFFF;"></i> 下载
</span>
</div>
</body>
</html>