How can I modify header icons without losing their animations?

Solved

How can I modify header icons without losing their animations?

LEEDIA
Excursionist
25 0 6

Hi, I'm having trouble changing the header icons while also keeping their animations (such as increasing in size when hovered over or when clicked). I managed to change the hamburger icon but it did not go away when clicked and remained under the X. Similarly, when I changed the search and account icons they would not change in size when being hovered over. Not sure how I could fix this.

 

I appreciate any help 🙂

 

Website: https://leediastore.com/

 

Photo Dec 21 2023, 4 26 07 PM.jpgPhoto Dec 21 2023, 4 26 09 PM.jpg

Accepted Solution (1)

Dan-From-Ryviu
Shopify Partner
9570 1924 1961

This is an accepted solution.

Did you add the class of default svg icons to your new icons?

- Helpful? Like and Accept solution! or Buy me coffee
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Ryviu: Aliexpress Reviews - AliExpress Reviews Importer, one-click import aliexpress reviews, export reviews to CSV file.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

View solution in original post

Replies 3 (3)

Dan-From-Ryviu
Shopify Partner
9570 1924 1961

This is an accepted solution.

Did you add the class of default svg icons to your new icons?

- Helpful? Like and Accept solution! or Buy me coffee
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Ryviu: Aliexpress Reviews - AliExpress Reviews Importer, one-click import aliexpress reviews, export reviews to CSV file.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

LEEDIA
Excursionist
25 0 6

It worked! Thanks, though I'm currently having trouble getting the sizing down on the account icon, after I added the class from the default SVG the icon is no longer visible, either too big or too small, or maybe being cropped out. Not sure how to make it visible again.  

 

Edit: Managed to make it work. Thanks again.

memahmudhassan
Excursionist
37 0 9

I have changed the bag/cart icon but the popup notification not working when I'm taking my mouse on the icon. How can I add the animation again?

MAHAMUD H.