使用CSS ::after伪元素调用Font Awesome 6图标不显示求助

针对你遇到的用CSS ::after伪元素添加Font Awesome 6 Free图标无法显示的问题，从你的代码出发，可按以下步骤排查：

1. 检查本地Font Awesome资源路径 #

你当前引入的是本地的css/all.min.css和js/all.min.js，如果本地文件夹结构不对（比如css文件夹不存在、文件名称拼写错误或者文件本身损坏），会导致字体资源无法加载。
你可以先替换为官方CDN资源测试（仅保留CSS引入即可，JS版本和CSS版本不要混用）：

<!-- 替换本地CSS引入为CDN -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">

同时删除页面底部的<script src="js/all.min.js"></script>，避免两种加载方式冲突。

2. 为伪元素添加基础样式 #

::after伪元素默认是inline状态，空div可能导致伪元素没有足够的显示空间，你可以添加尺寸、字体大小等样式确保图标可见：

div::after{
    font-family: "Font Awesome 6 Free"; 
    font-weight: 900; 
    content: "\f015";
    /* 添加以下样式 */
    display: inline-block;
    font-size: 24px; /* 调整图标大小 */
    padding: 8px; /* 增加内边距，让图标更易见 */
}

3. 确认字体族名称和权重匹配 #

Font Awesome 6 Free的solid图标确实需要font-weight: 900，字体族名称"Font Awesome 6 Free"是正确的，但要确保你引入的CSS文件对应Free版本（而非Pro版本），Pro版本的字体族名称会有差异。

4. 避免CSS冲突 #

检查你的style.css或Bootstrap是否有覆盖伪元素的font-family、content或display属性，可以把你的内联样式放在style.css引入之后，确保优先级更高。

修正后的完整测试代码 #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
    <!-- 使用Font Awesome CDN CSS -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <link rel="stylesheet" href="css/style.css">
    <style>
        div::after{
            font-family: "Font Awesome 6 Free"; 
            font-weight: 900; 
            content: "\f015";
            display: inline-block;
            font-size: 24px;
            padding: 8px;
        }
    </style>
</head>
<body>
    <div>
    </div>
    
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
</body>
</html>

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