laypage 的 prev 参数支持 html 字符串,推荐使用 layui 自带图标;需确保图标资源加载、添加 vertical-align 和 margin 样式对齐、扩大点击区域、保持 prev/next 风格一致,并手动处理缩放与禁用状态样式。

laypage 的 prev 参数支持 HTML 字符串
直接把图标 HTML 写进 prev 配置项就行,Layui 会原样渲染。不是所有图标都能显示,得确保图标字体(如 font-awesome、iconfont)或 SVG 已加载且可用。
-
prev: '<i class="layui-icon"></i> 上一页'—— 使用 Layui 自带图标(推荐,免额外引入) -
prev: '<svg><use href="#arrow-left"></use></svg> 上一页'—— 用内联 SVG,需提前定义 symbol -
prev: '<i class="fa fa-chevron-left"></i> Prev'—— 依赖 Font Awesome,必须确认 CSS 已加载
注意:空格要保留,否则文字和图标挤在一起;<i></i> 标签不能省略闭合,否则可能被浏览器截断。
图标对齐和间距经常错位
默认情况下,图标和文字是 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 容器才是实际可点击区域。所以别只给 <i></i> 加样式,而是扩大整个按钮的响应范围:
- 给
.layui-laypage-prev加padding: 0 12px !important; - 避免设置
width或min-width,否则可能压扁文字 - 如果图标 + 文字总长超过按钮默认宽度,用
white-space: nowrap防止换行
next 和 prev 要保持风格一致
单独改 prev 容易造成左右不对称。建议同时处理 next:
prev: '<i class="layui-icon"></i> 上一页'-
next: '下一页 <i class="layui-icon"></i>'(注意方向图标 Unicode 不同)
图标顺序(左图标右文字 / 左文字右图标)要统一,否则视觉节奏被打乱。另外, 是 Layui 的「右箭头」,别误用成 (左箭头)两次。
真正麻烦的不是加图标,而是图标在不同分辨率下缩放、在 disabled 状态下灰度处理、以及和主题色联动——这些都得靠 CSS 手动补全,Layui 不自动适配。











