• Ifra Saqlain

  • October 11, 2021 12:56

  Community Moderator

  

  

  Hey, if your icon is image (png, jpg, jpeg) then the color couldn't change on hover,  you can change the color of SVG icon and font icon on hover.

  Yes, you can do one thing, you can upload the two images- one for normal and second for hover with another color which you want and then via CSS you can get your point.

• Edwin Andermyr

  • October 11, 2021 13:13

  My icons were initially SVG, but I converted them to PNG for the sake of it.

  If I upload them again in .SVG format, what shall I do so that the color of the icon can switch to White on hover?
  
  

   

• Ifra Saqlain

  • October 11, 2021 15:42

  Community Moderator

  

  

  Edwin, do these simple steps:

  1). Upload your SVG icons into assets folder.

  2). Replace png icons with svg icons.

  3). Now, add the below code but change the class, I have added button and you have any different class so.

  .button:hover img{        /* button class is an example, change it with yours*/
  filter: brightness(0) invert(1);
  }

   

  Try this, if any issue, do let me know.

  Thanks

   

• Ifra Saqlain

  • October 13, 2021 04:29

  Community Moderator

  

  

  Hi Edwin,

  Share your public URL of your HC and make sure your working theme must be saved as Live,  I can convert the PNG icons in SVG and provide you the exact code here.

  You only need to upload those SVG icons in your assets folder and after that, you will be done.

  Thanks

  Ifra

• Ifra Saqlain

  • October 15, 2021 04:39

  Community Moderator

  

  

  Hi Edwin, you can convert png icons to svg by online tool: https://www.pngtosvg.com/

   

  You can se, I only converted the png icon to svg and uploaded it into the assets folder and remove the png icon from image SRC and then add the SVG icon into image SRC. 

   

  Then copy this given CSS code and paste it at the bottom of the syle.css file.

  .blocks-item:hover *{
    filter: brightness(0) invert(1);
  }

   

   

  Screenshots for the same work:

  For SVG icon: filter property.

  

   

  Icon color would be change on mouse hover.

  

   

  If any confusion, do let me know :)

  Thanks

  Ifra

   

   

• Edwin Andermyr

  • October 12, 2021 07:25

  Hi Ifra,

   

  Thanks for the response.

  But I don't understand the class thingy,

  Am I suppose to create a class? 

  hmm I can definitely change the assets to svg and point it to the svg icons:
  by editing the homepage_hbs page:

  "

        <!--Images for categories Home Page -->

  {{#is id XXXXXXXXX}}<img class="" src="{{asset 'Manual-TEST.svg'}}" />{{/is}}

  instead of the png one.

  But for the piece of code you wrote, should I write it in the css page?

  is there something like a div class code I should add to make it work? 

  I'm confused here sorry about it! 

   

• Edwin Andermyr

  • October 12, 2021 08:52

  Actually I can't convert my files back to .svg

  I needed to change the color that's why I exported the .svg into .png,

   

  But I am not able to edit the color and export it as .svg

  So well I'll need to find another alternative, where I can do that with a .png

   

   

• Edwin Andermyr

  • October 13, 2021 07:23

  Hi Ifra,

  I highly appreciate the effort here:
  The code is indeed live right now:

  https://support.qbank.se/hc/en-us

  Thanks in advance.

   

• Edwin Andermyr

  • October 15, 2021 11:26

  Dear Ifra,

  It works like a charm now:
  
  https://support.qbank.se/hc/en-us

  Thank you once again for the help here! Highly appreciate your effort! 

  Sincerely,

  /Edwin

• Ifra Saqlain

  • October 16, 2021 12:35

  Community Moderator

  

  

  Happy to hear this :)

Please sign in to leave a comment.