如何使用HTML、Bootstrap 5在搜索栏占位符中添加Glyphicon？

网站现有搜索栏截图

前置说明 #

Bootstrap 5 官方已经移除了内置的Glyphicon图标库，如果你坚持要用Glyphicon的搜索图标，需要单独在项目里引入Glyphicon的样式资源；日常开发更推荐用Bootstrap配套的官方图标库，适配成本更低，不需要额外调整兼容逻辑。

具体实现代码 #

核心逻辑很简单：用相对定位+绝对定位的组合，把图标固定在输入框左侧、和占位符文字齐平的位置，同时给输入框左侧留足够的内边距，避免输入的文字和图标重叠。

方案1：使用Bootstrap官方图标（推荐） #

• 先在页面头部引入Bootstrap Icons的样式资源
• 写入如下搜索框结构代码：

<div class="position-relative">
  <i class="bi bi-search position-absolute top-50 start-0 translate-middle-y ms-3 text-muted"></i>
  <input type="search" class="form-control ps-5" placeholder="请输入搜索内容">
</div>

用到的Bootstrap类作用说明：

• 外层div加position-relative：作为图标绝对定位的参照容器，避免图标定位偏移到页面其他位置
• 图标上的样式类：
  • position-absolute：开启绝对定位
  • top-50+translate-middle-y：让图标在输入框高度范围内垂直居中
  • start-0+ms-3：让图标贴靠输入框左侧，同时留一点边距不贴死边框
  • text-muted：把图标设置为浅灰色，视觉权重低于输入文字，不会抢焦点
• 输入框加ps-5：给输入框左侧加足够的内边距，保证占位符、用户输入的内容都不会和图标重叠

方案2：使用Glyphicon搜索图标 #

提前引入Glyphicon样式资源后，只需要把上述代码里的图标标签替换成Glyphicon的写法即可，定位逻辑完全通用：

<div class="position-relative">
  <span class="glyphicon glyphicon-search position-absolute top-50 start-0 translate-middle-y ms-3 text-muted"></span>
  <input type="search" class="form-control ps-5" placeholder="请输入搜索内容">
</div>

如果实际显示的图标和占位符间距不符合你的设计要求，调整ms-*（图标左边距）、ps-*（输入框左侧内边距）的数值即可，数值越大间距越宽。

内容的提问来源于stack exchange，提问作者GAMERSPROGRAM