This question already has answers here:
How to change the inner white color of Font Awesome's exclamation triangle icon?
(2 answers)
Closed 3 years ago.
Is it possible to change the colour of the transparent parts of the font-awesome icons I am using?
Currently my page looks like this, however I would like it to look Like this
(I used red for clarity's sake)
I read something about gradients but this would extend too far out and would show outside the transparant space
You can change the color by using color property but the icons that are in images can't be changed by this property. But if you use these icons <i class="fas fa-envelope"></i>, <i class="fab fa-linkedin-in"></i> instead of that are in image then you can change the color by using color property
use the below code:
HTML & CSS code
.linkedin-icon{
color: red;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ"
crossorigin="anonymous">
<title>Document</title>
</head>
<body>
<span class="fa-stack">
<i class="linkedin-icon fab fa-linkedin fa-stack-2x"></i>
</span>
</body>
</html>
Related
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
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.
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.
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