1、简介
layui是由国人开发的一款、更多的面向于后端开发人员的轻量级开源的模块化前端 UI 框架。她提供了非常丰富的内置模块和页面元素，简约时尚的风格较为适合开发对网页样式无特殊要求的开发周期短的小型网站。
2、下载
3、环境导入
将下载好的开发包复制进项目中，并导入layui.js、layui.css文件，部分内置模块依赖jQuery，需要时也要导入进来。
<!--本地导入layui.js文件（导js文件用<script ></script>标签）-->
<script type="text/javascript" src="layui/layui.js" ></script>
<!--本地导入layui.css文件（导入css文件用<link />标签）-->
<link rel="stylesheet" type="text/css" href="layui/css/layui.css"/>
4、测试页面元素---字体图标
layui图标并非是图片，而是以字体形式存在，意味着你可以通过css控制文字属性，如 color、font-size，就可以改变图标的颜色和大小。需要什么图标直接去官网查询，粘贴到代码中即可。
示例代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>测试图标</title>
<!--本地导入layui.js文件（导js文件用<script ></script>标签）-->
<script type="text/javascript" src="layui/layui.js" ></script>
<!--本地导入layui.css文件（导入css文件用<link />标签）-->
<link rel="stylesheet" type="text/css" href="layui/css/layui.css"/>
<style>
#div1{
/*上部外边距100px*/
margin-top:100px;
/*内容居中*/
text-align: center;
}
</style>
</head>
<body>
<div id="div1">
<!--通过添加font-class的形式定义图标-->
<i class="layui-icon layui-icon-heart-fill"></i>
<!--通过设置 unicode 来定义图标2.3.0版本以前-->
<i class="layui-icon"></i>
<!--设置图标颜色-->
<i class="layui-icon"style="color: #00F7DE;"></i>
<!--设置图标尺寸-->
<i class="layui-icon"style="font-size: 50px;"></i>
<!--混合使用，属性之间用分号隔开-->
<i class="layui-icon"style="font-size: 40px;color: #009688;"></i>
<!--<span></span>也可以定义图标-->
<span class="layui-icon "></span>
</div>
</body>
</html>
测试效果：
