使用 layui 在输入框里添加自定义图标，layui 官网文档没有提供相关内容，但可以通过下面方式实现
1、准备好要使用的自定义图标
如Iconfont-阿里巴巴矢量图标库/
将下载好的图标放到项目目录
笔者这里下载一张 32×32 的 png 图片
2、自定义 css 属性
.search {background: url(img/search.png) no-repeat 5px center;padding-left: 40px;}
background 属性定义背景指向自定义图标的图片文件
padding-left 属性定义图标占用输入框的长度
3、为输入框添加自定义的 css 属性
完整代码如下
<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><link rel="stylesheet" href="layui/css/layui.css" rel="stylesheet" /><script src="layui/layui.all.js"></script><style type="text/css">.top {margin-top: 50px;}.search {background: url(img/search.png) no-repeat 5px center;padding-left: 40px;}</style></head><body><div class="layui-container top"> <div class="layui-row"><input type="text" class="layui-input search" /></div></div> </body></html>
4、运行效果
如下图
至此完
