How can I make my customized cart icon slighty zoom in when my cursor's on it?

[Avvoyer]

Hi! I changed my cart icon to another svg, but it stopped zooming in when I put my cursor on it. Can someone help me with it? Thanks!

[BrainStation23 · Accepted solution]

Hi @Avvoyer. Thanks for the URL. You need to add some classes in your custom cart icon svg.

Add the following code in your svg tag:

class="icon".

So, your svg will become:

<svg height="26" viewBox="0 0 24 24" width="26" xmlns="http://www.w3.org/2000/svg" class="icon">
  <defs></defs>
  <path d="m5.50835165 12.5914912c-.00106615-.0057657-.00203337-.011566-.00289985-.0173991l-1.22011509-7.32069058c-.12054699-.72328196-.74633216-1.25340152-1.47959089-1.25340152h-.30574582c-.27614237 0-.5-.22385763-.5-.5s.22385763-.5.5-.5h.30574582c1.1918179 0 2.21327948.84029234 2.44951006 2h16.24474412c.3321894 0 .5720214.31795246.480762.63736056l-2 7.00000004c-.0613288.2146507-.2575218.3626394-.480762.3626394h-12.90976979l.12443308.7465985c.12054699.7232819.74633216 1.2534015 1.47959089 1.2534015h11.30574582c.2761424 0 .5.2238576.5.5s-.2238576.5-.5.5h-11.30574582c-1.22209789 0-2.26507316-.8835326-2.46598481-2.0890025l-.21991747-1.3195048zm-.08478811-6.5914912 1 6h12.69928576l1.7142857-6zm2.57643646 15c-1.1045695 0-2-.8954305-2-2s.8954305-2 2-2 2 .8954305 2 2-.8954305 2-2 2zm0-1c.55228475 0 1-.4477153 1-1s-.44771525-1-1-1-1 .4477153-1 1 .44771525 1 1 1zm9 1c-1.1045695 0-2-.8954305-2-2s.8954305-2 2-2 2 .8954305 2 2-.8954305 2-2 2zm0-1c.5522847 0 1-.4477153 1-1s-.4477153-1-1-1-1 .4477153-1 1 .4477153 1 1 1z" style="fill: rgb(255, 255, 255);"></path>
</svg>

Let us know if you need any help or have any query.

[BrainStation23]

Hello @Avvoyer . Can you share your store url ?

[Avvoyer]

https://avvoyer.com

[BrainStation23 · Accepted solution]

Hi @Avvoyer. Thanks for the URL. You need to add some classes in your custom cart icon svg.

Add the following code in your svg tag:

class="icon".

So, your svg will become:

<svg height="26" viewBox="0 0 24 24" width="26" xmlns="http://www.w3.org/2000/svg" class="icon">
  <defs></defs>
  <path d="m5.50835165 12.5914912c-.00106615-.0057657-.00203337-.011566-.00289985-.0173991l-1.22011509-7.32069058c-.12054699-.72328196-.74633216-1.25340152-1.47959089-1.25340152h-.30574582c-.27614237 0-.5-.22385763-.5-.5s.22385763-.5.5-.5h.30574582c1.1918179 0 2.21327948.84029234 2.44951006 2h16.24474412c.3321894 0 .5720214.31795246.480762.63736056l-2 7.00000004c-.0613288.2146507-.2575218.3626394-.480762.3626394h-12.90976979l.12443308.7465985c.12054699.7232819.74633216 1.2534015 1.47959089 1.2534015h11.30574582c.2761424 0 .5.2238576.5.5s-.2238576.5-.5.5h-11.30574582c-1.22209789 0-2.26507316-.8835326-2.46598481-2.0890025l-.21991747-1.3195048zm-.08478811-6.5914912 1 6h12.69928576l1.7142857-6zm2.57643646 15c-1.1045695 0-2-.8954305-2-2s.8954305-2 2-2 2 .8954305 2 2-.8954305 2-2 2zm0-1c.55228475 0 1-.4477153 1-1s-.44771525-1-1-1-1 .4477153-1 1 .44771525 1 1 1zm9 1c-1.1045695 0-2-.8954305-2-2s.8954305-2 2-2 2 .8954305 2 2-.8954305 2-2 2zm0-1c.5522847 0 1-.4477153 1-1s-.4477153-1-1-1-1 .4477153-1 1 .4477153 1 1 1z" style="fill: rgb(255, 255, 255);"></path>
</svg>

Let us know if you need any help or have any query.

[BrainStation23 · Accepted solution]

@Avvoyeradditionally if you face any height issue of icon you can adjust it in your base.css. Change the following code in your base.css:

.header__icon, .header__icon--cart .icon {
 height: 3rem; // change it according to your need
 width: 4.4rem;
 padding: 0;
}

[Avvoyer]

Thanks! It really helped me. 😁

[BrainStation23]

You're most welcome.

[Avvoyer]

Hi! Sorry for bothering you again, but I figured out that the cart icon height is only being changed on my device. How can I fix it?