Icons not showing properly showing empty boxes

I embedded cdn link on my html header and it's not showing any kind of icon, it's showing an empty box please check this code snippet and its result to know what i mean. any help would be appreciated. the link was given by font awesome via email upon registration

<script src="https://use.fontawesome.com/44c6a45abc.js"></script>
 <i class="fa-solid fa-user"></i>

  <!-- regular style -->
  <i class="fa-regular fa-user"></i>

  <!-- light style -->
  <i class="fa-light fa-user"></i>

  <!-- duotone style -->
  <i class="fa-duotone fa-user"></i>

  <!-- all new thin style -->
  <i class="fa-thin fa-user"></i>

  <!--brand icon-->
  <i class="fa-brands fa-github-square"></i>
</body>

Solution

For me it works but not for the first to the fifth icon because they are pro icons that have to be used with the fontawesome pro account.

<head>
  <script src="https://use.fontawesome.com/44c6a45abc.js" crossorigin="anonymous"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.2/css/all.min.css" integrity="sha512-1sCRPdkRXhBV2PBLUdRb4tMg1w2YPf37qatUFeS7zlBy7jJI8Lf4VHwWfZZfpXtYSLy85pkm9GaYVYMfw5BC1A==" crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>
<body>
 <i class="fa-solid fa-user"></i>

  <!-- regular style -->
  <i class="fa-regular fa-user"></i>

  <!-- light style -->
  <i class="fa-light fa-user"></i>

  <!-- duotone style -->
  <i class="fa-duotone fa-user"></i>

  <!-- all new thin style -->
  <i class="fa-thin fa-user"></i>

  <!--brand icon-->
  <i class="fa-brands fa-github-square"></i>
</body>