如何在CSS的<hr>元素中正常显示Font Awesome图标？

问题描述 #

预期实现效果：

编写的代码如下：

CSS代码 #

hr {
  position: relative;
  border: none;
  overflow: visible;
  text-align: center;
  width: 80%;
  top: 3%;
  left: 10%;
  border-top: 3px solid #c7a175;
  border-radius: 2px;
}

hr::after {
  background-color: white;
  content: '\f6ae';
  font: var(--fa-font-solid);
  padding: 0 6px;
  position: relative;
  top: -10px;
}

HTML代码 #

<head>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
</head>

<body>
  <hr>
</body>

但图标无法正常显示，改用div元素创建线条也无效，需修复该问题。

修复方案 #

核心问题是Font Awesome 6的字体变量引用逻辑或加载适配问题，以下两种方法可解决：

方法1：使用图标类名替代伪元素（推荐） #

直接用容器包裹图标和分隔线，逻辑更直观且兼容性更好：

<div class="custom-divider">
  <i class="fa-solid fa-wheat-awn"></i>
</div>

对应的CSS：

.custom-divider {
  position: relative;
  width: 80%;
  margin: 20px auto;
  text-align: center;
}

.custom-divider::before,
.custom-divider::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 45%;
  height: 3px;
  background-color: #c7a175;
  border-radius: 2px;
}

.custom-divider::before {
  left: 0;
}

.custom-divider::after {
  right: 0;
}

.custom-divider i {
  background-color: white;
  padding: 0 6px;
  color: #c7a175;
  position: relative;
  z-index: 1;
}

方法2：修正伪元素的字体声明 #

若坚持使用<hr>+伪元素的方式，需补充完整的字体属性，避免变量未生效：

hr {
  position: relative;
  border: none;
  overflow: visible;
  text-align: center;
  width: 80%;
  margin: 20px auto;
  border-top: 3px solid #c7a175;
  border-radius: 2px;
}

hr::after {
  background-color: white;
  content: '\f6ae';
  /* 直接声明字体信息，替代变量引用 */
  font-family: 'Font Awesome 6 Solid';
  font-weight: 900;
  padding: 0 6px;
  position: relative;
  top: -12px;
  color: #c7a175;
}

关键说明 #

• Font Awesome 6的--fa-font-solid变量在部分环境下可能无法被伪元素识别，直接写字体名称更可靠
• 用margin替代top/left定位<hr>，可避免不必要的布局偏移
• 图标颜色可通过color属性自定义，与线条颜色统一更协调

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