一、软件版本
- OS: Win10
- layui: 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'); }
四、结果