Icons not showing properly showing empty boxes-CodePudding

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

  <!-- regular style -->
  <i ></i>

  <!-- light style -->
  <i ></i>

  <!-- duotone style -->
  <i ></i>

  <!-- all new thin style -->
  <i ></i>

  <!--brand icon-->
  <i ></i>
</body>

CodePudding user response：

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

  <!-- regular style -->
  <i ></i>

  <!-- light style -->
  <i ></i>

  <!-- duotone style -->
  <i ></i>

  <!-- all new thin style -->
  <i ></i>

  <!--brand icon-->
  <i ></i>
</body>

CodePudding user response：

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.0.0/css/font-awesome.css">
<style>
  i {
    font-size : 20px;
    padding:0 10px;
  }
</style>
<body>
  <!-- regular style -->
  <i ></i>

  <!-- light style -->
  <i ></i>

  <!-- duotone style -->
  <i ></i>

  <!--brand icon-->
  <i ></i>
</body>