[Resolved] Is possible to set an icon (icomoon) like logo image?

[Alfonso]

I would like set an icon like logo image to change color on hover. Is it possible?

Else, i would be to change color on hover on svg logo image?

Thanks!

[Leo]

Hi there,

Are you actually referring to the logo here? If so something like this might help:
https://css-tricks.com/change-color-of-svg-on-hover/

[Alfonso]

Im referrig to my logo here:

https://desa.delahuertacasa.com

Im tried it following your link but not understand how can do it, sorry

[Leo]

So basically you want the logo color to change on hover?

If so you might need to go with 2 logos images with different colors and the method here:
https://generatepress.com/forums/topic/logo-hover/#post-83213

Just use Hooks Elements instead of GP hooks:
https://docs.generatepress.com/article/hooks-element-overview/

[Alfonso]

Hi,

may be a solution but this method makes to load 2 images logo on each time, is not possible to edit color on hover over unique svg file?

[Tom]

Hi there,

You would need to replace the logo with an inline SVG:

add_filter( 'generate_logo_output', function() {
    return sprintf( // WPCS: XSS ok, sanitization ok.
        '<div class="site-logo">
            <a href="%1$s" title="%2$s" rel="home">
                YOUR SVG HTML HERE
            </a>
         </div>',
         esc_url( apply_filters( 'generate_logo_href' , home_url( '/' ) ) ),
         esc_attr( apply_filters( 'generate_logo_title', get_bloginfo( 'name', 'display' ) ) )
     );
} );

Then you can target the SVG element with CSS to color it.

[Alfonso]

Thanks Tom!

[Tom]

No problem 🙂

[Alfonso]

Resolved!

[Author]

Posts