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.
Related
I am creating a html file where i used fontawsome icons
when i am using any brand icon like facebook, discord,etc it just shows up normally, but when i use any normal icons like magnifying tool and any other it just showing some squares and doesn't shows up the real icon i added the latest fontawsome cdn in head also.
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css" integrity="sha512-xh6O/CkQoPOWDdYTDqeRdPCVd1SpvCA9XXcUnZS2FmJNp1coAFzvtCN9BmamE+4aHK8yyUHUSCcJHgXloTyT2A==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<i class="fa-brands fa-discord"></i>
<i class="fa-regular fa-magnifying-glass"></i>
<i class="fa-duotone fa-phone"></i>
<i class="fa-brands fa-whatsapp"></i>
<i class="fa-solid fa-magnifying-glass"></i> is not a "Pro Icon" so you can use it for free.
<i class="fa-regular fa-magnifying-glass"></i> is a "Pro Icon" so you cannot use it for free.
Is it only me that cannot render bitcoin and facebook icons in version 5.0.8 ?
<link rel="stylesheet" type="text/css" href="https://use.fontawesome.com/releases/v5.0.8/css/fontawesome.css">
<i class="fa fa-btc"></i>
<i class="fa fa-bitcoin"></i>
<i class="fa fa-facebook"></i>
<i class="fa fa-facebook-f"></i>
You also need to use the brands.css stylesheet in font-awesome 5.0.8. Additionally, you need to make sure your class names are up to date. Try the snippet below:
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.8/css/brands.css" integrity="sha384-IiIL1/ODJBRTrDTFk/pW8j0DUI5/z9m1KYsTm/RjZTNV8RHLGZXkUDwgRRbbQ+Jh" crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.8/css/fontawesome.css" integrity="sha384-q3jl8XQu1OpdLgGFvNRnPdj5VIlCvgsDQTQB6owSOHWlAurxul7f+JpUOVdAiJ5P" crossorigin="anonymous">
<i class="fab fa-btc"></i>
<i class="fab fa-bitcoin"></i>
Alternatively, you can just use the all.css stylesheet to include all the styles
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.8/css/all.css" integrity="sha384-3AB7yXWz4OeoZcPbieVW64vVXEwADiYyAEhwilzWsLw+9FgqpyjjStpPnpBO8o8S" crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.8/css/all.css" integrity="sha384-3AB7yXWz4OeoZcPbieVW64vVXEwADiYyAEhwilzWsLw+9FgqpyjjStpPnpBO8o8S" crossorigin="anonymous">
<i class="fab fa-btc"></i>
<i class="fab fa-bitcoin"></i>
You need to load all the icon type as the bitcoin belong to the brand ones. As you can see below you can choose pack of icon you want to load: https://fontawesome.com/get-started/web-fonts-with-css
You also need to use fab not fa. https://fontawesome.com/how-to-use/web-fonts-with-css
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.8/css/all.css" >
<i class="fab fa-btc"></i>
<i class="fab fa-bitcoin"></i>
<i class="fab fa-facebook"></i>
<i class="fab fa-facebook-f"></i>
This can fix the problem for all fontawesome font types in less then 2 mins. Simple replacement of /font-awesome/5.13.0/css/fontawesome.min.css with /font-awesome/5.13.0/css/all.min.css and also font-awesome/5.13.0/js/fontawesome.min.js with /font-awesome/5.13.0/js/all.min.js can fix this issue. https://youtu.be/_GV_pEmLCLU
Font Awesome is installed, and most icons work. Facebook and Twitter icons, however, do not.
I have tried changing the fa class to fab, and vice versa: neither work.
Here is the code. The top icon renders correctly:
info#site.org <i class="fas fa-envelope" style="margin-left: 5px"></i><br />
#site <i class="fab fa-twitter" style="margin-left: 5px"></i><br />
site <i class="fa fa-facebook" style="margin-left: 5px"></i>
Any suggestions on how to get the social icons working is greatly appreciated!
Fix: This was just a case of not having updated FontAwesome to the latest version, so the icon references were broken. Easy mistake! Hopefully this helps someone.
Icons work properly. Probably you made an error somewhere.
<i class="fab fa-3x fa-facebook"></i>
<i class="fab fa-3x fa-facebook-f"></i>
<i class="fab fa-3x fa-facebook-square"></i>
<i class="fab fa-3x fa-twitter"></i>
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.10.2/js/all.min.js"></script>
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>
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