Font Awesome Icon not loading properly [duplicate] - html

This question already has answers here:
Font Awesome Icons Not Showing Up on my webpage I made using Bootstrap4
(3 answers)
Closed 2 years ago.
I have a GitHub Pages site up and I'm using some Font Awesome icons at the bottom. Three of them load, but the last one isn't.
How the stylesheet is linked:
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.1/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
How the icons are placed:
<a class="btn_social"><i class="fab fa-twitter"></i></a>
<a class="btn_social"><i class="fa fa-twitter"></i></a>
<a class="btn_social"><i class="fab fa-envelope"></i></a>
<a class="btn_social"><i class="fab fa-twitter"></i></a>
I've tried replacing fa with fab and fal but im not sure what these mean or what they do.


I have used your key.
My code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.1/css/all.css"
integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
</head>
<body>
<a class="btn_social"><i class="fab fa-twitter"></i></a>
<a class="btn_social"><i class="fab fa-twitter-square"></i></a>
</body>
</html>
Output
btn_social
I do not have the properties of this. If you need more feedback, please share your code (full).
I hope that the community helps you.

Related

Why fa-heart-o not working in Fontawesome 5? [duplicate]

This question already has answers here:
Can't use any Fontawesome icon with "-o" ending
(4 answers)
Closed 8 months ago.
I want to use fa-heart-o in Fontawesome 5 free version but it is not working. what should I do? can I use 2 version of Fontawesome in a page? 4.7 and 5.1? because it is working in 4.7 version.
this is my code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<li>
<i class="fas fa-heart-o"></i>
</li>
<script src='https://kit.fontawesome.com/a076d05399.js' crossorigin='anonymous'></script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<li>
<i class="fa fa-heart-o"></i>
</li>
<script src='https://kit.fontawesome.com/a076d05399.js' crossorigin='anonymous'></script>
</body>
</html>

You need to change to <i class="fas fa-heart-o"></i> to <i class="fas fa-heart"></i>
because with the -o in awesome font 5 it wont work.
Codepen

Font-Awesome version 6 icons not showing

First example is not showing, but second example is showing. Why?
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" />
</head>
<body>
<i class="fa-solid fa-square-info"></i> NOT SHOWING
<i class="fas fa-info-circle"></i> SHOWING
</body>
</html>

This is because the icon fa-solid fa-square-info is a PRO icon and it's not available for use in the free version of font-awesome. So the icon is not rendering. Alternatively you can try using Material Design Icons which is open source and free to use.

Adding Icons using CSS

I am learning how to add Icons to my HTML and there is an example of it from W3 Schools like this :
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
Which is pretty much to link the stylesheet and be able to enter the icons from Font awesome page. However I do not like the messy way of adding it directly to the HTML . Is there an easier way for beginners to add Icons to the actual CSS instead of the body directly ?
Thank you ,

The easy way is to use fa icons
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<i class="fa fa-car"></i>
<i class="fa fa-car" style="font-size:48px;"></i>
<i class="fa fa-car" style="font-size:60px;color:red;"></i>
</body>
</html>

fontawesome 5 some icons are not rendering

Issue with font awesome version 5. Some icons are not getting rendered. Instead shows animation with question mark and exclamation. If I use version 4 and css it gets rendered. Anyone have this issue ?
<!DOCTYPE html>
<html>
<head>
<script defer src="https://use.fontawesome.com/releases/v5.0.9/js/all.js" integrity="sha384-8iPTk2s/jMVj81dnzb/iFR2sdA7u06vHJyyLlAd4snFpCl/SnyUjRrbdJsw1pGIl" crossorigin="anonymous"></script>
</head>
<body class="body">
<i class="fa fa-google-plus-square"></i>
<i class="fas fa-google-plus-square"></i>
<i class="fas fa-check-square"></i>
</body>
</html>
Here the google-plus-square icon is not rendering. This is how it appears in the browser

Because you are calling wrong class
**This Is Wrong**
<i class="fa fa-google-plus-square"></i>
<i class="fas fa-google-plus-square"></i>
**For Font Awesome 5 Instead of That USe THis**
<i class="fab fa-google-plus-square"></i>
Search Icon From Here
https://fontawesome.com/icons?d=gallery

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
Use this link instead of script

Another reason your font-awesome icons are not rendering could be that you are trying to use a Pro icon when you have the fontawesome-free package.
For example, in Font Awesome 6, to use <i class="fa-solid fa-code"></i>, fontawesome-pro package is required.

Bootstrap, Font awesome not showing the icons but the icon is spinning

Hi I am using Bootstrap to design a 'Site Maintenance' page.
I am using the 'Spinning Icon Font' to display the spinning gears. While this works very fine on my local XAMPP server, it is not showing when I upload it to online server.
Should be:
But it is showing as
However those rectangular frames shown in the second pic are spinning, but it is not showing the gears.
My index.html
<!DOCTYPE html>
<head>
<title>Maintenance</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<!-- Google Font -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:400,400italic,600,600italic,800,800italic">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Oswald:400,300,700">
<!-- Font Awesome CSS -->
<link rel="stylesheet" href="/css/font-awesome.min.css">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="/css/bootstrap.min.css">
<!-- App CSS -->
<link rel="stylesheet" href="/css/admin.css">
</head>
<body class="">
<div class="maintenance-wrapper">
<div class="maintenance">
<div class="maintenance-icon">
<i class="fa fa-cog fa-spin gear-1"></i>
<i class="fa fa-cog fa-spin gear-2 text-primary"></i>
<i class="fa fa-cog fa-spin gear-3 text-secondary"></i>
</div> <!-- /.The Spinning-icons -->
<h1 class="maintenance-title">Site Maintenance</h1>
</body>
</html>
Where am I doing wrong?
Live example can be see at http://vikramrao.com

"font-awesome.min.css" is trying to load fonts from:
http://vikramrao.com/fonts/
so:
http://vikramrao.com/fonts/fontawesome-webfont.woff2
http://vikramrao.com/fonts/fontawesome-webfont.woff
http://vikramrao.com/fonts/fontawesome-webfont.ttf
Don't exists, it throws 404 error (not found)
You should create this folder and upload this files.

I saw your code structure and found that you provided improper path for font in stylesheet. See my screen capture