如何给HTML输入框添加实用的前缀图标？

本文共计953个文字，预计阅读时间需要4分钟。

在HTML的input元素上直接设置背景图，是兼容性最佳、代码最少的方案，适合用于静态图标（如用户、锁、邮箱等）。关键不是能不能加，而是padding和background-position必须配套使用，否则文字会遮住图标或图标偏位。

• background-image: url(./icon-user.png) —— 路径必须可访问，推荐用相对路径或 CDN 地址
• background-position: 10px center —— 横向偏移量（如 10px）要和 padding-left 值匹配，建议统一设为 36px（图标宽 + 间距）
• background-repeat: no-repeat 必须写，否则小图标会横向平铺
• padding-left: 36px 是硬性要求，不加就会文字顶到边框，甚至遮挡图标
• IE11 及更早版本不支持 background-size，若需适配，得用固定尺寸图标或放弃缩放

用伪元素 ::before 需要父容器相对定位

想用 Font Awesome 或 SVG 图标（比如 <i class="fa fa-user"></i>），就不能直接塞进 input——它是替换元素，不支持伪元素。必须包一层 <div class="input-with-icon"></div>，否则 ::before 会挂空。