Fontawesome icon replacing Cart Image – Problem

I am trying to replace the Woocommerce cart image in the right-hand side of the header with FontAwesome.

I have succeeded, but need help with two little (big?) tweaks:

1. I need to remove the border around the box surrounding the Cart image. Still have narrow white band/border…not sure what selector to choose to get rid of it!

2. When I change to FontAwesome Icon from original Enfold cart image, I get a SECOND tiny copy of that Fontawesome icon in front of the counter of the following:
.av-active-counter
.av-cart-counter

I would like to get rid of the border and also that second Fontawesome icon.

Here is the CSS I’m using:

/*Move cart image to left just a little, leaving tiny margin on right*/
ul.menu-item.cart_dropdown{margin-right:18px!important;}

/*Change Cart image from CART to FontAwesome purse
If Font-weight is 900, get SOLID purse. If 400, get OUTLINE
Below is solid, but kinda like outline*/
a.cart_dropdown_link > span:before {
content: ‘\f290’!important;
font-family: ‘Font Awesome 5 Pro’!important;
font-weight: 900!important;
}
/*Woocommerce – Cart — make background same as header. Not sure how to get rid of border thingie. Also increase size of Icon*/
ul.menu-item.cart_dropdown li.cart_dropdown_first a.cart_dropdown_link{
background:#333!important;
color:pink!important;
font-size:32px!important;
}

/*These are the numbers tiny beside cart. Only colored them to see what they are.*/
ul.menu-item.cart_dropdown li.cart_dropdown_first a.cart_dropdown_link .av-active-counter{color:red!important;}
ul.menu-item.cart_dropdown li.cart_dropdown_first a.cart_dropdown_link .av-cart-counter{color:yellow!important;}