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


相关文章
|
前端开发 定位技术
layer弹框右上角关闭按钮的样式
layer弹框右上角关闭按钮的样式
228 0
|
JavaScript 前端开发
layui实现点击按钮全屏
layui实现点击按钮全屏
481 0
|
4月前
|
前端开发 JavaScript
Elementplus如何使面包屑往左边移动,右边头像下拉菜单如何写,下拉菜单如何靠中一点,下拉菜单出现文字不对齐怎么办,如何设置鼠标样式,如何使用阿里妈妈icon,如何点击icon全屏
Elementplus如何使面包屑往左边移动,右边头像下拉菜单如何写,下拉菜单如何靠中一点,下拉菜单出现文字不对齐怎么办,如何设置鼠标样式,如何使用阿里妈妈icon,如何点击icon全屏
Elementplus如何使面包屑往左边移动,右边头像下拉菜单如何写,下拉菜单如何靠中一点,下拉菜单出现文字不对齐怎么办,如何设置鼠标样式,如何使用阿里妈妈icon,如何点击icon全屏
|
11月前
|
前端开发 Java 数据库
Layui之动态树 左侧树形菜单栏 详细全面
Layui之动态树 左侧树形菜单栏 详细全面
464 0
|
前端开发 JavaScript Java
Layui的选项卡及菜单
Layui的选项卡及菜单
156 0
|
前端开发
前端切图|点击按钮div变色
前端切图|点击按钮div变色
51 0
|
Web App开发 iOS开发 容器
CSS3圆角气泡框,评论对话框
CSS3圆角气泡框,评论对话框 body { padding:0; margin:0; font:1em/1.4 Cambria, Georgia, sans-serif; color:#333; background:#fff; }...
743 0
解决layui弹出层点击多次弹出问题
解决layui弹出层点击多次弹出问题