"i class" icon align left

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>

You have a br in your a don’t do that. remove it and it’s fine.

Thank you for the help! I had been staring at that code for two hours and changing everything…