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

Question

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

Thank You!

score 2 · Accepted Answer · answered Jun 28 '22 at 13:55

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

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

</html>

Thanks bro! I always clicked the "Copy URL" button in cdnjs insted of "Copy Link Tag" — ScratcherXBOX, Jul 02 '22 at 11:13

score 0 · Answer 2 · answered Jun 28 '22 at 13:34

0

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........

answered Jun 28 '22 at 13:34

louy

11
5

As it’s currently written, your answer is unclear. Please [edit] to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Jun 28 '22 at 14:02

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

2 Answers2