文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
首页
学习
活动
专区
圈层
工具
MCP广场
返回腾讯云官网
社区首页 >问答首页 >字体-- HTML 5图标

问字体-- HTML 5图标
EN

Stack Overflow用户
提问于 2022-06-21 10:39:36
回答 3查看 87关注 0票数 0

我正在尝试实现HTML 5字体的图标：

​

​

在我的头版上，没有成功。

我的<head>部分如下：

​

代码语言：javascript
运行
复制
<!-- ----- 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>

​

font-awesome
html
css
EN

回答 3

Stack Overflow用户

发布于 2022-06-21 10:57:33

原因是在fontawesv5.5.0中html5图标的类名是fab fa-html5而不是fa。

​

代码语言：javascript
运行
复制
<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>

​

票数 1
EN

Stack Overflow用户

发布于 2022-06-21 11:10:00

原因是html5图标在fontawesome v5中的类名是fab fa-html5而不是fa。并更新链接

​

代码语言：javascript
运行
复制
 <!-- ----- 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>

​

票数 0
EN

Stack Overflow用户

发布于 2022-06-21 10:53:39

找出是什么导致了代码中的问题：

从代码中删除这一行：

代码语言：javascript
运行
复制
<script defer src="https://use.fontawesome.com/releases/v5.5.0/js/all.js"></script>

以下是修改后的代码：

​

代码语言：javascript
运行
复制
<!-- ----- 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>

​

链接到代码：https://codepen.io/geekyquentin/pen/MWQdBJM

票数 -1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/72699329

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2025 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 深公网安备号 44030502008569

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号 | 京公网安备号11010802020287

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档