我正在一个网站上工作。在较大的站点中,此微型站点有一个单独的目录。在暂存阶段(实际生产之前),出现了所有较新的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";
}
任何帮助或见识将不胜感激。谢谢!