Are you a GenerateCustomer?

Do you have an active GP Premium or GenerateBlocks Pro license key?

Create a GenerateSupport account for GeneratePress and GenerateBlocks support in one dedicated place.

Create an account
Already have a GenerateSupport account? Login

Just browsing?

Feel free to browse the forums. Support for our free versions is provided on WordPress.org (GeneratePress, GenerateBlocks).

Want to become a premium user? Learn more below.

Change close icon

  • Hello,

    Searching the GP documentation, I found a snippet to change the default icons.

    I have used this one to change the menu icon and close:

    add_filter( 'generate_svg_icon_element', function( $output, $icon ) {
        if ( 'menu-bars' === $icon ) {
            $output = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="none">
        <path d="M4 8.5L20 8.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
        <path d="M4 15.5L20 15.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
    </svg>';
        }
        return $output;
    }, 10, 2 );
    
    add_filter( 'generate_svg_icon_element', function( $output, $icon ) {
        if ( 'close' === $icon ) {
            $output = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="none">
        <path d="M15.7494 15L9.75 9M9.75064 15L15.75 9" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
        <path d="M22.75 12C22.75 6.47715 18.2728 2 12.75 2C7.22715 2 2.75 6.47715 2.75 12C2.75 17.5228 7.22715 22 12.75 22C18.2728 22 22.75 17.5228 22.75 12Z" stroke="currentColor" stroke-width="1.5" />
    </svg>';
        }
        return $output;
    }, 10, 2 );

    The menu one is working, but the close icon is not working.

    You can see it live on this site: https://blockagency.co/

    Could you help me to fix this?

    Thanks!

  • Hi there,

    Try using the snippet provided here instead:
    https://docs.generatepress.com/article/generate_svg_icon/

  • Hello Alvind,

    Those scripts seem to have some bugs.

    I tried both of them, and they really seem to work half-heartedly.

    One only changes the menu icon, and the other only changes the slideout menu close icon.

    Have a look: https://take.ms/arff9

    Can you help me with this?

    Thanks!

  • Hi there,

    in the second part of the code:

    if ( 'close' === $icon ) {

    Change it to:

    if ( 'pro-close' === $icon ) {

  • Hello David,

    Do you mean the snippet I used before?

    This one:

    add_filter( 'generate_svg_icon_element', function( $output, $icon ) {
        if ( 'menu-bars' === $icon ) {
            $output = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="none">
        <path d="M4 8.5L20 8.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
        <path d="M4 15.5L20 15.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
    </svg>';
        }
        return $output;
    }, 10, 2 );
    
    add_filter( 'generate_svg_icon_element', function( $output, $icon ) {
        if ( 'pro-close' === $icon ) {
            $output = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="none">
        <path d="M15.7494 15L9.75 9M9.75064 15L15.75 9" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
        <path d="M22.75 12C22.75 6.47715 18.2728 2 12.75 2C7.22715 2 2.75 6.47715 2.75 12C2.75 17.5228 7.22715 22 12.75 22C18.2728 22 22.75 17.5228 22.75 12Z" stroke="currentColor" stroke-width="1.5" />
    </svg>';
        }
        return $output;
    }, 10, 2 );

    I tried to do it but nothing really happens.

  • Hello Ying,

    I had already tried that, but the last snippet has some bugs:

    – It only changes the slideout close icon.
    – It does not change the menu icon.
    – When you click, during the slideout transition, it shows another close icon.

    Take a look: https://take.ms/TR4fK

  • Try changing this line if ('pro-menu-bars === $icon) to if ('menu-bars' === $icon)

  • Hello Ying,

    That worked great, thank you very much!

  • Glad to hear that 🙂

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