::before icons on mobile devices don't display

Question

i've found this bug. I'm using Font Awesome 5 Free SVG with JS version 5.11.2, included in my web server. I've an ul with the marker that are font-awesome included in a background image. On desktop works well, but on mobile devices (testing on Android) the font awesome icons don't display. Here the code and the 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";
}

The first screenshot is the desktop version of the website and the icons display well:

desktop

On mobile devices, the icons dont't display:

mobile

How can i resolve this bug?

Version and implementation

Version: Font Awesome Free 5.11.2 SVG with JS

Browser and version

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: sorry for bad english, i'm not good to write and speak.

Answer 1

Solved. This is the solution.

<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;
}