我之前也碰到过这个问题，离线用Font Awesome伪元素确实容易踩坑，咱们一步步来排查解决：

1. 先确认离线包的完整性与引入方式 #

首先你得确保下载了完整的Font Awesome离线包，里面必须包含webfonts文件夹（存放字体文件）和对应的CSS文件（比如fontawesome.css、all.css这类）。然后在HTML里要引入本地的CSS文件，而不是CDN链接：

<!-- 正确引入本地CSS，路径根据你的项目结构调整 -->
<link rel="stylesheet" href="./css/fontawesome.css">

2. 检查字体文件的路径是否正确 #

这是最常见的问题！打开你引入的Font Awesome CSS文件，找到@font-face规则，里面的src路径必须和你的webfonts文件夹位置匹配。比如默认的@font-face可能是这样：

@font-face {
  font-family: 'Font Awesome 6 Free';
  font-style: normal;
  font-weight: 900;
  src: url("../webfonts/fa-solid-900.woff2") format("woff2"),
       url("../webfonts/fa-solid-900.woff") format("woff");
}

如果你的CSS文件和webfonts是同级目录（比如都在css文件夹里），那就要把../webfonts/改成./webfonts/，不然浏览器会找不到字体文件，伪元素自然显示不出来。

你可以通过浏览器开发者工具的Network标签验证：刷新页面后，查看webfonts下的woff2/woff文件是否成功加载（状态码为200），如果是404，就说明路径需要调整。

3. 确认字体族名称与权重（版本差异很关键） #

不同版本的Font Awesome，字体族名称和要求的权重不一样，这也是很多人踩坑的点：

• Font Awesome 4.x版本：字体族是FontAwesome（和你代码里写的一致），不需要额外加font-weight
• Font Awesome 5.x+版本：
  • 免费版的solid图标：字体族是'Font Awesome 6 Free'（对应你的版本号，比如5就写5），并且必须加上font-weight: 900;
  • 品牌图标：字体族是'Font Awesome 6 Brands'，权重不需要额外设置

比如你用的是6.x的solid图标，代码要改成这样：

.mydiv::before {
  content: "\25AE"; /* 确保这个编码对应你当前版本的图标，不同版本编码可能有变化 */
  font-family: 'Font Awesome 6 Free';
  font-weight: 900; /* 这个属性必须加，否则图标显示不出来 */
  left: -5px;
  position: absolute;
  top: 0;
}

4. 排除其他样式冲突 #

• 你的.mydiv必须设置position: relative;，因为伪元素用了position: absolute;，需要父元素为相对定位才能正确定位，否则伪元素会相对于整个页面定位，位置可能不对甚至看不到。
• 检查是否有其他CSS规则覆盖了伪元素的font-family、content或者display属性（比如设置了display: none;就会隐藏伪元素）。

完整示例 #

假设你的项目结构是这样：

项目根目录/
├─ index.html
├─ css/
│  ├─ fontawesome.css
│  └─ webfonts/
│     ├─ fa-solid-900.woff2
│     ├─ fa-solid-900.woff
│     └─ ...其他字体文件

HTML引入：

<link rel="stylesheet" href="./css/fontawesome.css">
<div class="mydiv">测试文本</div>

CSS代码：

.mydiv {
  position: relative; /* 必须添加，让伪元素相对于它定位 */
  padding-left: 20px; /* 给图标预留空间 */
}

.mydiv::before {
  content: "\25AE";
  font-family: 'Font Awesome 6 Free';
  font-weight: 900;
  left: 0;
  position: absolute;
  top: 50%;
  transform: translateY(-50%); /* 垂直居中 */
}

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