laypage的prev参数是支持HTML字符串的哦,这里推荐大家使用Layui自带的图标。不过呢,要注意确保图标资源加载正常,并且添加vertical-align和margin样式来实现对齐,同时扩大点击区域,还要保持prev/next的风格一致哦。另外,缩放与禁用状态的样式也需要手动处理呢。

laypage 的 prev 参数支持 HTML 字符串
直接把图标 HTML 写进 prev 配置项就行,Layui 会原样渲染。不是所有图标都能显示,得确保图标字体(如 font-awesome、iconfont)或 SVG 已加载且可用。
prev: ' 上一页'—— 使用 Layui 自带图标(推荐,免额外引入)prev: ' 上一页'—— 用内联 SVG,需提前定义 symbolprev: ' Prev'—— 依赖 Font Awesome,必须确认 CSS 已加载
注意:空格要保留,否则文字和图标挤在一起; 标签不能省略闭合,否则可能被浏览器截断。
图标对齐和间距经常错位
默认情况下,图标和文字是 inline 元素,容易上下偏移或贴得太紧。需要加一行 CSS 强制垂直居中并留白:
.layui-laypage-prev .layui-icon,
.layui-laypage-prev i,
.layui-laypage-prev svg {
vertical-align: middle !important;
margin-right: 4px !important;
}
如果用了自定义字体图标(比如 iconfont),还要确认其 font-size 和 line-height 与文字匹配,否则图标会显得过大或过小。
点击区域变小导致难点击
仅仅依靠图标本身来响应点击并不稳妥——图标元素的宽度较窄,用户很容易点击落空。在Layui渲染之后,.layui-laypage-prev容器才是实际的可点击区域。因此,不要仅仅给添加样式,而是要扩大整个按钮的响应范围:
- 给
.layui-laypage-prev加padding: 0 12px !important; - 避免设置
width或min-width,否则可能压扁文字 - 如果图标 + 文字总长超过按钮默认宽度,用
white-space: nowrap防止换行
next 和 prev 要保持风格一致
单独改 prev 容易造成左右不对称。建议同时处理 next:
prev: ' 上一页'next: '下一页 '(注意方向图标 Unicode 不同)
图标顺序(左图标右文字 / 左文字右图标)要统一,否则视觉节奏被打乱。另外, 是 Layui 的「右箭头」,别误用成 (左箭头)两次。
真正麻烦的不是加图标,而是图标在不同分辨率下缩放、在 disabled 状态下灰度处理、以及和主题色联动——这些都得靠 CSS 手动补全,Layui 不自动适配。
