Font Awesome Icons not showing up at all - html

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

Related

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

<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

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

How Add Icon in project?

I want to use icons in my project, I add icons like this:
<a href="#">
<i class="icon-display4"></i>
<span class="visible-xs-inline-block position-right"> start</span>
</a>
And add I link them in <head>:
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Roboto:400,300,100,500,700,900" rel="stylesheet" type="text/css">
But the icons don't show.
How can I fix this?
Make sure your icon actually exists. It looks like you're trying to use:
<i class="icon-user-tie">
But a search on the official website doesn't show this one as being an active icon.
You can add font awesome icons with example:
<i class="fa fa-plus"></i>
Here a list with all the icons from font awesome:
http://fontawesome.io/icons/
I can't understand the question, but I think this might be what you are looking for:
to add images, then use the tag, the syntax goes like this:
<img src="image location like https://i.imgur.com/HLXsgMd.jpg">
for linked images then put the image inside the a tag, like this:
<img src="image location">
to make a favicon (the icon that appears next to the page title) this should work:
Please do note that it has to be a .ico file see here.
<link rel="shortcut icon" href="image location">
If you Want To Use Icons In Your Page Then You Have to Use awesome icons
Go-to: http://fontawesome.io/icons/
First You Need To Add Font Awesome Css File On Your Page. then After You Can Used It any where in page.
Add This : <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
For example, I'm using this icon:
<i class="fa fa-pencil" aria-hidden="true"></i>
If by 'icons' you mean Bootstrap Glyphicons, I recommend visiting https://www.w3schools.com/icons/bootstrap_icons_glyphicons.asp, they also come predefined with bootstrap standard plugins e.g. glyphicons-halflings-regular files.

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