::在移动设备上的图标不显示之前

Question

我发现了这个错误。我正在使用 Font Awesome 5 Free SVG 和 JS 版本 5.11.2，包含在我的 Web 服务器中。我有一个带有标记的 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";
}

第一张截图为桌面版网站，图标显示良好：

desktop

在移动设备上，图标不显示：

mobile

我该如何解决这个错误？

版本和实现

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: 不好意思英语不好，我写和说都不好

Answer 1

尝试使用 all.css 或使用 link https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.1.1/css/all.css 它应该可以解决您的图标加载问题。对于移动视图图像附在下面

.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: solid;
    font-variant: normal;
    text-rendering: auto;
    line-height: 45px;
    font-weight: 900;
    color:  #FFF;
    /* background-image: url('img/bg.png'); */
    background-repeat: no-repeat;
    background-size: contain;
    text-align: center;
    margin-right: 10px;
    background-color:#ddd;
}

li#telefonox::before {
   content: "\f095";
}

li#mailx::before {
    content: "\f0e0";
}

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Page Title</title>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.1.1/css/all.css">
</head>
<body style="background: #ddd;">
<ul class="footer-info-contact">
    <li id="telefonox">xxxxxx</li>
    <li id="mailx">xxxxx</li>
</ul>
</body>
</html>

Answer 2

我在您的 CSS 中没有看到对实际字体的引用。如果您在自己的 CSS 中引用字体，那么您应该有这样的引用：

@font-face {
    font-family: 'font-name';
    font-display: swap;
    src: url('../font/font-name.eot?4247060');
    src: url('../font/font-name.eot?4247060#iefix') format('embedded-opentype'),
        url('../font/font-name.woff2?4247060') format('woff2'),
        url('../font/font-name.woff?4247060') format('woff'),
        url('../font/font-name.ttf?4247060') format('truetype'),
        url('../font/font-name.svg?4247060#font-name') format('svg');
    font-weight: normal;
    font-style: normal;
}

您还需要确保参考文件夹中有实际的字体文件，在我的例子中是 /font。 Font Awesome 使用 /webfonts.

Answer 3

已解决。这就是解决方案。

<ul class="footer-info-contact">
    <li><em class="fas fa-phone"></em>xxxxxx</li>
    <li><em class="fas fa-envelope"></em>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;
    display: inline-block;
    line-height: 45px;
    color:  #FFF;
    background-image: url('/img/chicco-bianco.png');
    background-repeat: no-repeat;
    background-size: contain;
    text-align: center;
    margin-right: 10px;
}

.footer-info-contact li svg {
    color: #FFF;
    position: absolute;
    left: 9px;
    top: 16px;
}

::在移动设备上的图标不显示之前

::before icons on mobile devices don't display

html

css

font-awesome

font-awesome-5