FontAwesome 5 Free doesn't show in mobile devices

1

Hi.
I am having trouble implementing some fontawesome fonts in my template. It is very rare, but in the desktop version of the page the font is shown, however in the mobile version (not in Chrome Inspector, but on a real device), this font is not shown.

So that you can see an example, you can visit http://future.juanvillen.es, and see the icon that appears on the back-to-top. The same happens with shortcode-core plugin (with notices box)

IMG_20211129_105921
IMG_20211129_105921701×1265 168 KB

Does anyone know what is happening?
Thanks so much.

2

It also does not work on Mac Chrome desktop

image
image1354×908 42.4 KB

Do you have your font imported properly and available SVGs?
I didn’t really bother to look for it, as included assets are a bit of a mess (CSS in head, JS in body)

3

Hi.

The fontawesome.min.css file is imported directly from main.css with @import url (fontawesome.min.css); and the fonts are in the webfonts folder (image is attached).
In fontawesome.min.css these fonts are imported:

@ font-face {
   font-family: "Font Awesome 5 Free";
   font-style: normal;
   font-weight: 400;
   font-display: block;
   src: url (../ webfonts / fa-regular-400.eot);
   src: url (../ webfonts / fa-regular-400.eot? #iefix) format ("embedded-opentype"),
     url (../ webfonts / fa-regular-400.woff2) format ("woff2"),
     url (../ webfonts / fa-regular-400.woff) format ("woff"),
     url (../ webfonts / fa-regular-400.ttf) format ("truetype"),
     url (../ webfonts / fa-regular-400.svg # fontawesome) format ("svg");
}

Do I also need to include the FontAwesome JS files?

4

Not sure actually. It seems like some icons are just missing. Or all icons are not showing up?

5

Finally, I have decided to use the <i> tag with the appropriate fontawesome class for the up arrow. For some unknown reason, it doesn’t work when I enter the following in the style sheet:

#back-to-top::after {
     content: "\f077";
     font-family: 'Font Awesome 5 Free';}

The final code in HTML looks like this:

<a id="back-to-top" href="#"> Back to top <i class = "fas fa-chevron-up"> </i> </a>