Am trying to implement the HTML 5 Font Awesome icon:
on my front-end page, with no success.
My <head> section is as follows:
<!-- ----- Head ----- -->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="copyright" content="Benjamin Wong" />
<meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Language" content="en-us" />
<meta http-equiv="imagetoolbar" content="no" />
<meta name="MSSmartTagsPreventParsing" content="true" />
<meta name="description" content="Personal Landing Page" />
<meta name="keywords" content="Adv Dip in Pty & Facilities Mgt" />
<meta name="author" content="RECA" />
<meta name="robots" content="noindex, nofollow">
<link rel="icon" sizes="32x32" type="image/jpg" href="https://upload.wikimedia.org/wikipedia/commons/1/16/RECA-office.jpg">
<title>Course Notes — Advanced Diploma in Property & Facilities Management</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/bootstrap-reboot.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<!--<link href="css/normalize.css" rel="stylesheet">
<link href="css/skeleton-fontawesome-buttons.css" rel="stylesheet">
<link href="css/skeleton-fontawesome-buttons.min.css" rel="stylesheet">
<link href="css/skeleton.css" rel="stylesheet">-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- fontawesome.io -->
<script defer src="https://use.fontawesome.com/releases/v5.5.0/js/all.js"></script>
<script src="https://kit.fontawesome.com/4ba3d81910.js" crossorigin="anonymous"></script>
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/scripts.js"></script>
<!-- ----- Body ----- -->
<h2 >
<strong>
M4: Property & Facilities Management Law<i ></i>
</strong>
</h2>
<hr>CodePudding user response：
The reason is that the class name for html5 icon in fontawesome v5.5.0 is fab fa-html5 instead of fa.
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.5.0/css/all.min.css" integrity="sha512-QfDd74mlg8afgSqm3Vq2Q65e9b3xMhJB4GZ9OcHDVy1hZ6pqBJPWWnMsKDXM7NINoKqJANNGBuVRIpIJ5dogfA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<i ></i>CodePudding user response：
The reason is that the class name for html5 icon in fontawesome v5 is fab fa-html5 instead of fa. and update the link
<!-- ----- Head ----- -->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="copyright" content="Benjamin Wong" />
<meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Language" content="en-us" />
<meta http-equiv="imagetoolbar" content="no" />
<meta name="MSSmartTagsPreventParsing" content="true" />
<meta name="description" content="Personal Landing Page" />
<meta name="keywords" content="Adv Dip in Pty & Facilities Mgt" />
<meta name="author" content="RECA" />
<meta name="robots" content="noindex, nofollow">
<link rel="icon" sizes="32x32" type="image/jpg" href="https://upload.wikimedia.org/wikipedia/commons/1/16/RECA-office.jpg">
<title>Course Notes — Advanced Diploma in Property & Facilities Management</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/bootstrap-reboot.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<!--<link href="css/normalize.css" rel="stylesheet">
<link href="css/skeleton-fontawesome-buttons.css" rel="stylesheet">
<link href="css/skeleton-fontawesome-buttons.min.css" rel="stylesheet">
<link href="css/skeleton.css" rel="stylesheet">-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.5.0/css/all.min.css" integrity="sha512-QfDd74mlg8afgSqm3Vq2Q65e9b3xMhJB4GZ9OcHDVy1hZ6pqBJPWWnMsKDXM7NINoKqJANNGBuVRIpIJ5dogfA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<!-- fontawesome.io -->
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/scripts.js"></script>
<!-- ----- Body ----- -->
<h2 >
<strong>
M4: Property & Facilities Management Law<i ></i>
</strong>
</h2>
<hr>CodePudding user response：
Found out what was causing the problem in your code:
Remove this line from your code:
<script defer src="https://use.fontawesome.com/releases/v5.5.0/js/all.js"></script>
Below is the modified code:
<!-- ----- Head ----- -->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="copyright" content="Benjamin Wong" />
<meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Language" content="en-us" />
<meta http-equiv="imagetoolbar" content="no" />
<meta name="MSSmartTagsPreventParsing" content="true" />
<meta name="description" content="Personal Landing Page" />
<meta name="keywords" content="Adv Dip in Pty & Facilities Mgt" />
<meta name="author" content="RECA" />
<meta name="robots" content="noindex, nofollow">
<link rel="icon" sizes="32x32" type="image/jpg" href="https://upload.wikimedia.org/wikipedia/commons/1/16/RECA-office.jpg">
<title>Course Notes — Advanced Diploma in Property & Facilities Management</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/bootstrap-reboot.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<!--<link href="css/normalize.css" rel="stylesheet">
<link href="css/skeleton-fontawesome-buttons.css" rel="stylesheet">
<link href="css/skeleton-fontawesome-buttons.min.css" rel="stylesheet">
<link href="css/skeleton.css" rel="stylesheet">-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- fontawesome.io -->
<script src="https://kit.fontawesome.com/4ba3d81910.js" crossorigin="anonymous"></script>
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/scripts.js"></script>
<!-- ----- Body ----- -->
<h2 >
<strong>
M4: Property & Facilities Management Law<i ></i>
</strong>
</h2>
<hr>Link to codepen: https://codepen.io/geekyquentin/pen/MWQdBJM