Help Troubleshooting my Back to Top button

A while back, I coded a floating "Back to Top" button into my website. All was well for quite some time, but recently I've been having some display issues on desktop, and for the life of me I can't figure out why. In the fluid engine editor, the button displays and operates exactly as it should on both the mobile and desktop previews. The button also looks/works perfectly on the live mobile version of my website. However, although it works fine on the desktop site (color/shape, delayed visibility, scrolls back to top on click, etc, etc), the arrow goes missing!

I've tried everything I can think of as far as solutions go, but I am still very green to coding and would appreciate any help I can get. I've included the HTML and CSS I used to create and style the button, as well as screenshots of what it looks like in the desktop editor preview, mobile editor preview, and live desktop site respectively.

<!-- Back to Top Button -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
<button onclick="topFunction()" id="btt" title="back to Top"><i class="fas fa-arrow-up"></i></button>

<script>
   window.onscroll = function() {scrollFunction()};
   function scrollFunction() {
      if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
         document.getElementById("btt").style.display = "block";
      } else {
         document.getElementById("btt").style.display = "none";
      }
   }
   function topFunction() {
      $('html,body').animate({ scrollTop: 0 }, 750);
   }
</script>

// BACK TO TOP BUTTON
#btt {
   width: 50px;
   height: 50px;
   display: visible !important;
   position: fixed;
   bottom: 40px;
   right: 40px;
   z-index: 99;
   border: 1px solid #fff;
   font-size: 27px !important;
   color: #fff !important;
   padding: 10px 10px 10px 11px;
   border-radius: 50%;
   background-color: #4d7d7d;
}
#btt:hover {
   background-color: rgba(113,151,151,.9999)!important;
}
// ^ smaller for mobile
@media screen and (max-width:767px) {
  #btt {
   width: 40px;
   height: 40px;
   display: none;
   position: fixed;
   bottom: 50px;
   right: 30px;
   z-index: 99;
   border: 1px solid #fff;
   font-size: 20px !important;
   color: #fff;
   padding: 8px 10px 10px 11px;
   border-radius: 50%;
}}

Can you share link to your site? We can check problem easier