How do I replace cart icon with text instead?

Site URL: https://harp-clavichord-7apa.squarespace.com/

I have tried a few different techniques and although some have worked the 'Cart (0)' text doesn't vertically align with the rest of the website, please help.

CSS I have used + screenshot attached.

svg.icon.icon--cart {
    visibility: hidden;
}
.icon-cart-quantity:before {
    content: "Cart";
    font-size: 17px;
}
.icon-cart-quantity {
    font-size: 17px;
  
}
.header .header-actions-action--cart .icon { width: 70px;}

Try edit this code

.icon-cart-quantity:before {
    content: "Cart";
    font-size: 17px;
}

to this

.icon-cart-quantity:before {
    content: "Cart";
    font-size: 17px;
	position: relative;
	top: 10px;
}