无法离线使用 font-awesome，字体未显示

Question

我想让我的字体在我们的 Intranet 应用程序（离线）中工作时很棒，所以我遵循这个 link @ https://fontawesome.com/how-to-use/on-the-web/setup/hosting-font-awesome-yourself，我做了以下操作：-

1) 我下载包:-

2) 并且我在我们的根文件夹中添加了 all.css + webfonts 如下：-

然后我将这个 link 添加到头部的 all.css 中，如下所示：-

<link href="~/all.min.css" rel="stylesheet">

但是我的应用程序中没有任何字体？有什么建议吗？

这是all.min.css的一部分：-

/*!
 * Font Awesome Free 5.13.0 by @fontawesome - https://fontawesome.com
 * License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
 */
.fa,
.fas,
.far,
.fal,
.fad,
.fab {
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  display: inline-block;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  line-height: 1; }

.fa-lg {
  font-size: 1.33333em;
  line-height: 0.75em;
  vertical-align: -.0667em; }

.fa-xs {
  font-size: .75em; }

.fa-sm {
  font-size: .875em; }

.fa-1x {
  font-size: 1em; }

.fa-2x {
  font-size: 2em; }

.fa-3x {
  font-size: 3em; }

.fa-4x {
  font-size: 4em; }

.fa-5x {
  font-size: 5em; }

.fa-6x {
  font-size: 6em; }

.fa-7x {
  font-size: 7em; }

.fa-8x {
  font-size: 8em; }

.fa-9x {
  font-size: 9em; }

.fa-10x {
  font-size: 10em; }

.fa-fw {
  text-align: center;
  width: 1.25em; }

.fa-ul {
  list-style-type: none;
  margin-left: 2.5em;
  padding-left: 0; }
  .fa-ul > li {
    position: relative; }

.fa-li {
  left: -2em;
  position: absolute;
  text-align: center;
  width: 2em;
  line-height: inherit; }

.fa-border {
  border: solid 0.08em #eee;
  border-radius: .1em;
  padding: .2em .25em .15em; }

.fa-pull-left {
  float: left; }

.fa-pull-right {
  float: right; }

.fa.fa-pull-left,
.fas.fa-pull-left,
.far.fa-pull-left,
.fal.fa-pull-left,
.fab.fa-pull-left {
  margin-right: .3em; }

.fa.fa-pull-right,
.fas.fa-pull-right,
.far.fa-pull-right,
.fal.fa-pull-right,
.fab.fa-pull-right {
  margin-left: .3em; }

.fa-spin {
  -webkit-animation: fa-spin 2s infinite linear;
          animation: fa-spin 2s infinite linear; }

.fa-pulse {
  -webkit-animation: fa-spin 1s infinite steps(8);
          animation: fa-spin 1s infinite steps(8); }

@-webkit-keyframes fa-spin {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg); }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg); } }

@keyframes fa-spin {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg); }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg); } }

.fa-rotate-90 {
  -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=1)";
  -webkit-transform: rotate(90deg);
          transform: rotate(90deg); }

.fa-rotate-180 {
  -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=2)";
  -webkit-transform: rotate(180deg);
          transform: rotate(180deg); }

Answer 1

是否在css中指定了字体？像这样：

@font-face {
  font-family: myFirstFont;
  src: url(sansation_light.woff);
}

Answer 2

将 .woff 和 .woff2 添加到您的虚拟主机中的 MIME 类型，
或者你可以在启动时试试这个：

app.UseStaticFiles(new StaticFileOptions { ServeUnknownFileTypes = true });

或者您可以指定要提供的文件扩展名，如下所示：

public void Configure(IApplicationBuilder app)
{
    // Set up custom content types - associating file extension to MIME type
    var provider = new FileExtensionContentTypeProvider();

    // Add new mappings
    provider.Mappings[".woff"] = "font/woff";
    provider.Mappings[".woff2"] = "font/woff2";

    app.UseStaticFiles(new StaticFileOptions
    {
        ContentTypeProvider = provider
    });
}

参考文献：

另一个可能的问题是路径问题。我已经 downloaded the package 并将其提取到 wwwroot 文件夹下，然后将其重命名为 fontawesome 以便于访问。

然后添加 all.css 文件如下：

<link href="~/fontawesome/css/all.css" rel="stylesheet">

一切正常。请注意，您的 wwwwroot!

下有一个不同的文件夹结构

无法离线使用 font-awesome，字体未显示

Unable to work with font-awesome offline, fonts are not been shown

html

css

font-awesome

asp.net-core