:: до того, как значки на мобильных устройствах не отображаются

я нашел эту ошибку. Я использую Font Awesome 5 Free SVG с JS версии 5.11.2, включенный в мой веб-сервер. У меня есть ul с отличным шрифтом, включенным в фоновое изображение. На рабочем столе работает хорошо, но на мобильных устройствах (тестирование на Android) значки font awesome не отображаются. Вот код и 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: извините за плохой английский, я не умею писать и говорить.


html css font-awesome font-awesome-5
person Alessio Puccini    schedule 04.11.2019    source источник

Ответы (3)


arrow_upward
0
arrow_downward

Попробуйте использовать 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>

person prajun karn    schedule 04.11.2019
comment
Тот же результат, что и на втором скриншоте. - person Alessio Puccini; 04.11.2019

arrow_upward
0
arrow_downward

Я не вижу ссылки на фактический шрифт в вашем 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.

person Chris Love    schedule 06.11.2019
comment
Это включено в мой проект. - person Alessio Puccini; 08.11.2019

arrow_upward
0
arrow_downward

Решено. Это решение.

<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;
}
person Alessio Puccini    schedule 08.11.2019