技术问询：如何在textarea的占位符前添加图标？

嘿，这个需求挺常见的，我给你两种实用的实现思路，你可以根据自己的场景选：

方案1：纯CSS伪元素实现（无需修改现有HTML结构） #

这种方法不用动你现有的HTML代码，靠CSS伪元素就能把图标放到占位符前方。不管用第三方图标库（比如Font Awesome）还是Unicode字符图标都能实现：

示例代码（以Font Awesome为例） #

首先确保你已经在页面头部引入了Font Awesome的CSS（比如官方CDN），然后添加以下样式：

.user-input {
  position: relative; /* 为图标定位提供基准容器 */
}

.share {
  padding-left: 2.5rem; /* 给左侧图标预留足够空间，可根据图标大小调整 */
  width: 100%;
  min-height: 100px;
  box-sizing: border-box; /* 避免内边距撑大输入框 */
  /* 你可以自定义边框、圆角、字体等其他样式 */
}

/* 生成图标伪元素 */
.user-input::before {
  content: "\f044"; /* Font Awesome编辑图标的Unicode代码，可替换成你需要的图标 */
  font-family: "Font Awesome 6 Free";
  font-weight: 900; /* 确保图标正常显示 */
  position: absolute;
  left: 0.8rem;
  top: 0.8rem;
  color: #999; /* 和占位符颜色保持一致，视觉更协调 */
}

如果不想用第三方图标库，直接用Unicode表情图标也可以，把上面的伪元素代码换成：

.user-input::before {
  content: "📝"; /* 替换成你需要的Unicode图标 */
  position: absolute;
  left: 0.8rem;
  top: 0.8rem;
  color: #999;
}

方案2：调整HTML结构（更灵活支持自定义图标） #

如果需要用本地SVG或者自定义图片图标，调整HTML结构会更灵活，也更容易维护：

修改后的HTML #

<div class="center-part"> 
  <div class="user-input"> 
    <!-- 这里可以替换成<img>或者<svg>标签，比如 <img src="your-icon.svg" class="input-icon"> -->
    <span class="input-icon">📝</span>
    <textarea class="share" name="share" type="text" placeholder="分享你的想法..."> </textarea> 
  </div> 
</div>

对应的CSS #

.user-input {
  display: flex;
  align-items: flex-start; /* 让图标和输入框顶部对齐 */
  gap: 0.5rem; /* 图标和输入框之间的间距 */
}

.input-icon {
  color: #999;
  padding-top: 0.5rem; /* 和输入框的内边距对齐，保持视觉一致 */
  /* 如果是图片/SVG，可以设置width和height属性 */
}

.share {
  flex: 1; /* 让输入框占满剩余容器空间 */
  min-height: 100px;
  resize: vertical; /* 允许用户垂直调整输入框高度 */
  /* 自定义其他样式 */
}

小提示 #

记得给textarea加上实际的占位符文本（比如placeholder="分享你的想法..."），这样图标和占位符文本的搭配会更清晰~

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