圓形上的Font Awesome在Bootstrap 4上去頂部按鈕

Question

在我的頁面底部，我使用了一個帶有Font Awesome圖標的滾動頂部按鈕。向上箭頭具有帶邊框的背景顏色：50％和懸停顏色。我已經搜遍了，並且邊界50％應該做一個圓形，但是在這種情況下有些東西阻止了它。我想在圖標上添加一個簡單的圓形背景顏色。

我的代碼

#Scroll { 
 
    display: none; 
 
    position: fixed; 
 
    bottom: 20px; 
 
    right: 30px; 
 
    z-index: 99; 
 
    border: none; 
 
    outline: none; 
 
    background-color: #5F9EA0; 
 
    color: white; 
 
    text-align:center; 
 
    cursor: pointer; 
 
    padding: 15x; 
 
    border-radius: 50%; 
 
    opacity: .6; 
 
} 
 

 
#Scroll:hover { 
 
    color: #004289; 
 
    background-color: #FFE466; 
 
}

<button onclick="topFunction()" id="Scroll" title="Go to top"><i class="fa fa-2x fa-arrow-circle-up"></i></button> 
 
<script> 
 
// When the user scrolls down 20px from the top of the document, show the button 
 
window.onscroll = function() {scrollFunction()}; 
 

 
function scrollFunction() { 
 
    if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) { 
 
     document.getElementById("Scroll").style.display = "block"; 
 
    } else { 
 
     document.getElementById("Scroll").style.display = "none"; 
 
    } 
 
} 
 

 
// When the user clicks on the button, scroll to the top of the document 
 
function topFunction() { 
 
    document.body.scrollTop = 0; 
 
    document.documentElement.scrollTop = 0; 
 
} 
 
</script>

Answer 1

使按鈕廣場：

#Scroll { 
    height: 40px; 
    width: 40px; 
} 

Answer 2

試試這個CSS的按鈕：

#Scroll { 
    display: none; 
    position: fixed; 
    bottom: 20px; 
    right: 30px; 
    z-index: 99; 
    border: none; 
    outline: none; 
    background-color: #5F9EA0; 
    color: white; 
    text-align: center; 
    cursor: pointer; 
    opacity: .6; 

    /* add this */   
    width: 50px; 
    height: 50px; 
    -webkit-border-radius: 25px; 
    -moz-border-radius: 25px; 
    border-radius: 25px; 

}