layui图标用法总结

最新推荐文章于 2025-09-11 02:26:08 发布

原创最新推荐文章于 2025-09-11 02:26:08 发布 · 1.3w 阅读

2 ·

CC 4.0 BY-SA版权

html 同时被 2 个专栏收录

5 篇文章

订阅专栏

layui

4 篇文章

订阅专栏

本文介绍了layui图标的使用方法，包括下载layui.js文件、在HTML页面中引入资源，以及展示上传和下载按钮图标的使用示例，帮助读者快速掌握layui图标的应用。

本文参考官方文档《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%">
		&nbsp;&nbsp;&nbsp;&nbsp;
		<span class="uploadBt" onclick="uploadLog(this,'${logInfo.logName?if_exists}')" >
			<i class="layui-icon layui-icon-upload" style="font-size: 13px; color: #FFFFFF;"></i>&nbsp;上传
		</span>
		&nbsp;&nbsp;&nbsp;&nbsp;
		<span class="downloadBt" onclick="downloadLog('${logInfo.logName?if_exists}')" >
			<i class="layui-icon layui-icon-download-circle" style="font-size: 14px; color: #FFFFFF;"></i>&nbsp;下载
		</span>
	</div>
 </body>
</html>