make entire html button clickable

Question

for some reason, only 'Cart' text is clickable on the following button. I've tried several different variations, but I can't seem to make whole button clickable. Thank you for any suggestions.

<span class="header-account-item header-account-item-cart">
    <a href="/cart/"><i class="fas fa-shopping-cart fa-shopping-cart-icon fa-1x"></i><span class="my-cart-text">Cart</span></a>  
</span>

Here is css associated with button:

.header-account-item-cart {
margin-right: 5px;
}
.header-account-item {
background-color: #00a4ff !important;
padding: 8px;
border-radius: 3px;
display: inline-block;
margin-top: 25px;
margin-right: 10px;
}
.fa-shopping-cart-icon {
color: #FFFFFF;
padding-left: 0px;
}
.fa, .fab, .fad, .fal, .far, .fas {
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
display: inline-block;
font-style: normal;
font-variant: normal;
text-rendering: auto;
line-height: 1;
}

Answer 1

只需将您的<span>类转移到您的<a>标签。

<a class="header-account-item header-account-item-cart" href="/cart/"><i class="fas fa-shopping-cart fa-shopping-cart-icon fa-1x"></i><span class="my-cart-text">Cart</span></a>