layui图标出现方框问题解决

简介: layui图标出现方框问题解决

一、软件版本


  • OS: Win10
  • layui: 2.6.5
  • 浏览器:Chrome 90.0.4430.212(正式版本) (64 位)


二、问题描述


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

1666149802879.jpg

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

1666149821729.jpg


三、解决思路


1. 上开发者工具


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

1666149855158.jpg


2. 定位错误位置


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

1666149867648.jpg


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


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

1666149880734.jpg

修改后的文件为:


/** 图标字体 **/
@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');
}

四、结果


1666149914391.jpg


相关文章
|
3月前
|
JavaScript 前端开发 数据格式
LayUI前框框架普及版(三)
LayUI前框框架普及版
122 0
|
9月前
|
前端开发 定位技术
layer弹框右上角关闭按钮的样式
layer弹框右上角关闭按钮的样式
157 0
|
JavaScript 前端开发
layui实现点击按钮全屏
layui实现点击按钮全屏
450 0
|
3月前
|
移动开发 JavaScript 小程序
uView Collapse 折叠面板
uView Collapse 折叠面板
98 0
|
1月前
|
前端开发 JavaScript
Elementplus如何使面包屑往左边移动,右边头像下拉菜单如何写,下拉菜单如何靠中一点,下拉菜单出现文字不对齐怎么办,如何设置鼠标样式,如何使用阿里妈妈icon,如何点击icon全屏
Elementplus如何使面包屑往左边移动,右边头像下拉菜单如何写,下拉菜单如何靠中一点,下拉菜单出现文字不对齐怎么办,如何设置鼠标样式,如何使用阿里妈妈icon,如何点击icon全屏
Elementplus如何使面包屑往左边移动,右边头像下拉菜单如何写,下拉菜单如何靠中一点,下拉菜单出现文字不对齐怎么办,如何设置鼠标样式,如何使用阿里妈妈icon,如何点击icon全屏
|
3月前
|
JavaScript 前端开发 索引
LayUI前框框架普及版(二)
LayUI前框框架普及版
71 0
|
3月前
|
前端开发 JavaScript 容器
LayUI前框框架普及版(一)
LayUI前框框架普及版
137 0
|
8月前
|
算法 Java
layui实现左侧导航树形菜单
layui实现左侧导航树形菜单
373 0
layui实现左侧导航树形菜单
|
8月前
|
前端开发 Java 数据库
Layui之动态树 左侧树形菜单栏 详细全面
Layui之动态树 左侧树形菜单栏 详细全面
264 0
|
9月前
layui图标大全
layui图标大全