I am trying understand what it is going on, I am using font-awesome and 2 icons not load at all in Firefox, can you guys help me to solve it?
if you open the jsfiddle you will see works on chrome but not in firefox.
icons not working are:
fa-user-circle-o
fa-calendar-plus-o
icon working: fa fa-pencil-square-o
Tested in:
Firefox 55.0.2 (64-bit) for Ubuntu
Chrome Version 58.0.3029.96 (64-bit) for Ubuntu
jsfiddle: https://jsfiddle.net/s15dxabc/4/
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<br><br>
<i class="fa-calendar-plus-o"></i>
<br><br>
<i class="fa-user-circle-o"></i>
<br><br>
<i class="fa fa-pencil-square-o"></i>
Here is the updated js fiddle https://jsfiddle.net/s15dxabc/6/
You forgot to add .fa class
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<br><br>
<i class="fa fa-calendar-plus-o"></i>
<br><br>
<i class="fa fa-user-circle-o"></i>
<br><br>
<i class="fa fa-pencil-square-o"></i>
All fontawesome icons need the fa class too.
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<br><br>
<i class="fa fa-calendar-plus-o"></i>
<br><br>
<i class="fa fa-user-circle-o"></i>
<br><br>
<i class="fa fa-pencil-square-o"></i>
See the updated Fiddle :
Updated Fiddle
<br><br>
<i class="fa fa-calendar-plus-o"></i>
<br><br>
<i class="fa fa-user-circle-o"></i>
<br><br>
<i class="fa fa-pencil-square-o"></i>
You are missing the fa class on the two first elements.
https://jsfiddle.net/s15dxabc/8/
Should be:
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<br><br>
<i class="fa fa-calendar-plus-o"></i>
<br><br>
<i class="fa fa-user-circle-o"></i>
<br><br>
<i class="fa fa-pencil-square-o"></i>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<br><br>
<i class="fa fa-calendar-plus-o"></i>
<br><br>
<i class="fa fa-user-circle-o"></i>
<br><br>
<i class="fa fa-pencil-square-o"></i>
Related
<i class="fa fa-lg fa-eye" style="color:#007bff;"></i>
Please tell me the exact reason why this happen some font are showing while other show something else
Without your HTML it's hard to say why.
But, here is Font Awesome 6.12 working fine with fa-eye
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.2/css/all.min.css" rel="stylesheet" />
<div>
<span class="fa fa-lg fa-pencil"></span>
<span class="fa fa-lg fa-box-archive"></span>
<span class="fa fa-lg fa-eye"></span>
</div>
I'm creating bootstrap buttons with a fontawesome icons.
The 2 icons are:
fas fa-user
fas fa-users
which render ok. However, as soon as I add the bootstrap button css, the fa-users button shows up as a square and not the icon. Not sure why or how to fix this? Any help greatly appreciated. Thanks.
<div>
<em class="fas fa-user"></em>
<em class="fas fa-user btn btn-sm btn-purple"></em>
</div>
<div>
<em class="fas fa-users"></em>
<em class="fas fa-users btn btn-sm btn-purple"></em>
</div>
btn apply a font-weight that you need to override and put it back to the one defined inside fas
.fas.btn {
font-weight:900;
}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css">
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" crossorigin="anonymous">
<div>
<em class="fas fa-user"></em>
<em class="fas fa-user btn btn-sm btn-success"></em>
</div>
<div>
<em class="fas fa-users"></em>
<em class="fas fa-users btn btn-sm btn-success"></em>
</div>
Related: Font Awesome 5 on pseudo elements shows square instead of icon
I'm attempting to stack two icons. My attempt looks awful, because the central icon isn't centred within the fa-circle-o.
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<span class="fa-stack fa-lg">
<i class="fa fa-th-large fa-stack-1x"></i>
<i class="fa fa-circle-o fa-stack-2x"></i>
</span>
Is there a nice way to resolve this within the stacking system provided by font awesome?
As far as I know, you can't solve that using font-awesome classes, but you can do a very simple styling applying margin-top: 1px
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<span class="fa-stack fa-lg">
<i class="fa fa-th-large fa-fw fa-stack-1x" style="margin-top: 1px"></i>
<i class="fa fa-circle-o fa-fw fa-stack-2x"></i>
</span>
I want to add fa-blogger icon same as fa-github icon. But fa-blogger not working for me .
<link href='https://shefaleechaudhary.github.io/vendor/font-awesome/css/font-awesome.min.css' rel='stylesheet' type='text/css'>
<i class="fa fa-github"></i>
<i class="fa fa-blogger"></i>
<i class="fa fa-blog"></i>
I have referred this . Any help on this will be fantastic.
How can I set spacing between icons that appear in line? Here's my code:
<p>
<i class="fa fa-facebook fa-2x"></i>
<i class="fa fa-twitter fa-2x"></i>
<i class="fa fa-google-plus fa-2x"></i>
</p>
The icons are too close to each other for now.
use the fa-fw class:
http://fortawesome.github.io/Font-Awesome/examples/
It's clean, and better than adding a style to your elements.
Just set a margin as you would do for anything else. Pure CSS.
Actually you can use to create a space
<i class="fa fa-home fa-fw"></i> <i class="fa fa-home fa-fw"></i>
Other answers mention the fa-fw class, which works well for a lot of scenarios. However, there are some cases where this is not enough spacing.
For those who use Bootstrap, use me- (margin-right) or ms- (margin-left) classes to specify which side and how much margin.
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
<!-- Fontsawesome CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"
integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w=="
crossorigin="anonymous" />
<title>Bootstrap 5.0 Fontsawesome Margin Example</title>
</head>
<body>
<h1>No Margin</h1>
<p>
<i class="fab fa-facebook"></i>
<i class="fab fa-twitter"></i>
<i class="fab fa-google-plus"></i>
</p>
<h1>ME-1</h1>
<p>
<i class="fab fa-facebook me-1"></i>
<i class="fab fa-twitter me-1"></i>
<i class="fab fa-google-plus me-1"></i>
</p>
<h1>ME-2</h1>
<p>
<i class="fab fa-facebook me-2"></i>
<i class="fab fa-twitter me-2"></i>
<i class="fab fa-google-plus me-2"></i>
</p>
<h1>ME-3</h1>
<p>
<i class="fab fa-facebook me-3"></i>
<i class="fab fa-twitter me-3"></i>
<i class="fab fa-google-plus me-3"></i>
</p>
<h1>ME-4</h1>
<p>
<i class="fab fa-facebook me-4"></i>
<i class="fab fa-twitter me-4"></i>
<i class="fab fa-google-plus me-4"></i>
</p>
<h1>ME-5</h1>
<p>
<i class="fab fa-facebook me-5"></i>
<i class="fab fa-twitter me-5"></i>
<i class="fab fa-google-plus me-5"></i>
</p>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta3/dist/js/bootstrap.min.js"
integrity="sha384-j0CNLUeiqtyaRmlzUHCPZ+Gy5fQu0dQ6eZ/xAww941Ai1SxSY+0EQqNXNE6DZiVc"
crossorigin="anonymous"></script>
</body>
</html>
https://getbootstrap.com/docs/5.0/utilities/spacing/#margin-and-padding