如何为搜索栏添加左侧非功能性放大镜图标？

问题核心原因 #

图标出现在页面最右侧且未嵌入搜索栏，是因为：

1. 图标用绝对定位时，父元素没设相对定位，导致它以整个页面为定位基准
2. CSS里设置了right: 0，直接把图标定位到页面右侧
3. 缺少Font Awesome图标库的引入，图标本身可能无法正常显示

修复方案 #

1. 调整HTML结构

把图标和搜索框放在同一个容器内，让图标能基于搜索栏定位：

<div class="search-container">
  <div class="icon">
    <i class="fas fa-search"></i>
  </div>
  <input type="text" placeholder="输入搜索内容...">
</div>

2. 修改CSS样式

/* 引入字体和Font Awesome图标库 */
@import url('https://fonts.googleapis.com/css2?family=Poppins');
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css');

/* 搜索栏容器：设置相对定位，作为图标的定位基准 */
.search-container {
  position: relative;
  width: 570px;
}

/* 图标样式：调整到搜索栏左侧，匹配搜索栏高度 */
.icon {
  height: 100%;
  width: 55px;
  line-height: inherit;
  position: absolute;
  top: 0;
  left: 0; /* 把right改为left，移到容器左侧 */
  text-align: center;
  font-size: 20px;
  color: #666; /* 可选：设置图标灰度，更贴合搜索栏风格 */
}

/* 搜索框样式：添加左侧内边距，避免内容被图标遮挡 */
input {
  width: 100%;
  padding: 15px 15px 15px 65px; /* 左侧留足图标+间距的空间 */
  font-size: 11pt;
  border: 1px solid #e0e0e0;
  border-radius: 28px; /* 可选：添加圆角优化视觉 */
  box-sizing: border-box; /* 确保padding不超出容器宽度 */
  height: 55px;
}

关键修改说明 #

• 给search-container加position: relative：让绝对定位的图标以该容器为基准，而非整个页面
• 图标right: 0改left: 0：将图标从页面右侧移到搜索栏左侧
• 输入框加padding-left: 65px：防止输入内容和图标重叠
• 引入Font Awesome：确保fas fa-search图标能正常渲染
• box-sizing: border-box：保证输入框的padding不会额外增加宽度

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