I have quick question of using fontawesome icon in HTML.
I've tried the solutions to import the kit and link the all.css
<script
src="https://kit.fontawesome.com/"my kit id".js"
crossorigin="anonymous"
></script>
...
<i class="fa-solid fa-xmark"></i>
<script src="css/all.css"></script>
...
<i class="fa-solid fa-xmark"></i>
but it still not worked.I don't understand how to solve this problem
You can easily to use font-awesome by using CDN:
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
</head>
It should work!
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 working on a front end project where I have to load font awesome icons in my page . I included in my <head> tag the link :
<link rel="stylesheet" type ="text/css" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
Then I tried loading a picture in my html like <span class="focus-input100 fa"></span>
which I had seen from another post here . However the pic does not load . This is the first time I am using font awesome and I would appreciate your help.
<link rel="stylesheet" type ="text/css" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<span class="focus-input100 fa"></span>
EDIT : I check the page console and find the error :
Refused to apply style from 'http://127.0.0.1:5500/HTML_FILES/cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/%E2%80%A6' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.
<script src="https://kit.fontawesome.com/a076d05399.js"></script>
<i class="fas fa-cloud"></i>
<i class="fas fa-heart"></i>
<i class="fas fa-car"></i>
<i class="fas fa-file"></i>
<i class="fas fa-bars"></i><br/>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<i class="material-icons">computer</i>
<i class="material-icons">traffic</i><br/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
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>
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.