I have a basic html page like this, but the fa-copy icon doesn't show. why is that? I've tried consulting with chatgpt but all it's answers doesn't work. any help is appreciated.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"
integrity="sha384-wzi+VRa3kNxU+1atULuEdGmkm0IvEgVZizP3f7G3kry6lgjh++L2cBjUWEHo2DP4" crossorigin="anonymous">
<!-- JavaScript -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<h1>Hello World!</h1>
<a href="#" name="btn-copy" id="btnToastCopyURL" title="copy link URL"
data-copytext="http://dev.gotravelly.com/en/culinary/detail/25362432-my_lemon_yang_menyegarkan"
data-show_title="My lemon yang menyegarkan">
<span id="copy"><i class="far fa-copy"></i></span>
</a>
<div id="copy_to_clipboard-container" class="toast" role="alert" aria-live="assertive" aria-atomic="true"
data-bs-autohide="true" data-bs-delay="5000">
<div class="toast-body d-flex justify-content-between">
<span><?php printf('hello world'); ?></span>
<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
</div>
</body>
</html>