Font Awesome占位符图标仅字体权重≥600显示，求文本非加粗方案

嘿，这个问题我之前升级Font Awesome 5的时候也踩过坑！咱们先搞清楚为啥会这样：Font Awesome 5把免费版的实心图标（就是你用的那个搜索图标）归类到了bold权重（对应font-weight: 900），而常规权重（500这种）的图标只有Pro版才能用。所以你设font-weight:500时，浏览器找不到对应的图标字形，自然就显示不出来了。

要实现「占位符图标加粗、输入文本不加粗、输入时图标自动消失」的需求，给你两个靠谱的解决方案：

方案一：用伪元素单独控制图标（推荐） #

这个方法能完全分离图标和输入文本的样式，兼容性也更好，还能完美模拟占位符消失的效果：

HTML代码 #

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">

<!-- 用容器包裹输入框，方便加伪元素 -->
<div class="search-box">
  <input type="text" placeholder="Location">
</div>

CSS代码 #

.search-box {
  position: relative;
  display: inline-block;
}

/* 伪元素实现图标 */
.search-box::before {
  content: "\f002"; /* 搜索图标的Unicode，和你用的是同一个 */
  font-family: 'Font Awesome 5 Free';
  font-weight: 900; /* 必须设900才能显示免费版实心图标 */
  color: #777;
  font-size: 18px;
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
}

/* 输入框样式：文本不加粗 */
.search-box input {
  font-family: Arial, sans-serif;
  font-weight: 500;
  color: #777;
  font-size: 18px;
  padding-left: 35px; /* 给图标留出空间，避免文字覆盖 */
  border: 1px solid #eee;
  border-radius: 4px;
  padding: 8px 12px;
}

/* 聚焦时隐藏图标，模拟占位符消失效果 */
.search-box:focus-within::before {
  display: none;
}

方案二：给占位符单独设置权重（简单但有局限） #

如果能接受占位符里的文字也被加粗，这个方法更简单：

CSS代码 #

input {
  font-family: Arial, 'Font Awesome 5 Free';
  font-weight: 500; /* 输入文本保持500权重，不加粗 */
  color: #777;
  font-size: 18px;
}

/* 给占位符单独设置900权重，让图标显示 */
input::placeholder {
  font-weight: 900;
}

⚠️ 注意：部分浏览器对::placeholder的字体属性支持可能有差异，而且占位符里的文字也会跟着加粗，如果你的占位符是图标+文字的组合，这个方法就不太适合了。

总结 #

方案一是最灵活的，既能满足「图标加粗、文本不加粗」的要求，又能实现输入时图标消失的效果，完全匹配你的需求。

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