Hover on a svg icon nestled in a custom loop for buttons

  • Resolved Sharp-Image

    (@sharp-image)


    3 years, 11 months ago

    Via a repeater I’ve setup a loop with a link (url) title and Icon (svg) that shows in the frontend a button. In WordPress my client can easy setup buttons for pages.

    Via css (fill on hover) I can not change the color of a svg icon. Is this possible with your plugin?

    I have updated the svg path of the icon with a class (style-svg) and saved the svg icon and uploaded to the media library. Via element inspect I can see that the udated class is setup in the icon. In the WordPress style sheet I updated the css but no changes are there on a hover action.

    Any idea what goes wrong?

    Thanks a lot!

Viewing 1 replies (of 1 total)
  • Plugin Author Benbodhi

    (@benbodhi)

    Hi there,

    Thanks for your support and using my plugin! And sorry for the delay in getting back to you!

    To modify an SVG file using CSS, it must be rendered inline. And it sounds like the way you’re using it, may not be inlined.

    I don’t fully understand exactly what you’re doing, but if you have added the class and activated the advanced mode to make sure inlining the SVG code works, then it should switch out the IMG that has the class and SVG src attribute, with the actual SVG code inline. Only then you will be able to target the internal elements.

    I hope this helps.

    Let me know if I can be of any further help.

Viewing 1 replies (of 1 total)
  • The topic ‘Hover on a svg icon nestled in a custom loop for buttons’ is closed to new replies.