Font-Awesome 5.9.0图标未显示在浏览器中;但有5.00个版本

时间:2019-07-19 13:51:58

标签: html css font-awesome font-awesome-5

我正在一个网站上工作。在较大的站点中,此微型站点有一个单独的目录。在暂存阶段(实际生产之前),出现了所有较新的Font-Awesome图标,但是当我推送该网站使其处于活动状态时,Font Awesome版本5.0.0之后的任何图标都不再显示,给了我一个方框或空白空格。

我自己托管它,并且all.min.css指向正确的/ web字体文件夹。最初,我在Chrome控制台中收到一条错误消息,内容是找不到字体,这就是为什么我不得不更改其指向的位置。

我从Font-awesome重新下载了源文件,以防万一在那里发生了什么,然后将它们添加回了站点。同样的问题。

我正在工作的站点在“主站点”中已安装Font-Awesome 5.0.0,但我认为较新的版本是Image,它取代了较旧的版本。可能不是这样吗?即使图标是从直接链接到.php文件的all.min.css文件中提取的,页面也会包含一个包含较旧版本的Font-Awesome(5.0.0)的模板文件。

以下是我所引用的.css文件:

<link class="rs-file" href="/assets/vendor/font-awesome/css/all.min.css" rel="stylesheet">

已编辑:我试图查看这是否只是用户错误,但更改图标和代码仍然有效。我什至尝试了pseudo-elements的方式,并且得到了这些特定图标的框。

伪元素代码:

    display: inline-block;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    font-size: 60px;
    color: #0368b0;
    width: 200px;
    margin-top: 50px;
    margin-left: 10px;
    text-align: center;
  }
  .fa-icon::hover {
    color: #bdd5f6;
  }
  .wallet::before {
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    content: "\f555";
  }

  .money-check::before {
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    content: "\f53c";
  }

  .file-invoice-dollar::before {
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    content: "\f571";
  }

Image 2

任何帮助或见识将不胜感激。谢谢!

0 个答案:

没有答案