[Resolved] Change color svg icon

Home Forums Support [Resolved] Change color svg icon

Home Forums Support Change color svg icon

Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • #1653797
    gabrielvb1100

    Hello, Ive added an svg image as an logo, but it looks all black in my header, is there a way to fill it with other color? for example, the same color as my menu links?
    Ive tried :

    .site-logo svg {
    fill: #fff;
    }

    but it is not working
    thx.

    #1653936
    Elvin
    Staff
    Customer Support

    Hi,

    You can’t style SVGs that way if they’re added as an img src. That only works on inline SVGs.

    If you need to change the color, I’m afraid you’ll have to edit it on a SVG image editor software like Adobe Illustrator or add it in as a inline SVG.

    You can use generate_logo_output filter to add it in.
    https://docs.generatepress.com/article/generate_logo_output/

    A wise man once said:
    "Have you cleared your cache?"

    #1654838
    gabrielvb1100

    Hi, how do I use the code?

    #1654864
    gabrielvb1100

    I have added the code provided like this in my functions

    
    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">
                    <svg width="24" height="24" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd"><path d="M11.499 12.03v11.971l-10.5-5.603v-11.835l10.5 5.467zm11.501 6.368l-10.501 5.602v-11.968l10.501-5.404v11.77zm-16.889-15.186l10.609 5.524-4.719 2.428-10.473-5.453 4.583-2.499zm16.362 2.563l-4.664 2.4-10.641-5.54 4.831-2.635 10.474 5.775z"/></svg>
                </a>
            </div>',
            esc_url( apply_filters( 'generate_logo_href' , home_url( '/' ) ) ),
            esc_attr( apply_filters( 'generate_logo_title', get_bloginfo( 'name', 'display' ) ) )
        );
    } );
    

    and then the svg shows as logo, is there a way to modify its width and height?

    #1655141
    Elvin
    Staff
    Customer Support

    Try this:

    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">
                    <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd"><path d="M11.499 12.03v11.971l-10.5-5.603v-11.835l10.5 5.467zm11.501 6.368l-10.501 5.602v-11.968l10.501-5.404v11.77zm-16.889-15.186l10.609 5.524-4.719 2.428-10.473-5.453 4.583-2.499zm16.362 2.563l-4.664 2.4-10.641-5.54 4.831-2.635 10.474 5.775z"></path></svg>
                </a>
            </div>',
            esc_url( apply_filters( 'generate_logo_href' , home_url( '/' ) ) ),
            esc_attr( apply_filters( 'generate_logo_title', get_bloginfo( 'name', 'display' ) ) )
        );
    } );

    You then adjust the size with this CSS:

    .site-logo.MY-CUSTOM-CLASS svg {
        width: 72px;
        height: auto;
    }

    A wise man once said:
    "Have you cleared your cache?"

    #1655294
    gabrielvb1100

    it works great. Is there a way to set it as mobile logo as well?

    #1655295
    Elvin
    Staff
    Customer Support

    Sure you can.

    You can use the generate_mobile_header_logo_output. Just copy the code you’ve used on the other filter to have the exact same thing. ๐Ÿ˜€

    A wise man once said:
    "Have you cleared your cache?"

    #1656327
    gabrielvb1100

    Super cool, it works.
    Thank you.

    #1658358
    Elvin
    Staff
    Customer Support

    No problem. Glad it works for you. ๐Ÿ˜€

    A wise man once said:
    "Have you cleared your cache?"

Viewing 9 posts - 1 through 9 (of 9 total)
  • You must be logged in to reply to this topic.