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


相关文章
|
前端开发
Layui 内置方法 - layer.load(加载层)
Layui 内置方法 - layer.load(加载层)
2736 0
|
2月前
|
前端开发 容器
CSS-Flex布局
CSS Flex弹性布局是移动端/响应式开发的核心方案,通过「容器+项目」模型实现灵活空间分配与对齐。本文详解核心概念、容器/项目属性,并结合评论框代码实战拆解,助新手快速掌握justify-content、align-items、flex:1等关键用法。(239字)
408 5
|
小程序 前端开发 API
【微信小程序】TypeError: Cannot read property ‘get‘ of undefined & Error: MiniProgramError
【微信小程序】TypeError: Cannot read property ‘get‘ of undefined & Error: MiniProgramError
|
Docker 容器
docker --cpus 详解
docker --cpus 详解
几个经常用到的angular路由Router、ActivatedRoute 知识点:嵌套路由、路由跳转、路由传参、路由参数获取
几个经常用到的angular路由Router、ActivatedRoute 知识点:嵌套路由、路由跳转、路由传参、路由参数获取
几个经常用到的angular路由Router、ActivatedRoute 知识点:嵌套路由、路由跳转、路由传参、路由参数获取
|
JavaScript 前端开发 开发者
Layui layer 弹出层的使用【笔记】
本文介绍了Layui的layer弹出层组件的使用方法,包括如何通过在线CDN引入Layui的CSS和JS文件,以及如何使用layer.open(options)开启弹出层和layer.close(index)关闭弹出层。文章详细说明了弹出层类型的分类、options选项的参数配置,以及回调函数的使用。通过示例代码,展示了如何创建不同类型的弹出层,包括对话信息框、页面层、内联框架层、加载层和tips层。
echarts如何设置滚动条(dataZoom),实现横向或纵向滚动
echarts如何设置滚动条(dataZoom),实现横向或纵向滚动
echarts如何设置滚动条(dataZoom),实现横向或纵向滚动
|
存储 数据库
layui 富文本layedit编辑、存储和回显
layui 富文本layedit编辑、存储和回显
1481 0
|
前端开发 JavaScript
使用 JavaScript 获取 URL 参数的详细指南
【2月更文挑战第26天】
15734 2
使用 JavaScript 获取 URL 参数的详细指南
|
网络虚拟化 Windows
Windows 10 Windows1011出现0x80190001错误解决方案! Windows微软账户无法登录问题 Microsoft Store商店用不了
Windows 10 Windows1011出现0x80190001错误解决方案! Windows微软账户无法登录问题 Microsoft Store商店用不了
1170 1