Align cart icon with text in 7.1

Site URL: https://cornet-green-nakz.squarespace.com/

Hi! I'm quite new to coding, any help or suggestion is much appreciated!

I used the following code to customize the cart icon and add text underneath. But I can't align the icon to the right. Image is attached for reference, thank you!

.header .header-actions-action--cart .icon {
  background: url(https://static1.squarespace.com/static/62ec1ff71a3945114dc3c287/t/630e588ddcbf3277a04fa082/1661884557772/List.png) center no-repeat;
  stroke: transparent !important;
  content: "";
  background-size: contain;
  
}
.header .header-actions-action--cart:after {
  content: "Quote/Sample List";
  color: #000;
  font-size: 12px;
  font-weight: 400;
  text-align: right;
  margin-top: 10px;
  margin-bottom: 0px;
  letter-spacing: 0px;
  width: 100% !important;
  display: inline-block;
}

Hi. What is password?

On 9/3/2022 at 8:06 AM, tuanphan said:

Hi. What is password?

Hi, password is "trial"

I was able to break the text to the second line, and center align it to the icon by setting both widths to 60 px. But how can I move the cart number so it's closer to the icon? I appreciate any suggestions. Thank you.

.header .header-actions-action--cart .icon {
  background: url(https://static1.squarespace.com/static/62ec1ff71a3945114dc3c287/t/630e588ddcbf3277a04fa082/1661884557772/List.png) center no-repeat;
  stroke: transparent !important;
  content: "";
  background-size: contain;
  width: 60px;
  
}
.header .header-actions-action--cart:after {
  content: "Quote/ Sample List";
  color: #000;
  font-size: 11px;
  font-weight: 400;
  text-align: center;
  margin-top: 10px;
  margin-bottom: 0px;
  letter-spacing: 0px;
  width: 60px;
  word-wrap: break-word;
  display: inline-block;
}

On 9/17/2022 at 4:53 AM, tuanphan said:

Add to Design > Custom CSS

.icon-cart-quantity.legacy-cart {
    padding-left: 0 !important;
    position: relative;
    left: -20px;
}

 

Thank you so much!