时间戳

首页 > 解决方案 > 字体真棒图标不出现

html - 字体真棒图标不出现

问题描述

我正在使用 font awesome 在我的网站上添加社交媒体按钮。我已遵守规则，但图标未出现这是我网站的负责人

<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>oktavianusm</title>
<link rel="stylesheet" type="text/css" href="style.css">
<link href="https://fonts.googleapis.com/css?family=Inconsolata" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Ubuntu" rel="stylesheet" type="text/css">
<link href="fontawesome-free-5.3.1-web/css/fontawesome.min.css" rel="stylesheet" type="text/css">

这就是我在我的html正文中管理它的方式

<div class="social-media">
        <i class="fab fa-facebook-square"></i>
        <i class="fab fa-twitter-square"></i>
        <i class="fab fa-linkedin-square"></i>
        <i class="fab fa-google-plus-square"></i>
    </div>

这就是我在浏览器中测试我的代码时发生的情况

这就是当我执行检查元素并将光标指向代码时发生的情况

标签： htmlfont-awesome

解决方案

刚刚检查了 Font Awesome 网站：https ://fontawesome.com/how-to-use/on-the-web/setup/getting-started?using=web-fonts-with-css 。

这是正确的样式表链接：

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" 
integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" 
crossorigin="anonymous">

正在考虑在我的网站上使用这些。

推荐阅读