layui图标出现方框问题解决

您所在的位置：网站首页 › 表格的图标显示问题 › layui图标出现方框问题解决

layui图标出现方框问题解决

2023-10-15 21:46| 来源: 网络整理| 查看: 265

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'); } 四、结果

在这里插入图片描述

【本文地址】

layui图标出现方框问题解决

layui图标出现方框问题解决

今日新闻

推荐新闻