layui图标出现方框问题解决

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

一、软件版本

• 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');
}
           

四、结果