Font Awesome 6.1.1 图标在 HTML 中不起作用答案

【问题标题】：Font Awesome 6.1.1 Icons Not Working in HTMLFont Awesome 6.1.1 图标在 HTML 中不起作用
【发布时间】：2022-06-28 21:05:46
【问题描述】：

我参加了 Brad Traversy 的 50 Projects 50 Days 课程。在Day 26 - Double Vertical Slider中，他使用的Font Awesome CDN是5.15.1版本，确实已经过时了。我使用的是 6.1.1 版本，但即使我尝试调试它，我的图标也没有加载。我想分别在我的 down-button 和 up-button 类中的 arrow-down 和 arrow-up 图标.下面代码sn-p ??????

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="shortcut icon" href="/favicon.ico" />
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css"
      integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w=="
      crossorigin="anonymous"
      referrerpolicy="no-referrer"
    />
    <link rel="stylesheet" href="style.css" />
    <title>Vertical Slider</title>
  </head>
  <body>
    <div class="slider-container">
      <div class="left-slide"></div>
      <div class="right-slide"></div>
      <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-down"></i>
        </button>
      </div>
    </div>

    <script src="https://kit.fontawesome.com/3cff899477.js"></script>
    <script src="script.js"></script>
  </body>
</html>

CSS

@import url('https://fonts.googleapis.com/css?family=Open+Sans');

* {
  box-sizing: border-box;
}

body {
  font-family: 'Open Sans', sans-serif;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
  overflow: hidden;
  margin: 0;
}

没有 JavaScript。

谢谢！

【问题讨论】：

标签： javascript html css visual-studio-code

【解决方案1】：

它与integrity 属性有关：

<link
  rel="stylesheet"
  href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css"
  integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w=="
  crossorigin="anonymous"
  referrerpolicy="no-referrer"
/>

删除它，它应该可以工作：

<link
  rel="stylesheet"
  href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css"
  crossorigin="anonymous"
  referrerpolicy="no-referrer"
/>

【讨论】：