如何在输入框占位符中使用Font Awesome 5图标？旧方法失效求助

嘿，我完全懂你碰到的这个坑——Font Awesome 5彻底重构了字体体系，之前那种直接指定font-family: FontAwesome的老方法自然就失效了。别慌，下面给你几个适配FA5的靠谱解决方案，按需选就行：

FA5把字体拆分成了不同的分类（免费/付费、实心/常规/品牌），字体族名称不再是单一的FontAwesome，你需要根据图标样式指定正确的字体族和字重：

首先是HTML代码：

<input type="text" placeholder="&#xf167;" class="fa-placeholder-input">

然后是对应的CSS：

.fa-placeholder-input {
  /* 根据图标类型选择字体族 */
  /* 实心图标（Free版本） */
  font-family: "Font Awesome 5 Free", sans-serif;
  font-weight: 900; /* 实心图标必须加这个权重，否则不显示 */
  
  /* 如果是品牌图标，比如GitHub，改成下面的：
  font-family: "Font Awesome 5 Brands", sans-serif;
  font-weight: 400;
  */
  
  /* 如果是常规图标（部分免费）：
  font-family: "Font Awesome 5 Free", sans-serif;
  font-weight: 400;
  */
}

⚠️ 注意：这个方法会让输入框里的文本也使用Font Awesome字体，如果你的输入文本是中文或其他非英文内容，可能会出现显示问题，所以更推荐下面的伪元素方法。

这个方法通过在输入框外部套一个容器，用<i>标签放置图标，既不影响输入文本的字体，又能精准控制图标样式：

HTML代码：

<div class="input-icon-wrapper">
  <input type="text" placeholder="搜索内容...">
  <i class="fas fa-search"></i> <!-- 直接用FA的图标标签 -->
</div>

CSS代码：

.input-icon-wrapper {
  position: relative;
  display: inline-block;
  /* 可以根据需求调整宽度 */
  width: 300px;
}

.input-icon-wrapper input {
  width: 100%;
  padding-left: 2.2rem; /* 给图标留出左侧空间 */
  padding: 0.5rem 1rem 0.5rem 2.2rem;
  box-sizing: border-box;
  border: 1px solid #ddd;
  border-radius: 4px;
}

.input-icon-wrapper i {
  position: absolute;
  left: 0.8rem;
  top: 50%;
  transform: translateY(-50%);
  color: #999; /* 图标颜色，和占位符文本一致 */
  font-size: 1rem;
}

这个方法的优势：

• 输入文本的字体不受FA字体影响，兼容性更好
• 图标位置、颜色、大小可以自由调整
• 支持所有FA5的图标样式，不需要手动写Unicode编码

如果你的项目用的是Font Awesome 5的SVG版本，也可以把SVG图标转成Data URI作为占位符的背景图：

.custom-placeholder::placeholder {
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M505 442.7L405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 216 0S16 93.1 16 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM216 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z"/></svg>') no-repeat left center;
  background-size: 1rem;
  padding-left: 1.5rem;
  color: #999;
}

你可以在Font Awesome官网找到对应图标的SVG代码，转成UTF-8格式的Data URI即可使用。

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