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

四、結果