Иконки Bootstrap и Font Awesome не отображаются

Question

У меня есть приведенный ниже код в моем _layout, и он отображает то, что я хочу, так, как я этого хочу. Теперь в своих разных представлениях (см. второй код) я пытаюсь вставить несколько иконок, используя Bootstrap или Font Awesome, но ничего не отображается. Когда я проверяю страницу в браузере, я могу видеть пространство, отведенное для иконок, но сами иконки не видны.

Содержимое моего _layout:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
        <title>@ViewData["Title"] - LKGest</title>

        <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.css" />
        <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Rancho&effect=shadow-multiple">
        <link rel="stylesheet" href="~/css/site.css" asp-append-version="true" />
        <link rel="stylesheet" href="~/LKGest.styles.css" asp-append-version="true" />

        @* ********** Форматирование заголовка страниц ********** *@
        <style>
            header {
                font-family: 'Tangerine', 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
                font-size: 20px;
                text-shadow: 4px 4px 4px #aaa;
            }
        </style>
    </head>

    <body>
        <header>
            <nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-light bg-primary border-bottom box-shadow mb-3">
                <div class="container-fluid">
                    <a class="navbar-brand" asp-area="" asp-controller="Home" asp-action="Index">LKGest</a>
                    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target=".navbar-collapse" aria-controls="navbarSupportedContent"
                            aria-expanded="false" aria-label="Toggle navigation">
                        <span class="navbar-toggler-icon"></span>
                    </button>
                    <div class="navbar-collapse collapse d-sm-inline-flex justify-content-between">
                        <ul class="navbar-nav flex-grow-1">
                            <li class="nav-item">
                                <a class="nav-link text-light" asp-area="" asp-controller="Home" asp-action="Index">Главная</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link text-light" asp-area="" asp-controller="Home" asp-action="Privacy">Предыдущий меню</a>
                            </li>
                        </ul>
                        <p class="nav navbar-text text-light">Привет, @User.Identity?.Name!</p>
                    </div>
                </div>
            </nav>
        </header>
        <div class="container">
            <main role="main" class="pb-3">
                @RenderBody()
            </main>
        </div>

        <footer id="footer" class="border-top footer text-muted">
            <div class="container">
                <span class="copyright">&copy; Авторские права и дизайн: LOUKOU's.</span>
            </div>
        </footer>
        <script src="~/lib/jquery/dist/jquery.min.js"></script>
        <script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
        <script src="~/js/site.js" asp-append-version="true"></script>
        @await RenderSectionAsync("Scripts", required: false)
    </body>
    </html>

Содержимое моего представления:

    @model List<Profession>

    <div class="container">
        <div class="row pt-4 pb-3">
            <div class="col-6">
                <h2 class="text-primary">
                    Список профессий
                </h2>
            </div>
            <div class="col-6 text-end fa fa-ambulance">
                <a asp-controller="Administrateur" asp-action="create_Professions" class="btn btn-primary">
                    <i class="bi bi-plus-circle"></i>
                    @*<i class="fa-solid fa-circle-plus"></i>*@
                     Создать новую профессию
                </a>
            </div>
        </div>
        <div class="row pt-4">
            <div class="col-8">
                <table class="table table-bordered table-striped">
                    <thead>
                        <tr>
                            <th>
                                №
                            </th>
                            <th>
                                Имя
                            </th>
                            <th>
                                Заметки
                            </th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach (var obj in Model.OrderBy(u => u.NomProfession))
                        {
                            <tr>
                                <td>@obj.NoProfession</td>
                                <td>@obj.NomProfession</td>
                                <td>@obj.RemProfession</td>
                            </tr>
                        }
                    </tbody>
                </table>
            </div>
        </div>
    </div>

Иконки Bootstrap и Font Awesome не отображаются

Вопрос или проблема

Ответ или решение

Ваша проблема

Возможные причины и решения

Пример исправленного кода

Заключение