字体真棒 HTML 5 图标
[英]Font Awesome HTML 5 icon
问题描述
我正在尝试实现 HTML 5 Font Awesome 图标：
在我的前端页面上，没有成功。
我的<head>部分如下：
<!-- ----- 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 class="text-left lead"> <strong> M4: Property & Facilities Management Law<i class="fa fa-brands fa-html5"></i> </strong> </h2> <hr>
3 个解决方案
解决方案1
1 2022-06-21 10:57:33
原因是 fontawesome v5.5.0 中html5 图标的类名是fab fa-html5而不是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 class="fab fa-html5"></i>
解决方案2
0 2022-06-21 11:10:00
原因是fontawesome v5中 html5 图标的类名是fab fa-html5而不是 fa。 并更新链接
<!-- ----- 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 class="text-left lead"> <strong> M4: Property & Facilities Management Law<i class="fab fa-html5"></i> </strong> </h2> <hr>解决方案3
-1 2022-06-21 10:53:39
找出导致代码中问题的原因：
从您的代码中删除这一行：
<script defer src="https://use.fontawesome.com/releases/v5.5.0/js/all.js"></script>
下面是修改后的代码：
<!-- ----- 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 class="text-left lead"> <strong> M4: Property & Facilities Management Law<i class="fa fa-brands fa-html5"></i> </strong> </h2> <hr>
链接到 codepen： https ://codepen.io/geekyquentin/pen/MWQdBJM
字体真棒图标为 html 链接
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.