【Layui】02 图标 Icon

官网下载地址：

https://www.layui.com/

学习参考：

https://www.bilibili.com/video/BV1ct411n7SN

 

【Layui的文件结构】

我们只需要这个文件目录放到工程中去

目录结构：

css 样式文件
font 字体样式
image 图片样式
lay layui的核心模块
- - - - -
layui.all.js 已经把模块封装好了，不需要声明，直接使用
layui.js  使用模块需要声明

【学习目标】

- - - - - - - - - - - -
1、图标
2、按钮
3、导航菜单
4、选项卡
5、进度条
6、布局 & 面板
7、徽章（消息气泡）
8、时间轴
9、动画
- - - - - - - - - - - -
1、颜色选择器
2、滑块
3、评分
4、轮播图
5、代码修饰器
6、时间日期选择器
- - - - - - - - - - - -
1、表单元素
2、表单对象
3、弹出层
4、表格
5、文件上传
6、Dtree 树形组件

 

创建普通JavaEE项目并导入Layui组件

 

每个页面都需要引入资源：

<link rel="stylesheet" href="${pageContext.request.contextPath}/resource/layui/css/layui.css">

<script src="${pageContext.request.contextPath}/resource/layui/layui.js"></script>

注意引入位置和脚本顺序

01、【图标 Icon】

使用方式一：使用字符实体配合类属性layui-icon实现

使用字符实体的方式必须被元素作为容器装填，

且class属性设置为“layui-icon”才能有效！

<i class="layui-icon">&#xe68f;</i>

&可用于对这些字符实体进行转义处理，浏览器将解析为文本值



【注意图标的字符加了&】

 

使用方式二：使用类属性的赋值实现

<div class="layui-icon layui-icon-cellphone"></div>

手机图标：

也就是layui-icon的类属性基础上再添加附加属性

 

【更多样式】

在官方的文档手册中提供了非常多的样式可以选择：

https://www.layui.com/doc/element/icon.html

 

在视频中的CSS不能被访问，自己手敲：

        <style type="text/css">
            .site-title {
                margin : 30px 0 20px;
            }
            .site-title fieldset {
                border : none;
                padding : 0;
                border-top : 1px solid #eee;
            }
            .site-title fieldset legend {
                margin-left : 20px;
                padding : 0 10px;
                font-size : 22px;
                font-weight: 300;
            }

            .site-doc-icon {
                margin-bottom: 50px;
                font-size: 0;
            }
            .site-doc-icon li {
                display : inline-block;
                vertical-align : middle;
                width : 127px;
                height : 105px;
                line-height : 25px;
                padding : 20px 0;
                margin-right : -1px;
                margin-bottom : -1px;
                border: 1px solid #e2e2e2;
                font-size: 14px;
                text-align: center;
                color: #666;
                transition: all .3s;
                -webkit-transition: all .3s;
            }
            .site-doc-anim li {
                height: auto;
            }
            .site-doc-icon li .layui-icon{
                display: inline-block;
                font-size: 36px;
            }
            .site-doc-icon li .doc-icon-name,
            .site-doc-icon li .doc-icon-code {
                color: #c2c2c2;
            }
            .site-doc-icon li .doc-icon-fontclass {
                height: 40px;
                line-height: 20px;
                padding: 0 5px;
                font-size: 13px;
                color : #333;
            }
            .site-doc-icon li:hover {
                background: #F2F2F2;
                color: #000;
            }
        </style>