Added an Icon to my Categories with Copenhague theme Now I want a Hover Color (just for that icon)

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.

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?

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

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! 

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

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

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.

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

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

Happy to hear this :)