Issue
I'm currently using Netlify to host a website through Git. I'm using Font Awesome to get some icons and putting them in some buttons with links attached. During testing, everything worked perfectly, but when deploying to Netlify, the icons disappear and the links stop working.
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: (I have tried adding type=text/css when connecting to FontAwesome and got the same result)
.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;
}
Solution
You are referencing FontAwesome from a folder on your local machine, it will not be uploaded to Netlify and that's why the icons are not appearing. To solve the issue copy the FontAwesome CSS to your project directory or consider adding it through CDN.
Answered By - esnezz
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.