字体真棒图标未显示在 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 提供的相同目录结构，所以我认为这不是问题。