Layui标,layui标显示异常

layui图标出现方框问题解决 一、软件版本二、问题描述三、解决思路1. 上开发者工具2. 定位错误位置3. 修改图标加载的相对文件路径 四、结果

一、软件版本 OS: Win10layui: 2.6.5浏览器：Chrome 90.0.4430.212（正式版本） （64 位） 二、问题描述

当在本地开发网页时，引用layui框架样式表和js，目录结构如下图所示。

加载layui的日期控件时，出现如下图所示的界面。日期前进和后退的按钮变成了方框。

三、解决思路 1. 上开发者工具

F12打开谷歌浏览器开发者工具，按照下图依次点击，能够看到出现问题的是lay.css样式表没有加载到字体图标。

2. 定位错误位置

点击任意一处错误提示地方，右侧Headers面板中发现加载字体图标的文件路径错误。直接跳过了项目所在的文件夹，到了项目的父级文件夹，而父级文件夹是桌面。因此加载不到图标字体。

3. 修改图标加载的相对文件路径

因此将lay.css样式表中字体图标出现的路径修改为当前文件夹——.即可。

修改后的文件为：

/** 图标字体 **/@font-face { font-family: 'layui-icon'; src: url('./font/iconfont.eot?v=256'); src: url('./font/iconfont.eot?v=256#iefix') format('embedded-opentype'), url('./font/iconfont.woff2?v=256') format('woff2'), url('./font/iconfont.woff?v=256') format('woff'), url('./font/iconfont.ttf?v=256') format('truetype'), url('./font/iconfont.svg?v=256#layui-icon') format('svg');} 四、结果