Why are my Font Awesome 6.1.1 icons not displaying when loaded?-CodePudding

I'm in this course by Brad Traversy's 50 Projects 50 Days course. In the Day 26 - Double Vertical Slider, the Font Awesome CDN he's using is version 5.15.1 which is a really outdated one. I am using version 6.1.1 but my icons are not loading even though I tried to debug it. I want the arrow-down and arrow-up icons in my down-button and up-button classes respectively.

Here's my code:

@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;
}

<!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 >
    <div ></div>
    <div ></div>
    <div >
      <button >
          <i ></i>
        </button>
      <button >
          <i ></i>
        </button>
    </div>
  </div>

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

</html>

Thank You!

CodePudding user response：

It has to do with the integrity attribute:

<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"
/>

Remove it and it should work:

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

CodePudding user response：

now you don't need download any files from font awesome . u can use kit 1- visit website. 2- sign in . 3- go to send kit in gmail inbox. (kit is code javascre) 4-go to html file and pull code in title . only........

CodePudding user response：

Your integrity code was bad. Just replace it with a newly generated link from https://cdnjs.com/libraries/font-awesome

DO NOT REMOVE THE INTEGRITY ATTRIBUTE See here for a good explanation as to why: https://stackoverflow.com/a/49061277/8565010

@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;
}

.down-button {
  display: block;
  width: fit-content;
  height: fit-content;
  padding: 2rem;
  margin: 0 auto 1rem auto;
}

.up-button {
  display: block;
  width: fit-content;
  height: fit-content;
  padding: 2rem;
  margin: 0 auto 1rem auto;
}

<!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-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g==" crossorigin="anonymous" referrerpolicy="no-referrer"
  />
  <link rel="stylesheet" href="style.css" />
  <title>Vertical Slider</title>
</head>

<body>
  <div >
    <div ></div>
    <div ></div>
    <div >
      <button >
          <i ></i>
        </button>
      <button >
          <i ></i>
        </button>
    </div>
  </div>

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

</html>