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.
Related
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>
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 am currently trying to get icons to appear on my web page but it appears that there's a problem. On my homepage the icons work, on my about page however, all that appears are squares. Here is the corresponding code:
HTML:
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-
awesome.min.css">
<link href="http://fonts.googleapis.com/css?family=Cookie" rel="stylesheet" type="text/css">
<div class="footer-icons">
<i class="fa fa-facebook"></i>
<i class="fa fa-twitter"></i>
<i class="fa fa-instagram"></i>
<i class="fa fa-youtube"></i>
</div>
Sorry to state the obvious, but given that you get different outcomes in different contexts your question should indicate what is different about those contexts. The problem doesn't appear to be in this code, alone.
I am making a webpage using Bootstrap4(CDN) and I intend to use FontAwesome icons for my social media links. However on opening the page I see some blue boxes instead of the icons and they are functional. I just need the icons to be displayed. Any help would be appreciated.
Here are the necessary snippets :
1.
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
2.
<ul class="social-icons">
<li><i class="fab fa-facebook"></i></li>
<li><i class="fab fa-quora"></i></li>
<li><i class="fab fa-github"></i></li>
<li><i class="fab fa-envelope"></i></li>
</ul>
Here is what I see...
Since you are using the v4.*.* of font-awesome the prefix class of invoking your desired icon is fa not fab.
fab and fas are for the brand and solid styles in v5.*.* and also, fa is deprecated in this version. You can read more about it here.
so you need to make a change in your script just like this:
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<ul class="social-icons">
<li><i class="fa fa-facebook"></i></li>
<li><i class="fa fa-quora"></i></li>
<li><i class="fa fa-github"></i></li>
<li><i class="fa fa-envelope"></i></li>
</ul>
NOTE: You can upgrade your current version from here.
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css">
<ul class="social-icons">
<li><i class="fab fa-facebook"></i></li>
<li><i class="fab fa-quora"></i></li>
<li><i class="fab fa-github"></i></li>
<li><i class="fa fa-envelope"></i></li>
</ul>
The problem is with the CDN you have. Request a Kit by creating an account on fontawesome website. They will give you something like this: <script src="https://kit.fontawesome.com/fc188b5fd5.js" crossorigin="anonymous"></script> or you can simply use this.
For displaying the envelope you need to change from <i class="fab fa-envelope"></i> to <i class="fa fa-envelope"></i>.
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.