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
Related
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.
I'm trying to solve the problem with invisible icons?
HTML
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<i class="fa fa-angle-up">cos tam</i>
</body>
CSS
#import url("fontawesome.min.css");
body{
margin: 0;
padding: 0;
}
enter image description here
Check which version you are using, based on that you might need to change the classes.
https://fontawesome.com/v5.15/icons/angle-up?style=solid
From the folder image you shared it is located at the same level as your main.css, so your path should be correct:
#import url("fontawesome.min.css");
But try in case:
#import url("../css/fontawesome.min.css");
#import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css");
<i class="fas fa-angle-up"></i>
Use the link tag from https://cdnjs.com/libraries/font-awesome , and add that in the head section.
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-
awesome/5.15.3/css/all.min.css"/>
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<i class="fa fa-angle-up">cos tam</i>
</body>
Here I can totally assure you that directory is working just fine but still the problem persists.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="../../node_modules/bootstrap/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="../../public/css/style.css">
<title>Helper</title>
</head>
<body>
<h1>Just click below </h1>
<button class="btn btn-success">Click Here </button>
<script src="../../node_modules/jquery/dist/jquery.js" type="text/javascript"></script>
<script src="../../node_modules/bootstrap/dist/js/bootstrap.js"></script>
</body>
</html>
Here it should have been button success but it's showing simple button.
The problem is definitely from the bootstrap directory, there is no possible way that there is any other problem, please use a code editor to help you navigate to your directory correctly.
here is a Code with a cdn bootstrap and its working normally.
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Test</title>
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<meta content="" name="keywords">
<meta content="" name="description">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/css/bootstrap.min.css">
</head>
<body>
<div class="col-xl-12 text-center">
<h1>Just click below </h1>
<button class="btn btn-success">Click Here </button>
<button class="btn btn-primary">Click Here </button>
<button class="btn btn-danger">Click Here </button>
</div>
</body>
</html>
This question already has answers here:
Font Awesome 5, why is CSS content not showing?
(6 answers)
Closed 2 years ago.
I am trying to use Awesome icons in a Laravel/Vue project. But for some reason the icon doesn't show properly, whatever I try.
I now tried the most simple thing with Awesome I could imaging: a simple HTML-page using a CDN. The code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<header>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
</header>
<body>
<i class="fas fa-camera"></i>
</body>
</html>
But, like in my Laravel project, I am not seeing the camera icon, but some kind of dummy icon: a rectangle with F030 in it.
BTW: I run a Xampp stack under Windows.
What am I doing wrong?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<header>
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous"/>
</header>
<body>
<i class="fas fa-camera"></i>
</body>
</html>
I just edited the link with a cdn link from the font-awesome page
, whatever you embed does not include your desired icon
taken from here
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.