Font Awesome 5技术咨询：JS+SVG版显示空白方块及列表图标替换异常

首先，你提到直接用<i class="fas fa-check-circle"></i>能正常渲染，说明Font Awesome的JS库已经正确加载了，问题出在列表项目符号替换的实现方式以及JS+SVG版本的特性上，下面分情况解决：

1. JS+SVG版本图标显示空白方块的通用排查 #

如果是普通图标（非列表替换场景）出现空白，先检查这几点：

• 确认JS脚本引入正确：比如用官方的Kit脚本，或者CDN的all.js，确保没有加载错误（可以在浏览器控制台Network标签验证）
• 图标类名是否正确：FA5里solid风格用fas，regular用far，品牌图标用fab，不要混淆风格前缀
• 有没有CSS冲突：比如父元素设置了overflow: hidden截断SVG，或者给svg元素加了display: none/opacity: 0的样式

2. 替换

项目符号为FA图标时空白的解决方案 #

因为你用的是JS+SVG版本，它的工作原理是把<i>标签动态替换成<svg>元素，而传统的用伪元素:before/:after+content的方法只适用于Font Awesome的webfont（CSS）版本，所以会出现空白。这里有两种可行的解决方法：

方法一：直接在

内嵌入图标（最简单） #

既然你已经验证了<i>标签能正常渲染，那直接把图标放在<li>内部，然后通过CSS去掉默认项目符号并调整样式：

<li class="testitems"><i class="fas fa-check-circle"></i> List Item 1</li>

对应的CSS：

.testitems {
  /* 去掉默认的项目符号 */
  list-style: none;
  /* 调整内边距，让图标和文字对齐 */
  padding-left: 0;
  margin-left: 0;
}

.testitems i {
  /* 给图标和文字之间加间距 */
  margin-right: 8px;
  /* 自定义图标样式 */
  color: #2ecc71;
  font-size: 1.2em;
  /* 让图标和文字垂直居中 */
  vertical-align: middle;
}

这种方法不需要修改Font Awesome的加载方式，直接调整样式就能达到替换项目符号的效果。

方法二：改用Font Awesome Webfont版本（支持伪元素） #

如果你一定要用伪元素实现（不想修改HTML结构），可以换成Font Awesome的webfont（CSS）版本，这样就能用传统的content方法：
首先替换引入方式，把JS脚本换成CSS链接：

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

然后用CSS伪元素设置项目符号：

.testitems {
  list-style: none;
  position: relative;
  /* 给图标留出位置 */
  padding-left: 24px;
}

.testitems:before {
  /* fa-check-circle的Unicode编码，FA5的图标编码可以在官网查询 */
  content: "\f058";
  /* 指定Font Awesome的字体族 */
  font-family: "Font Awesome 5 Free";
  /* solid风格需要设置font-weight为900，regular是400 */
  font-weight: 900;
  position: absolute;
  left: 0;
  /* 自定义样式 */
  color: #2ecc71;
  font-size: 1.2em;
}

这样就能用伪元素渲染出图标，替代默认的项目符号。

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