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

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

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

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){
}

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

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

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"/>

Make sure your mobile is connected to the internet

Related

How to add and change font awesome icon

I can't add Font Awesome icon on the popup. Please, help me to figure out how it works. I don't know how to add the icon and change the color in CSS.
Here is HTML
<i class="fas fa-check-circle">
Here is CSS:
.fa-check-circle {color: #ffffff;}
What's wrong?
It doesn't work. I can't see the icon on the popup.
Here is my pin
Fontawesome library not added. Add it
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">
fontawesome start page
the problem is that you'r not using font-awesome CDN,CDN is a content delivery network which refers to a geographically distributed group of servers which work together to provide fast delivery of Internet content. A CDN allows for the quick transfer of assets needed for loading Internet content including HTML pages, javascript files, stylesheets, images, and videos
In your case the classes (fas fa-check-circle) you've used are written inside the font-awesome servers .to access them you should link your webpage .To do that use the below link
<link rel="stylesheet"
href="https://use.fontawesome.com/releases/v5.5.0/css/all.css"
integrity="sha384-
B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU"
crossorigin="anonymous">
Another way to use the fontawsome icons is to download their entire icon library which will contain their scripts and classes and linking them to your page directly
Replace this -
<i class="fas fa-check-circle">
With
<i class="fa fa-check-circle">
Change the css with this:
.fas {
color: red;
}
It isn’t clear from your code if you’ve included font awesome into your page. Add this line (between the tags) to your page.
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

Bulma icon not showing up?

I am trying to use bulma icons following the docs here, but the icon doesn't show up:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.6.1/css/bulma.min.css">
<div>
<span class="icon">
<i class="fa fa-home"></i>
</span>
<span>ICON</span>
</div>
Also see the fiddle here, what could be the problem?
You also need to include the bulma.min.css file, not just the .map.
Edit
Per the Bulma docs:
If you want to use icons with Bulma, don't forget to include Font Awesome:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
Update 3/19/2019
As #Akshay has pointed out below, the documentation has changed and the proper way to include Font Awesome is now
<script defer src="https://use.fontawesome.com/releases/v5.3.1/js/all.js"></script>
Bulma icons won't show up unless you call fontawesome libraries, we can use a kit code for that. This will look like <script src="https://kit.fontawesome.com/xxxxxxxx.js"></script> in the <head>...</head> section of your code.
note: you can get the code "xxxxxxxx" for free usage of fontawesome icons from the website.
https://fontawesome.com/start

How we can use FONT AWESOME by css

How can I use font-awesome in css? I searched and see that I just need to download and copy font-awesome directory into my porject then display the icon by using content in css.
http://fontawesome.io/get-started/
Using CSS
Copy the entire font-awesome directory into your project.
In the <head> of your html, reference the location to your font-awesome.min.css.
<link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css">
From the documentation:
Using CSS
Copy the entire font-awesome directory into your project.
In the <head> of your html, reference the location to your font-awesome.min.css.
<link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css">
Then in the code of the page you insert an icon like that:
<i class="fa fa-camera-retro fa-2x"></i>
For more examples, see here. And here you will find the names of all icons.

Font Awesome fa-toggle-on is not displaying

I'm having trouble with the Font Awesome toggle on and off icons not appearing. All of the icons that I have been using have been working, but now this one doesn't seem to. Is there a work around, or a fix I can apply? I'm simply doing:
<i class="fa fa-toggle-on"></i>
I updated my css reference to the latest font-awesome stylesheet and now is all working.
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">

Font Awesome Icons not showing up at all

I am working with bootstrap and am using chrome.
I put the following code in my HTML file to import FontAwesome.
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
And then put in the following icon.
<i class="fa fa-search"></i>
Nothing showed up at all! When I inspect element, it's a 0x0 text. No height no width. It doesn't show up at all.
If you are testing it locally add http: to the beginning of you href value.
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">