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图标

1 个答案: