如何在HTML搜索栏中添加Font Awesome图标？图标显示异常求助

默认情况下<input>和<i>都是行内元素，只会并排显示，无法嵌入到输入框内部。通过CSS定位可以轻松把图标放到搜索栏里，以下是修改后的完整代码：

调整后的HTML结构 #

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.2/css/all.min.css" rel="stylesheet"/>
<div class="section-b">
  <div class="search-container">
    <input type="text" placeholder="搜索内容">
    <i class="fa-solid fa-magnifying-glass"></i>
  </div>
</div>

对应的CSS样式 #

.search-container {
  position: relative;
  width: 320px; /* 可根据需求自定义宽度 */
}

.search-container input {
  width: 100%;
  padding: 10px 35px 10px 15px; /* 右侧预留图标空间 */
  box-sizing: border-box;
  border: 1px solid #ddd;
  border-radius: 20px; /* 可选：给搜索栏加圆角 */
  font-size: 14px;
}

.search-container i {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: #888;
  pointer-events: none; /* 避免图标干扰输入框的点击/输入操作 */
}

关键说明 #

• 给父容器设置position: relative，让图标可以基于这个容器做绝对定位
• 输入框的右侧内边距要足够容纳图标，防止输入内容被遮挡
• pointer-events: none确保点击图标区域时，焦点依然落在输入框上

内容的提问来源于stack exchange，提问作者abdul azeez oshoare