Bootstrap与Font Awesome图标无法显示问题求助

你的_layout页面能正常渲染预期效果，但在视图中插入Bootstrap Icons（比如<i class="bi bi-plus-circle"></i>）或Font Awesome图标（比如<i class="fa-solid fa-circle-plus"></i>）时，只有占位区域，看不到实际图标。

问题原因 #

这是因为你没有在布局文件中引入这两个图标库的样式资源——浏览器找不到图标的字体文件或样式定义，因此只能显示空白占位。

解决方案 #

在_layout.cshtml的<head>标签内，添加以下两个图标库的样式链接：

1. 引入Bootstrap Icons的样式文件
2. 引入Font Awesome的样式文件

修改后的<head>部分代码如下：

<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" />
    <!-- 新增：Bootstrap Icons样式 -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
    <!-- 新增：Font Awesome样式 -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.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" />

    @* ********** Formatage du l'entête des pages ********** *@
    <style>
        header {
            font-family: 'Tangerine', 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
            font-size: 20px;
            text-shadow: 4px 4px 4px #aaa;
        }
    </style>
</head>

额外注意事项 #

• 视图中<div class="col-6 text-end fa fa-ambulance">里的fa fa-ambulance是Font Awesome旧版类名，若使用Font Awesome 6+，需改为fa-solid fa-ambulance才能正常显示。
• 取消视图中<i class="fa-solid fa-circle-plus"></i>的注释后，该图标即可正常渲染。

内容的提问来源于stack exchange，提问作者Patrice