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


相关文章
|
JavaScript 前端开发 API
【前端用法】jQuery在线引用地址(全)
【前端用法】jQuery在线引用地址(全)
2677 0
|
前端开发
Layui 内置方法 - layer.load(加载层)
Layui 内置方法 - layer.load(加载层)
2490 0
|
前端开发 数据安全/隐私保护 UED
LayUI之树形菜单(权限管理)
LayUI之树形菜单(权限管理)
516 0
|
消息中间件 存储 监控
自顶向下学习 RocketMQ(十):消息重投和消息重试
生产者在发送消息时,同步消息失败会重投,异步消息有重试,oneway 没有任何保证。消息重投保证消息尽可能发送成功、不丢失,但可能会造成消息重复,消息重复在 RocketMQ 中是无法避免的问题。消息重复在一般情况下不会发生,当出现消息量大、网络抖动,消息重复就会是大概率事件。另外,生产者主动重发、consumer 负载变化也会导致重复消息。
自顶向下学习 RocketMQ(十):消息重投和消息重试
|
存储 数据库
layui 富文本layedit编辑、存储和回显
layui 富文本layedit编辑、存储和回显
1264 0
|
Kubernetes 架构师 Java
史上最全对照表:大厂P6/P7/P8 职业技能 薪资水平 成长路线
40岁老架构师尼恩,专注于帮助读者提升技术能力和职业发展。其读者群中,多位成员成功获得知名互联网企业的面试机会。尼恩不仅提供系统化的面试准备指导,还特别针对谈薪酬环节给予专业建议,助力求职者在与HR谈判时更加自信。此外,尼恩还分享了阿里巴巴的职级体系,作为行业内广泛认可的标准,帮助读者更好地理解各职级的要求和发展路径。通过尼恩的技术圣经系列PDF,如《尼恩Java面试宝典》等,读者可以进一步提升自身技术实力,应对职场挑战。关注“技术自由圈”公众号,获取更多资源。
|
JavaScript 前端开发 Java
input 的 name 属性的作用?(总结)
input 的 name 属性的作用?(总结)
328 0
|
前端开发 JavaScript
使用 JavaScript 获取 URL 参数的详细指南
【2月更文挑战第26天】
14650 2
使用 JavaScript 获取 URL 参数的详细指南
|
JavaScript 前端开发 API
JavaScript基础-事件监听与处理
【6月更文挑战第11天】本文介绍了JavaScript事件驱动编程的核心,包括事件流(捕获、目标、冒泡阶段)和监听方法(DOM Level 0、addEventListener/removeEventListener)。讨论了常见问题和易错点,如内存泄漏、事件委托和阻止默认行为的混淆,并提供了解决策略。通过代码示例展示了事件绑定、事件委托和阻止默认行为的用法,强调理解事件处理机制对于编写高效交互式Web应用的重要性。
893 6