How to Use Font Awesome icons in Vue Js

<!DOCTYPE html>
<html>
<head>
  <script src="https://unpkg.com/vue@3.2.12/dist/vue.global.js"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css"
    integrity="sha512-9usAa10IRO0HhonpyAIVpjrylPvoDwiPUiKdWk5t3PyolY1cOd4DSE0Ga+ri4AuTroPR5aQvXU9xC6qOPnzFeg=="
    crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>
<body>
  <div id="app">
    <h3>How to use Font Awesome Icons with Vue Js </h3>
    <i class="fas fa-heart"></i>
    <i class="fas fa-star"></i>
    <i class="fas fa-check"></i>
    <i class="fas fa-envelope"></i>
    <i class="fas fa-camera"></i>
    <i class="fas fa-rocket"></i>
    <i class="fas fa-cloud"></i>
    <i class="fas fa-globe"></i>
    <i class="fas fa-coffee"></i>
    <i class="fas fa-sun"></i>
  </div>

app.mount('#app');
  </script>

#app h3 {
      text-align: center;
      margin-bottom: 20px;
    }

#app i {
      font-size: 24px;
      margin: 10px;
    }

/* Add different colors to the icons */
    .fa-heart {
      color: red;
    }

.fa-star {
      color: gold;
    }

.fa-check {
      color: green;
    }

.fa-envelope {
      color: blue;
    }

.fa-camera {
      color: purple;
    }

.fa-rocket {
      color: orange;
    }

.fa-cloud {
      color: gray;
    }

.fa-globe {
      color: teal;
    }

.fa-coffee {
      color: brown;
    }

.fa-sun {
      color: yellow;
    }
  </style>

</body>

</html>