My current project involves creating a website using Bootstrap 5 icons, but I'm encountering an issue where the icon is not displaying correctly. The expected appearance should be like this [![Example1][1]][1], but it actually looks like this [![Example2][2]][2].
Code
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Creating Your Website Title Here</title>
<meta name="description" content="Provide a captivating description for your site to improve search results and visibility." />
<link rel="stylesheet" href="/_bridgetown/static/css/main.c7d4dd3f1984a290e9be.css" />
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="aac8c5c5ded9ded8cbdaea9f8499849a">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="c7a5a8a8b3b4b3b5a6b787f2e9f4e9f7">[email protected]</a>/dist/js/bootstrap.bundle.min.js"></script>
<script src="/_bridgetown/static/js/main.96ffffaea92690057bfb.js" defer></script>
<!-- USER DETAILS START -->
<section>
<div class="container">
<div class="row text-center pt-4"></div>
<div class="col-lg-3">
<i class="fa fa-user fa-3x"></i>
<h2 class="display-6">100</h2>
<p class="text-muted">Active Clients</p>
</div>
<div class="col-lg-3">
<i class="fa-brands fa-windows fa-3x"></i>
<h2 class="display-6>100</h2>
<p class="text-muted">Active Clients</p>
</div>
</div>
</div>
</section>
<!-- USER DETAILS CLOSE -->