ASP.NET CORE MVC 项目中未显示超赞字体图标

Question

我正在开发一个 ASP.NET CORE MVC 应用程序，但我在加载超赞字体图标时遇到了问题。这是文件夹布局：

这是我的 _layout.cshtml 的样子：

<environment include="Development">
    <script src="~/lib/jquery/dist/jquery.js"></script>
    <script src="~/lib/bootstrap/dist/js/bootstrap.bundle.js"></script>
    <link rel="stylesheet" href="~/lib/font-awesome/css/fontawesome.css" />
</environment>
<environment exclude="Development">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"
        asp-fallback-src="~/lib/jquery/dist/jquery.min.js"
        asp-fallback-test="window.jQuery"
        crossorigin="anonymous"
        integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=">
</script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js"
        asp-fallback-src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"
        asp-fallback-test="window.jQuery && window.jQuery.fn && window.jQuery.fn.modal"
        crossorigin="anonymous"
        integrity="sha384-xrRywqdh3PHs8keKZN+8zzc5TX0GRTLCcmivcbNJWm2rs5C8PRhcEn3czEjhAO9o">
</script>
<link rel="stylesheet" href="~/lib/font-awesome/css/fontawesome.min.css" />
</environment>
<script src="~/js/site.js" asp-append-version="true"></script>

@RenderSection("Scripts", required: false)

以下是我尝试使用 fontawesome 图标的方式：

  <span class='input-group date datepicker'>
                    @Html.TextBoxFor(m => m.CandidateDetail.DateOfBirth, new { @id = "DateOfBirth", @class = "form-control" })
                    <span class="input-group-append">
                        <span class="input-group-text"><i class="fas fa-calendar"></i></span>
                    </span>
                </span>

当我启动该项目时，我看到的只是一个正方形。我做错了什么吗？

Answer 1

要引用 font-awesome，您应该添加 ~/lib/font-awesome/css/all.css 而不是 ~/lib/font-awesome/css/fontawesome.css。

将下面的代码添加到 <environment include="Development">

<environment include="Development">
    <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.css" />
    <link href="~/lib/font-awesome/css/all.css" rel="stylesheet" />
</environment>

Answer 2

检查 chrome 开发人员工具 (f12) 上的控制台+网络选项卡

如果您在本地 IIS 上托管应用程序，大多数时候 IIS 默认不允许 mime 类型 .woff。您可以使用 web.config

添加 mime 类型

<system.webServer>
  <staticContent>
    <remove fileExtension=".woff2" />
    <mimeMap fileExtension=".woff2" mimeType="font/woff2" />
  </staticContent>
</system.webServer>

另一个原因是 CSS 文件和字体文件之间的相对路径不匹配。因为您使用的是 FontAwesome 提供的相同目录结构，所以我不认为这将是问题所在。

ASP.NET CORE MVC 项目中未显示超赞字体图标

Font awesome icons not showing up in ASP.NET CORE MVC Project

font-awesome

asp.net-core-mvc

asp.net-core