I am having a crazy hard time aligning my icon to the left or even aligning my icon and text to the center with a padding left/right with the icon itself. I keep getting a big space on the left of the icon and not as equal of a padding with the side of the button on the right next to the words. I just want it to be symmetrical and look pleasant. I am using fontawesome for the fonts. Here is a picture and my code below:
<!DOCTYPE html>
<html>
<head>
<script src="https://kit.fontawesome.com/eb077908d5.js"></script>
<style type="text/css">
@import url('https://fonts.googleapis.com/css?family=Kaushan+Script&display=swap');;
html {
font-color: #FFFFFF;
font-family: 'Kaushan Script', cursive;
}
h2 {
color: #FFFFFF;
align: "center";
font-family: 'Kaushan Script', cursive;
font-size: 36px;
}
@font-face {
font-family: 'Kaushan Script', cursive;
src:url("https://drive.google.com/open?id=1BmpeJhF9kx_xD5f3cTM07WKdwmBECQnS") format("eot"),url("https://drive.google.com/open?id=13G9FdVEQaVJDyfu6p9VasqwpraDgDnNN") format("woff"),url("https://drive.google.com/open?id=1cK8Efj38M38rMnAAKBNAetxgA2c3dfQF") format("truetype"),url("https://drive.google.com/open?id=1qfN9cEP5ltroHcfUAwsRrIQsPESws7jH") format("svg");
font-weight:normal;
font-style:normal;
}
body {
background-size: 100% auto;
background-image: url("http://drive.google.com/uc?export=view&id=13lssTPIQc-RfIRasZ1hdeEpoj1b9BAaC");
}
.aligncenter {
text-align: center;
color: #FFFFFF;
}
.container {
border: 2px solid black;
border-radius: 25px;
padding-bottom: 1px;
border-color: white;
color: #FFFFFF;
}
div.a {
text-align: center;
}
h1 {
text-align: center;
margin-bottom:5px;
color: #FFFFFF;
}
.description {
text-align:center;
margin-top: 0px;
font-weight: bold;
}
.btn {
border: 2px solid black;
background-color: white;
color: black;
padding: 6px 35px;
font-size: 16px;
cursor: pointer;
text-align: left;
}
a:link {
text-decoration: none;
}
a:visited {
text-decoration: none;
}
a:hover {
text-decoration: none;
}
a:active {
text-decoration: none;
}
</style>
</head>
<body>
<div class='container'>
<h3 align='center'>Quick Links</h3>
<div class="a">
<a href='https://drive.google.com/' class="btn"><i class="fas fa-clipboard-list icon-spin"></i>Daily Schedule<br></a><br><br>
<a href='tel:(904)000-0000' class='btn link'><i class="fas fa-phone-volume"></i>Front Office (904)000-0000 </a>
<h6>Click to call</h6>
</div>
</body>
</html>