将网站部署到 Netlify 时未出现 FontAwesome 图标

Question

我目前正在使用 Netlify 通过 Git 托管网站。我正在使用 Font Awesome 获取一些图标并将它们放在一些带有链接的按钮中。在测试期间，一切正常，但是当部署到 Netlify 时，图标消失并且链接停止工作。

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta title="CyberTron5000">
    <title>CyberTron5000</title>
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <link rel="stylesheet" href="/Users/nizcomix/Downloads/fontawesome-free-5.13.1-web/css/all.css">
</head>
<body>
        <div class="buttons">
            <button class="github-btn"><a href="https://github.com/niztg/CyberTron5000" target="_blank"><i class="fab fa-github"></i></a></button><button class="discord-btn">
            <a href="https://discord.gg/2fxKxJH" target="_blank"><i class="fab fa-discord"></i></a></button><br><button class="invite-btn">
            <a href="https://discord.com/oauth2/authorize?client_id=697678160577429584&permissions=2081291511&scope=bot" target="_blank">Invite the Bot</a></button>
        </div>
</body>
</html>

CSS：（我尝试在连接到 FontAwesome 时添加 type=text/css 并得到相同的结果）


.buttons:hover{
cursor:pointer;
color:white;
}

.buttons{
padding: 10px 20px;
overflow:hidden;
position:relative;
transition:0.7s;
position:relative;
}

.buttons i{
line-height:90px;
font-size:46px;
transition:0.2s linear;
color:#222324;
}


.github-btn, .discord-btn{
margin: 10px;
height:90px;
width:90px;
display:inline-block;
font-size:45px;
border-radius:30%;
border: 0px solid white;
box-shadow: 0 5px 15px #00000070;
}

.invite-btn{
display:inline-block;
font-size:25px;
border: 0px solid white;
box-shadow: 0 5px 15px #00000070;
height:100px;
width:200px;
float:top;
border-radius:5%;
margin:10px;
color:#222324;
font-family:Verdana;
}

.github-btn:hover i, .discord-btn:hover i{
transform: scale(1.66)
}

.github-btn:hover, .discord-btn:hover, .invite-btn:hover{
background:#222324;
}

.github-btn:hover i, .discord-btn:hover i, .invite-btn:hover{
color:white;
}

Answer 1

您正在从本地计算机上的文件夹引用 FontAwesome，它不会上传到 Netlify，这就是图标未出现的原因。要解决此问题，请将 FontAwesome CSS 复制到您的项目目录或考虑通过 CDN 添加它。

将网站部署到 Netlify 时未出现 FontAwesome 图标

FontAwesome icons not appearing when deploying website to Netlify

html

css

netlify