:: раньше значки на мобильных устройствах не отображаются - PullRequest
Новая
       21

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

0 голосов
/ 04 ноября 2019

я нашел эту ошибку. Я использую Font Awesome 5 Free SVG с версией JS 5.11.2, включенной в мой веб-сервер. У меня есть 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";
}

Первый снимок экрана - это версия веб-сайта на рабочем столе, и значки хорошо отображаются:

рабочий стол

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

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: извините за плохой английский, я плохо пишу и говорю.

Ответы [ 3 ]

0 голосов
/ 06 ноября 2019

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

, вам также необходимо убедиться, что у вас есть фактические файлы шрифтов в справочной папке, в моем случае этоis / font. Font Awesome использует /webfonts.

0 голосов
/ 08 ноября 2019

решаемая. Это решение. 

<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;
}
0 голосов
/ 04 ноября 2019

Попробуйте использовать all.css или используйте ссылку https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.1.1/css/all.css, это должно решить проблему с загрузкой значков. для мобильного просмотра изображение прикреплено ниже enter image description here

.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>
...