我发现了这个错误。我使用的Web服务器中包含JS 5.11.2版的Font Awesome 5 Free SVG。我有一个ul,它的背景图像中包含字体很棒的标记。在台式机上运行良好,但在移动设备上(在Android上进行测试),字体真棒图标无法显示。这里是代码和CSS:
<ul class="footer-info-contact">
<li id="telefonox">xxxxxx</li>
<li id="mailx">xxxxx</li>
</ul>
.footer-info-contact {
margin: 0;
padding: 0;
list-style: none;
}
.footer-info-contact li {
margin: 10px 0px;
padding: 0;
list-style: none;
padding-left: 32px;
}
.footer-info-contact li::before {
content: "";
font-size: 13px;
height: 45px;
margin-left: -32px;
width: 31px;
vertical-align: middle;
font-family: "Font Awesome 5 Free";
display: inline-block;
font-style: normal;
font-variant: normal;
text-rendering: auto;
line-height: 45px;
font-weight: 900;
color: #FFF;
background-image: url('/img/chicco-bianco.png');
background-repeat: no-repeat;
background-size: contain;
text-align: center;
margin-right: 10px;
}
#telefonox::before {
content: "\f095";
}
#mailx::before {
content: "\f0e0";
}
第一个屏幕截图是网站的桌面版本,图标显示良好:
在移动设备上,图标不显示:
我该如何解决此错误?
版本和实施
Version: Font Awesome Free 5.11.2 SVG with JS
浏览器和版本
Firefox 70.0.1 (64 bit) on Windows 10 Pro 10.0.18362 build 18362 x64
Firefox 68.2.0 on Android 7.0 on Samsung Galaxy S6 Edge.
PS:对不起,英语不好,我的英语读写能力不好。