为何并非所有Font Awesome图标都能在Bootstrap CDN中正常显示？

问题情况 #

引入Bootstrap样式表后，仅.fa fa-desktop图标能正常显示，像fa-solid fa-bath这类免费图标无法加载。

问题根源 #

1. 版本不兼容：你引入的是Font Awesome 4.3.0旧版本，这个版本只支持.fa前缀的类名；而fa-solid是Font Awesome 5及以上版本才启用的新命名规则，旧版本识别不了这类类名。
2. 样式表位置错误：Font Awesome的样式表被放在了<body>标签内，不符合HTML规范，可能导致加载异常。
3. 语法错误：纯HTML里应该用class属性，你写的className是React框架的语法，浏览器无法识别。

修复步骤 #

• 替换为Font Awesome 5+的免费CDN链接，确保包含solid样式库
• 将Font Awesome样式表移到<head>标签中，和Bootstrap样式表放在一起
• 把HTML元素里的className改成class

修正后的代码 #

<head>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
  <!-- 引入Font Awesome 6免费版核心样式和solid样式 -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/fontawesome.min.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/solid.min.css">
</head>

<body>
  <div class="icon">
    <i class="fa fa-desktop"></i>
    <i class="fa-solid fa-bath"></i>
  </div>
</body>

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