Replace icon button with URL image

I would know how to modify the Whatsapp icon button displayed in all pages for start a chat. In my site I have this code for the function in footer.php:

<div class="whatsapp">
<a href="https://api.whatsapp.com/send?phone=-------------" target="_blank">    
<h5><i class="fa fa-whatsapp fa-3x " aria-hidden="true"></i></h5></a>
            </div>

The CSS is this:

.whatsapp {
position: fixed;
right: 0px;
top: 52%;
}
.whatsapp h5 {
color: white;
background: #20b20f;
padding: 12px;
border-radius: 10px;
}

I wanna change the icon (fa fa-whatsapp fa-3x) with an icon that I have upload on my media library (URL image). Furthermore I would hide the icon in cart and checkout page. How can I make that? Thanks!

Answer

I do it like this

<a href="https://api.whatsapp.com/send?phone=+nnnnnnnnnnnnnn" target="_blank" style="background: none;"><img style="height: 30px; width: 30px;" src="/images/whatsapp_square.png"></a>