How can I move an icon in an HTML button separately from text?

I guess this might sound confusing, but I have a button on my website that has some text and an icon. Unfortunately I cannot seem to resize the icon without moving the text into a funky location. I am very new to web development so I apologize, I just am feeling a bit stuck. Does anyone know how I might be able to resize and relocate this icon within the button without having it affect my perfectly centered text.

My button HTML code:

    <div>
         <button id="add">
             <i class="fab fa-discord fa-fw" style="font-size: 30px;"></i>
             &nbspAdd to Discord
         </button></a>
        <button id="dashboard">Dashboard</button>
    </div>

My button CSS Code:

#add {
   font-family: Rubik, sans-serif;
   font-weight: 400;
   font-size: 1.2rem;
   color: #fefefe;

   background: -webkit-gradient(linear,left top,right top,from(#5779ff),to(#57a5ff));
   background: -webkit-linear-gradient(left,#5779ff,#57a5ff);
   background: -o-linear-gradient(left,#5779ff 0,#57a5ff 100%);
   background: linear-gradient(90deg,#5779ff,#57a5ff);
   border: 0;
   border-radius: 8px;
   margin-right: 1rem;
   height: 3.5rem;
   width: 12.5rem;
   cursor: pointer; 
}