ASP.NET CORE MVC项目中Font awesome图标无法显示

Question

我正在开发一个ASP.NET CORE MVC应用程序，我在加载font awesome图标时遇到了问题。以下是文件夹布局： 这是我的_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>

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

- Spartan 117

---

你使用的 Font Awesome 版本是哪个？ - JSON

@JSON 最新版本为5以上。 - Spartan 117

你的控制台有任何错误吗？ - Tony Ngo

@TonyNgo 没有，没有错误。 - Spartan 117

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>

- Edward

---

这是解决方案的一部分。 - Spartan 117

在使用Kestrel进行主机托管时，对我很有效。 - Hintham

不完全是你所做的，但这让我找到了解决方案的正确方向。我从4.x升级到5.x，其中一个新图标没有显示出来。我只需要在我的_Layout.cshtml中将href从<link href="/Content/font-awesome.css" rel="stylesheet" />更新为<link href="/Content/fontawesome-all.css" rel="stylesheet" />即可。 - Sagebrush Gardener

Answer 2

请在Chrome开发者工具中检查控制台和网络选项卡(f12)

如果您将应用程序托管在本地IIS上，通常情况下IIS默认不允许使用.woff文件类型。您可以使用web.config添加文件类型。

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

另一个原因可能是CSS文件和字体文件之间的相对路径不匹配。由于您使用了与FontAwesome提供的相同目录结构，我认为这不会是问题。

- Chinthaka Fernando

---

这就是答案。 - Spartan 117