How to fix font awesome icons not showing on mobile / chrome?

Question

<i class="fa fa-laptop-code large-icon"></i>

I use this html code for font awesome icon, it's showing perfectly on desktop , the problem is only with mobile view.**

Make sure that you are using the latest version of CDN. https://fontawesome.com/account/cdn — Mojtaba, Nov 05 '21 at 09:22
You need use the SVG icons to mobile :) https://stackoverflow.com/questions/14984007/how-do-i-include-a-font-awesome-icon-in-my-svg — Jhosman, Jul 10 '22 at 03:57

score 2 · Answer 1 · answered Oct 26 '21 at 08:27

2

Oddly enough, adding random query string to my fontawesome cdn link (example: ?v=7857324) worked for me. Looks like in my case I just needed to force reload the file for my users..

From

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css">

to

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css?v=7857324">

answered Oct 26 '21 at 08:27

JuliaJ

79
7

1

This worked for me. How in the hell did you determine that would work? Regardless, thanks. – Roy Oliver Nov 02 '22 at 20:35

score 1 · Answer 2 · answered Apr 16 '21 at 02:23

I faced the same issue when I tried to host font awesome icons by myself using the all.css file inside my CSS folder and importing it to the HTML page. I resolved the issue by importing the font awesome CDN link instead of using the all.css file.

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.3/css/all.css" integrity="sha384-SZXxX4whJ79/gErwcOYf+zWLeJdY/qpuqC4cAa9rOGUstPomtqpuNWT9wdPEn2fk" crossorigin="anonymous">

score 0 · Answer 3 · answered Jul 10 '19 at 06:27

0

Possible Problem 1

You are using the

<i class="fa fa-laptop-code large-icon"></i>

if you are using the latest version of font-awesome it is most likely

<i class="fas fa-laptop-code"></i>

try downgrading your version or updating your classes to "fas"

Possible Problem 2

Check on your mobile view if you have any css that is exists only on the mobile view e.g.

@media screen and (max-width:600px){

}

answered Jul 10 '19 at 06:27

Frosty

299
5
31

so according to you, technically if i use 'fas' then the icons will be display on mobile? – Creative El-DORADO Jul 10 '19 at 07:19

score 0 · Answer 4 · answered Feb 21 '21 at 16:06

0

This problem mainly occurs when you use outdated Font Awesome CDN. Try using the latest one from their website.

Hope this will work.

answered Feb 21 '21 at 16:06

Abhishek Nishad

549
4
2

score 0 · Answer 5 · answered Aug 26 '21 at 11:44

For me this worked:

I was using the official fontawesome cdn. So I changed my current one for the one privide for fontawesome in their official web:

<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous"/>

score -7 · Answer 6 · answered Mar 06 '20 at 06:55

-7

Make sure your mobile is connected to the internet

answered Mar 06 '20 at 06:55

user13017096

1

How to fix font awesome icons not showing on mobile / chrome?

6 Answers6