Icons not shown within my code, while working on your page

I have an issue with the icons. I use it as it is shown on the MDB pages and it also works within the example code like https://mdbootstrap.com/snippets/Standard/mdbootstrap/3163204.

Example I tried to change the to:

As written above it is working well within the example code.

Expected behavior Showing the icons within my project as within the example code.

Actual behavior None of the above icons is shown.

Resources (screenshots, code snippets etc.) I am using the standard configuration on my index page:

        <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.11.2/css/all.css" />
<!-- Google Fonts Roboto -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap" />
<!-- MDB -->
<link rel="stylesheet" href="css/mdb.min.css" />
<!-- Custom styles -->
<link rel="stylesheet" href="css/style.css" />
<!-- MDB -->
<script type="text/javascript" src="js/mdb.umd.min.js"></script>
<!-- Custom scripts -->
<script type="text/javascript" src="js/script.js"></script>

I also already tried with mdb.es.min.js, but it doesn't work neither.

This is the source for this section:

                <div class="container my-5 py-5">
                <!-- Section: Design Block -->
                <section class="mb-10 text-center">
                    <div class="d-flex justify-content-center">
                        <div class="text-center" style="max-width: 700px">
                            <h2 class="fw-bold mb-4 text-center">
                                What makes this add-on <u class="text-primary"> unique?</u>
                            </h2>
                            <p class="text-muted mb-5">
                                It is not just an add-on that shows the data, but simulates all the functions of a real tachograph
                            </p>
                        </div>
                    </div>
                    <div class="row gx-lg-5">
                        <div class="col-lg-3 col-md-6 mb-5 mb-lg-0">
                            <div class="p-3 badge-primary rounded-circle shadow-2 d-inline-block mb-4">
                                <i class="fas fa-tachograph-digital fa-lg fa-fw"></i>
                            </div>
                            <h5 class="fw-bold mb-3">Detailed Driving Data Recording</h5>
                            <p class="text-muted mb-0">
                                The add-on enhances the simulation with a digital tachograph that records and stores your driving data. This data is saved temporarily in the app and long-term through a web portal.
                            </p>
                        </div>
                        <div class="col-lg-3 col-md-6 mb-5 mb-lg-0">
                            <div class="p-3 badge-primary rounded-circle shadow-2 d-inline-block mb-4">
                                <i class="fas fa-address-card fa-lg fa-fw"></i>
                            </div>
                            <h5 class="fw-bold mb-3">Virtual Driver Card</h5>
                            <p class="text-muted mb-0">
                                All relevant data is captured on a virtual driver card to provide an authentic driving experience.
                            </p>
                        </div>
                        <div class="col-lg-3 col-md-6 mb-5 mb-md-0">
                            <div class="p-3 badge-primary rounded-circle shadow-2 d-inline-block mb-4">
                                <i class="fas fa-clipboard-list fa-lg fa-fw"></i>
                            </div>
                            <h5 class="fw-bold mb-3">Company and Workshop Cards</h5>
                            <p class="text-muted mb-0">
                                The add-on simulates almost all functions of a real DTCO, including the company card, which allows virtual companies to read driving data, and the workshop card, which allows vehicle adjustments.
                            </p>
                        </div>
                        <div class="col-lg-3 col-md-6 mb-5 mb-md-0">
                            <div class="p-3 badge-primary rounded-circle shadow-2 d-inline-block mb-4">
                                <i class="fas fa-user-check fa-lg fa-fw"></i>
                            </div>
                            <h5 class="fw-bold mb-3">Enhanced Multiplayer Experience through Control Cards</h5>
                            <p class="text-muted mb-0">
                                Face police inspections in multiplayer mode for even more realistic and exciting interactions with other players.
                            </p>
                        </div>
                    </div>
                </section>
            </div>

I don't know why the most icons are working, but some not while they are working within your pages.

What did I missed? Is there an coding issue?