I embedded cdn link on my html header and it's not showing any kind of icon, it's showing an empty box please check this code snippet and its result to know what i mean. any help would be appreciated. the link was given by font awesome via email upon registration
<script src="https://use.fontawesome.com/44c6a45abc.js"></script>
<i class="fa-solid fa-user"></i>
<!-- regular style -->
<i class="fa-regular fa-user"></i>
<!-- light style -->
<i class="fa-light fa-user"></i>
<!-- duotone style -->
<i class="fa-duotone fa-user"></i>
<!-- all new thin style -->
<i class="fa-thin fa-user"></i>
<!--brand icon-->
<i class="fa-brands fa-github-square"></i>
</body>
For me it works but not for the first to the fifth icon because they are pro icons that have to be used with the fontawesome pro account.
<head>
<script src="https://use.fontawesome.com/44c6a45abc.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.2/css/all.min.css" integrity="sha512-1sCRPdkRXhBV2PBLUdRb4tMg1w2YPf37qatUFeS7zlBy7jJI8Lf4VHwWfZZfpXtYSLy85pkm9GaYVYMfw5BC1A==" crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>
<body>
<i class="fa-solid fa-user"></i>
<!-- regular style -->
<i class="fa-regular fa-user"></i>
<!-- light style -->
<i class="fa-light fa-user"></i>
<!-- duotone style -->
<i class="fa-duotone fa-user"></i>
<!-- all new thin style -->
<i class="fa-thin fa-user"></i>
<!--brand icon-->
<i class="fa-brands fa-github-square"></i>
</body>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.0.0/css/font-awesome.css">
<style>
i {
font-size : 20px;
padding:0 10px;
}
</style>
<body>
<!-- regular style -->
<i class="fa fa-google-plus"></i>
<!-- light style -->
<i class="fa fa-facebook"></i>
<!-- duotone style -->
<i class="fa fa-user"></i>
<!--brand icon-->
<i class="fa fa-github-square"></i>
</body>
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.
I have a CSS issue hiding the text in my side menu and leave the font awesome icons on mobile view, and I can't think of any reasonable solution. I use bootstrap 4
Then code of my sidebar menu
<div class="sidebar">
<a class="active" href="#Link0"><i class="fas fa-walking"></i> Link0</a>
<i class="fas fa-users"></i> Link1
<i class="fas fa-cog"></i> Link2
<i class="fas fa-headset"></i> Link3
</div>
According to the bootstrap manual, I should be able to hide any element between any suitable tag with class="d-SM-none d-MD-block". My problem is that I want the icon on the left-hand side to stay visible for mobile view and hide the text but when I put the text between <div> tags text always appears one line down from the icon. I tried <i> <p> tags and still the same issue and btw the text doesn't hide anyways :D
Any help welcome!
What I tried and didn't work:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<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" />
<div class="sidebar">
<a class="active" href="#Link0"><i class="fas fa-walking"></i> <div class="d-sm-none d-md-block">Link0</div></a><!--Text is one line down from icon-->
<i class="fas fa-users"></i><p class="d-sm-none d-md-block"> Link1</p><!--Text is one line down from icon-->
<i class="fas fa-cog"></i> Link2
<i class="fas fa-headset"></i> Link3
</div>
The hidding part works fine, the problem is that you try to add some elements that are default display with block (div, p) so replace that by span.
Then don't use class d-md-block as you are in a that has a default display: inline. So you should use class d-md-inline.
Result:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<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" />
<div class="sidebar">
<a class="active" href="#Link0"><i class="fas fa-walking"></i> <span class="d-sm-none d-md-inline">Link0</span></a><!--Text is one line down from icon-->
<i class="fas fa-users"></i><span class="d-sm-none d-md-inline"> Link1</span><!--Text is one line down from icon-->
<i class="fas fa-cog"></i> Link2
<i class="fas fa-headset"></i> Link3
</div>
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
I've added a footer to a webprofile. On codepen everything worked, but when I put the same code on bluefish coder, the e-mail icon gets below the facebook and instagram icon.
I would like them to be aligned. One on the side of the other. The three of them. I have not put span or anything like that. I'm putting the specifications below.
p {
display: inline-block;
}
<!-- bootstrap version and the one I know how to work with -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<!-- ======font awesome======= -->
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<!-- The font awesome icons I put -->
<div class="navbar navbar-inverse navbar-static-bottom">
<div class="container">
<div class="navbar-text pull-left">
<p>© 2017 All Rights Reserved</p>
<p style="font-family: Dancing Script;font-size: 17px;"> Marina Sanchez </p>
</div>
<div class="navbar-text pull-right" style="display: inline-block;">
<i class="fa fa-facebook fa-2x" aria-hidden="true"></i>
<a href="https://www.instagram.com/marina_k25/"><i class="fa fa-instagram fa-2x" aria-hidden="true"></i>
</a>
<a href="mailto:foobar#gmail.com" class="btn btn-lg btn-block btn-social btn-email"><i class="fa fa-envelope-o fa-2x" aria-hidden="true"></i>
</a>
</div>
</div>
</div>
I have finished everything and I'm stuck on this one could anyone help me please.
Also below goes my codepen which the footer is working, but not on my bluefish coder.
https://codepen.io/JT_Cerqueira/full/WZbEdq/
The reason your mail icon is sitting below the other icons is because you have a class on it and it's pulling in as display:block;. To fix this, simply remove this class class="btn btn-lg btn-block btn-social btn-email">. Also, get rid of the unnecessary carrot you have it's parsing it as text and is invalid HTML.
<!-- bootstrap version and the one I know how to work with -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<style>
/*=============footer============*/
p {
display: inline-block;
}
</style>
<!-- ======font awesome======= -->
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<!-- The font awesome icons I put -->
<div class="navbar navbar-inverse navbar-static-bottom">
<div class="container">
<div class="navbar-text pull-left">
<p>© 2017 All Rights Reserved</p>
<p style="font-family: Dancing Script;font-size: 17px;"> Marina Sanchez </p>
</div>
<div class="navbar-text pull-right" style="display: inline-block;">
<i class="fa fa-facebook fa-2x" aria-hidden="true"></i>
<a href="https://www.instagram.com/marina_k25/"><i class="fa fa-instagram fa-2x" aria-hidden="true"></i>
</a>
<a href="mailto:foobar#gmail.com"><i class="fa fa-envelope-o fa-2x" aria-hidden="true"></i>
</a>
</div>
</div>
</div>
<!-- bootstrap version and the one I know how to work with -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<style>
/*=============footer============*/
p {
display: inline-block;
}
</style>
<!-- ======font awesome======= -->
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<!-- The font awesome icons I put -->
<div class="navbar navbar-inverse navbar-static-bottom">
<div class="container">
<div class="navbar-text pull-left">
<p>© 2017 All Rights Reserved</p>
<p style="font-family: Dancing Script;font-size: 17px;"> Marina Sanchez </p>
</div>
<div class="navbar-text pull-right" style="display: inline-block;">
<i class="fa fa-facebook fa-2x" aria-hidden="true"></i>
<a href="https://www.instagram.com/marina_k25/"><i class="fa fa-instagram fa-2x" aria-hidden="true"></i>
</a>
<a href="mailto:foobar#gmail.com"><i class="fa fa-envelope-o fa-2x" aria-hidden="true"></i>
</a>
</div>
</div>
</div>
Now you can run code sinppet correct result.
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.