Font Awesome 5 CSS content多图标失效问题求助

这不是Bug，是Font Awesome 5的架构变化导致操作方式和Font Awesome 4不同，我来给你拆解原因和解决办法：

为什么Font Awesome 4可以，5不行？ #

Font Awesome 4把所有图标都打包在单一字体族里，你只要给伪元素设置好字体，直接在content里拼接多个Unicode字符就能显示多图标。但Font Awesome 5把图标拆分到了不同的字体变体中（比如Free版本的solid、regular，Pro版本还有更多分类），而且如果默认用SVG加载方式的话，CSS content方法本身就不生效——哪怕单个图标能显示，也是因为你可能同时加载了Web Font版本。

当你在单个伪元素的content里放多个Unicode时，只有第一个字符会继承你设置的font-family和font-weight，后续字符会 fallback 到浏览器默认字体，自然显示不出来。

两种可行的解决方案 #

方案1：使用多个伪元素（推荐，灵活可控） #

给每个图标单独分配::before和::after伪元素，每个伪元素单独设置字体属性，还能灵活调整间距：

.icon-multiple {
  position: relative;
}
.icon-multiple::before {
  font-family: "Font Awesome 5 Free";
  font-weight: 900; /* solid图标需要900权重 */
  content: "\f007"; /* 用户图标 */
}
.icon-multiple::after {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  content: "\f002"; /* 搜索图标 */
  margin-left: 8px; /* 调整图标间距 */
}

方案2：单个伪元素内拼接（需同字体族） #

如果两个图标属于同一个字体族（比如都是Free版的solid图标），你可以在content里用Unicode+空格（\0020）拼接，同时确保字体属性正确设置，还能通过letter-spacing调整间距：

.icon-multiple::before {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  content: "\f007\0020\f002"; /* 用\0020分隔两个图标 */
  letter-spacing: 4px; /* 可选，增大图标间距 */
}

关键前提 #

一定要确保你加载的是Font Awesome的Web Fonts + CSS版本，而不是默认的SVG with JS版本——后者是通过DOM插入SVG元素实现的，不会识别CSS content里的Unicode图标。

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