Trying to figure out why icons are showing white icons. I have already tried changing 'fab' to 'fa' but no luck. Has anyone else come across this problem using Font Awesome?
* {
font-family: 'Open Sans', sans-serif !important;
}
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<ul>
<li><a><i class="fas fa-facebook"></i></a></li>
<li><a><i class="fas fa-twitter"></i></a></li>
<li><a><i class="fab fa-youtube"></i></a></li>
<li><a><i class="fab fa-instagram"></i></a></li>
</ul>
Check working code snippet.
In your code you have 2 issues:
1) fas and fab need to be changed to fa
2) all <i> items need to be of font-family fontawesome, and your code:
* {
font-family: 'Open Sans', sans-serif !important;
}
just rewrites their default styles and icons can't be rendered. Better don't use * selector with style rules like font-family to avoid such issues. So you can either remove these lines, or explicitly tell <i> tags to be of proper font-family, like in my code snippet.
Why is my icons showing squares on font awesome?
many reason:
First of all, you reset the font-family, so no way to get the icone to show. , then :
you are using the wrong library (or the wrong class naming)
wrong class names for some
you can filter all of your class starting with fa to avoid overwritting the font-family that shows icons.
example below , filtering icon containers via the :not() selector, adding the good library and fixing class name for facebook and twitter.
*:not([class^="fa"]) {
font-family: 'Open Sans', sans-serif !important;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css" rel="stylesheet" />
<ul>
<li><a><i class="fab fa-facebook-f"></i></a></li>
<li><a><i class="fab fa-twitter"></i></a></li>
<li><a><i class="fab fa-youtube"></i></a></li>
<li><a><i class="fab fa-instagram"></i></a></li>
</ul>
Your style tag is overriding the font that fontawesome is providing to display the icons.
* {
font-family: 'Open Sans', sans-serif !important;
}
Removing the !important will suffice.
Also the class to apply to the <i> tags is fa (not fab or fas)
Your code should look like the following just wrong font awesome class for icon
<!DOCTYPE html>
<html>
<head>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<style>
*{
font-family: 'Open Sans', sans-serif;
}
</style>
</head>
<!DOCTYPE html>
<html>
<body>
<ul>
<li><a><i class="fa fa-facebook"></i></a></li>
<li><a><i class="fa fa-twitter"></i></a></li>
<li><a><i class="fa fa-youtube"></i></a></li>
<li><a><i class="fa fa-instagram"></i></a></li>
</ul>
</body>
</html>
font-awesome 4.x version CDN - <i class="fa fa-facebook"></i>
Live link - Jsfiddle for 4.x version
<!DOCTYPE html>
<html>
<head>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
</head>
<!DOCTYPE html>
<html>
<body>
<ul>
<li><a><i class="fa fa-facebook"></i></a></li>
<li><a><i class="fa fa-twitter"></i></a></li>
<li><a><i class="fa fa-youtube"></i></a></li>
<li><a><i class="fa fa-instagram"></i></a></li>
</ul>
</body>
</html>
font-awesome 5.x version CDN - <i class="fas fa-facebook"></i>
Live link - Jsfiddle for 5.x version
<!DOCTYPE html>
<html>
<head>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css" rel="stylesheet">
</head>
<!DOCTYPE html>
<html>
<body>
<ul>
<li><a><i class="fab fa-facebook-f"></i></a></li>
<li><a><i class="fab fa-twitter"></i></a></li>
<li><a><i class="fab fa-youtube"></i></a></li>
<li><a><i class="fab fa-instagram"></i></a></li>
</ul>
</body>
</html>
Wrong Version
All you have to do is turn them all into fa-fa, then remove the font. You should use Font Awesome version 4.70.0 for this (shows the old youtube logo.):
https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css.
If you don't want to do that, you'll have to go to the 5.12.0 version of Font Awesome, which I wouldn't want to do - just type the above link instead of the one in your code.
full code:
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<ul>
<li><a><i class="fa fa-facebook"></i></a></li>
<li><a><i class="fa fa-twitter"></i></a></li>
<li><a><i class="fa fa-youtube"></i></a></li>
<li><a><i class="fa fa-instagram"></i></a></li>
</ul>
Related
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>
I am trying to use Font Awesome for one of my projects.
on localhost the icons are working but on-site are shown as squares
* {
font-family: 'Montserrat', sans-serif;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<link href="https://fonts.googleapis.com/css2?family=Montserrat&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css">
<i class="fab fa-2x fa-react mr-3"></i>
<i class="fab fa-2x fa-css3-alt mr-3"></i>
I guess the problem is the font-family, everything was working fine before I decided to import Montserrat for my project
I have to use this font, can't change it.
Does anyone know how to fix this problem?
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.
I added the font-awesome CDN Html link from the website and placed in the head, and still, the icon wouldn't show. I'm new to Html and need specific instructions on how to fix this.
I even tried downloading it and linking the file locally but that didn't work.
<head>
<title>Social Media</title>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
</head>
<ul>
<li>
<i class="fas fa-search"></i>
</li>
</ul>
The problem here is that the icon fas fa-search is from Fontawesome version 5, but you are loading Fontawesome version 4.7.
Fontawesome 4.7 has instead the fa fa-search icon.
<head>
<title>Social Media</title>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
</head>
<ul>
<li>
<i class="fa fa-search" style="font-size:30px;"></i>
</li>
</ul>
Please check first what font you are using i mean latest or old there are old 4.7.0 there are different between fa and fas
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.