设置CSS content后Font Awesome图标显示方块如何解决？

你的content值是对的，问题出在伪元素没指定Font Awesome的字体族。Font Awesome图标本质是特殊的字体字符，浏览器需要知道用哪个字体来渲染\f00c这个字符，否则会用默认字体显示，最终变成白色方块。

修复方案 #

给.my-style li::before添加Font Awesome对应的字体设置，同时注意图标风格对应的字体权重（比如solid风格的fa-check需要font-weight: 900）：

修改后的完整CSS代码：

.my-style {
  padding: 0;
  list-style-type: none;
}

.my-style i {
  margin-right: 5px;
}

.my-style li {
  margin-bottom: 8px;
  padding-left: 15px; /* 优化排版，替代margin-left的偏移逻辑 */
}

.my-style li::before {
  content: '\f00c';
  display: inline-block;
  font-family: "Font Awesome 5 Free"; /* 对应Free版本字体，Pro版本替换为"Font Awesome 5 Pro" */
  font-weight: 900; /* solid风格图标需此权重，regular风格改为400 */
  margin-left: -15px;
  margin-right: 5px; /* 可选：增加图标与文字的间距 */
}

关键验证点 #

1. 字体族要匹配你安装的Font Awesome版本：
   • Free版v5："Font Awesome 5 Free"；v6："Font Awesome 6 Free"
   • Pro版v5："Font Awesome 5 Pro"；v6："Font Awesome 6 Pro"
2. 字体权重对应图标风格：
   • Solid风格（如fa-solid fa-check）：font-weight: 900
   • Regular风格（如fa-regular fa-check）：font-weight: 400

调整后伪元素就能正确渲染Font Awesome图标了。

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