求内嵌Font Awesome 5图标的复选框实现方案，非伪元素优先

必须有！我之前也碰到过Font Awesome 5里伪元素在复选框上不生效的问题，后来摸索出了完全不用伪元素的实现方式，直接利用FA5的图标类配合基础HTML/CSS就能搞定，完美适配你的需求：

核心思路 #

不用伪元素的话，我们可以直接把Font Awesome图标作为独立元素放在<label>里，通过原生复选框的:checked状态来切换图标的显示状态或样式，完全绕开伪元素的限制。

完整示例代码 #

HTML结构 #

<div class="custom-checkbox">
  <input type="checkbox" id="option1">
  <label for="option1">
    <i class="far fa-square"></i>
    示例选项1
  </label>
</div>

<div class="custom-checkbox">
  <input type="checkbox" id="option2">
  <label for="option2">
    <i class="far fa-square"></i>
    示例选项2
  </label>
</div>

CSS样式 #

/* 隐藏原生复选框，保留点击交互 */
.custom-checkbox input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}

/* 设置label基础样式，确保图标与文字对齐 */
.custom-checkbox label {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  gap: 8px; /* 图标与文字的间距，可自定义 */
  font-size: 16px;
}

/* 未选中状态的图标样式 */
.custom-checkbox label i {
  font-size: 20px;
  color: #ccc;
  transition: color 0.2s ease;
}

/* 选中状态切换图标为实心样式并改变颜色 */
.custom-checkbox input[type="checkbox"]:checked + label i {
  font-family: "Font Awesome 5 Free";
  font-weight: 900; /* FA5实心图标必须设置该权重 */
  content: "\f14a"; /* 对应fa-check-square的Unicode编码 */
  color: #2196F3; /* 选中状态的颜色，可自定义 */
}

更直观的替代方案（双图标切换） #

如果觉得Unicode切换不够直观，也可以直接在label里放两个图标，通过:checked控制显示/隐藏：

<div class="custom-checkbox">
  <input type="checkbox" id="option3">
  <label for="option3">
    <i class="far fa-square unchecked-icon"></i>
    <i class="fas fa-check-square checked-icon"></i>
    示例选项3
  </label>
</div>

对应的CSS调整：

.custom-checkbox .checked-icon {
  display: none;
}
.custom-checkbox input[type="checkbox"]:checked + label .unchecked-icon {
  display: none;
}
.custom-checkbox input[type="checkbox"]:checked + label .checked-icon {
  display: inline-block;
  color: #2196F3;
}

额外提示 #

• 你可以自由替换图标，比如用fa-circle/fa-check-circle替代方形图标，只需要修改对应的FA类名或Unicode即可。
• 可以根据需求自定义图标大小、颜色、hover效果，让复选框更贴合你的项目风格。

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