Icons before displaying on mobile devices do not show up

I've encountered a bug with Font Awesome 5 Free SVG with JS version 5.11.2 on my web server. I have an unordered list (ul) with font-awesome markers included in a background image. The icons display correctly on desktop, but not on mobile devices (specifically testing on Android). Here is the code snippet and 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 shows the icons displaying correctly on desktop:

desktop

However, on mobile devices, the icons do not display:

mobile

How can this bug be resolved?

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: Please excuse any errors in my English writing and speaking abilities.

htmlcssfont-awesomefont-awesome-5

Answer №1

Have you tried incorporating all.css or adding a link to https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.1.1/css/all.css? This might resolve your icon loading issue. For the image on mobile view, please refer to the attachment below: https://i.sstatic.net/f07yF.jpg

.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

The CSS does not contain a direct reference to the font being used. If you have included your own font in the CSS, it should be referenced as follows:

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

Ensure that the actual font files are located in the correct folder path specified for the references. For example, Font Awesome typically uses /webfonts.

Answer №3

Issue Resolved! Here is the solution provided:

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

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Trouble with video embedding not adjusting properly within a Bootstrap 5 carousel

I'm currently facing an issue with two video embeds in a carousel. One has a standard bootstrap size of 16x9, while the other has a custom size of 4x5. Even though I'm using the embed-responsive code for both videos, none of them scale responsiv ...

cssresponsive-designbootstrap-5

SQL Index Error

My attempt at creating an HTML/PHP page to update SQL records has hit a roadblock... I keep encountering this issue: Notice: Undefined index: Manufacturer in C:\xampp\htdocs\sql\sqlupdate.php on line 15 Product updated successfully. ...

phphtmlsql

How can line breaks be displayed in JavaScript text output?

I need assistance with creating a scrolling series of text messages that are separated by linebreaks. This is the current code I have: <script type="text/javascript" src="xbMarquee.js"></script> <script type="text/javascript"> <!-- ...

jqueryhtmlline-breaks

Click on the sidebar to reveal the dropdown menu

I have been working on a project and have successfully created a navbar with a dropdown menu that includes a hover effect. Now, I am attempting to implement a click event to open and close the dropdown's submenu, but unfortunately, it is not working. ...

htmlcss

Flipping the switch to illuminate or darken a room

I am working on a project where I want to create a program that turns on a lightbulb when you click on it, and then turns it off when you click on it again. However, I am facing an issue where no matter which light I click on, the first one always turns ...

javascripthtml

Issue with Bootstrap margins and padding

While creating an application form from scratch with Bootstrap, I encountered a peculiar issue. The element with ID officeaddress is missing from the HTML page upon loading. I've experimented with the my class in Bootstrap and attempted to add line br ...

htmlwebfrontendbootstrap-5

Steps to activate the image viewer for each individual looping image:

I'm struggling with my JavaScript code that fetches images and displays them in a modal view when clicked. The issue I'm facing is that the image view only works for the second and other images, but not for the first one. I know there are issues ...

javascriptphpjqueryhtmlcss

The infinite slide feature isn't functioning properly when combined with a background image

I've recently implemented the infinite slide plugin, which you can find here: https://www.jqueryscript.net/slider/Infinite-Scroller-Plugin-jQuery.html. It's working flawlessly with images using the img tag, but I'm encountering some issues w ...

javascriptjqueryhtmlcssinfinite-scroll

What is the best method for showcasing numerous dropdown lists using JavaScript along with conditional if-else statements?

Hello everyone, I am currently new to javascript and I'm attempting to build a small web application using javascript. However, I am facing an issue with printing the drop-down list output. Could someone please assist me in resolving this problem? < ...

javascripthtmlif-statement

Conceal form after submission - Django 1.6

I'm currently working on a Django 1.6 project where I have this form: <form action="/proyecto/" method="POST" id="myform"> {% csrf_token %} <table> <span class="Separador_Modulo">& ...

javascriptjqueryhtmldjango

Could someone clarify the distinction between adding elements to a target and setting elements to a target?

My latest experiment involved the creation of two simple functions. You can check out the code in this link. The first function involves creating an h3 element, adding text to it, and then appending it to an element with the id "results" when a button is c ...

javascripthtml

Changing color in JQuery based on class and the content of HTML elements

I am attempting to utilize jQuery to extract the inner html of a div with the class name "box_bottom". These divs are dynamically generated by JavaScript, fetching data from XML. As a result, there could be multiple occurrences based on the XML, and I nee ...

javascriptjqueryhtmlcss

Token Error in Angular App

I've encountered a sudden issue with my leaflet map. Every time I click on the map, a marker is added to the same coordinates despite my efforts to remove them using a function. Even though the markers-array is emptied, the markers remain visible on t ...

javascriptangularjshtmlleafletangular-leaflet-directive

What is the reason position:sticky does not align elements to right:0?

I attempted to align my element with the right:0 property, but it doesn't seem to have any effect. The element remains stuck to the left edge of the browser window. * { margin: 0; padding: 0; font-size: 50px; } .sticky { width: 50px; h ...

htmlcsscss-positionsticky

How to remove an extra horizontal scroll bar from a fixed-header HTML table?

While working on updating my HTML tables to have fixed headers, I followed online examples that suggest making table-layout fixed, thead and tbody blocks, setting height constraints for tbody, and applying overflow-y to tbody. The result is functional as m ...

htmlcss

Changing Scroll-bar Colors in JavaFX TableView Using Java

I modified the style of my TableViews programmatically with the following code- tableView.setStyle("-fx-base : #333333; -fx-background-color : gray"); Now I am looking to change the color of the scroll bar using the same method. I prefer not to add a ...

csstableviewjavafx-8

Assigning the Style property to an element using a string that includes HTML tags

My HTML string is populated with elements such as button, li, span, and more. I am looking to add specific styles to buttons based on their class name. For example, if button.btn { some styles } and button.btn-success { some other styles } O ...

javascriptjquerycss

Adjusting the scope value directly within a directive

I have a validation message that starts off hidden when the page loads due to the ng-show attribute. When the user clicks to delete an entry, the confirmation message for successful deletion appears by changing the ng-show value to false. Now, I need to h ...

javascriptjqueryhtmlangularjsangularjs-scope

Tips for aligning one item in the center and another item on the right with MUI v5

My goal is to center 3 navigation tabs in the middle of my page and have a dropdown on the far right for sorting. I managed to get the dropdown on the far right, but I'm having trouble perfectly centering the 3 navigation tabs inside the <Box> & ...

cssreactjsflexboxmaterial-ui

Angular list with a repeating group of radio buttons

I have a set of 'options', which consists of the following: {Id: 1, Label: "option 1"}, {Id: 2, Label: "option 2"} Additionally, I have a list of 'products' structured as follows: {Id: 1, Name: "Name 1", Recommend: options[0]}, {Id: ...

javascriptangularjshtmlangularjs-ng-repeat