make entire html button clickable-CodePudding

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;
}

CodePudding user response：

simply transfer the your <span> class to your <a> tag.

<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>