Font Awesome 6.1.1引入后图标无法正常显示如何排查解决

图标无法正常显示是两个错误导致的：

• 重复加载Font Awesome资源：head区域已经引入了6.1.1版本的全量CSS，body末尾又额外加载了kit版本的脚本，两份资源同时生效会产生冲突，导致图标类名匹配失败。
• up-button内部的图标类名写错了，两个按钮都写了向下箭头的类名，向上按钮自然无法显示正确图标。

• 移除body末尾重复引入的Font Awesome kit脚本，只保留head中引入的6.1.1版本CDN即可。
• 将up-button内的i标签类名从fa-solid fa-arrow-down修改为fa-solid fa-arrow-up。

<div class="action-buttons">
  <button class="down-button">
    <i class="fa-solid fa-arrow-down"></i>
  </button>
  <button class="up-button">
    <i class="fa-solid fa-arrow-up"></i>
  </button>
</div>

提示：Font Awesome 6版本的实心图标前缀为fa-solid，你当前写的前缀是正确的，完成上述两处修改后刷新页面，图标就能正常加载显示。

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