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

【问题标题】：::before icons on mobile devices don't display::在移动设备上的图标不显示之前
【发布时间】：2019-11-04 10:54:31
【问题描述】：

我发现了这个错误。我正在使用带有 JS 版本 5.11.2 的 Font Awesome 5 Free SVG，包含在我的 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：抱歉英语不好，我不擅长写和说。

【问题讨论】：

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

【解决方案1】：

尝试使用 all.css 或使用链接 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>

【讨论】：

与第二张截图相同。

【解决方案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。

【讨论】：

它包含在我的项目中。

【解决方案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;
}

【讨论】：