[Resolved] How to change 3 bar menu icon to better one?

[Adam]

Hi,

I need to change the 3 bar menu icon to a better one which is clearer, how can I do this?

[Adam]

Like the one used on this site: https://www.saltygecko.co.uk/

[Leo]

Hi there,

Would something like this help?
https://generatepress.com/forums/topic/animated-hamburger-icon
https://gist.github.com/generatepress/589b9e91bca7205883b0454f15a4dcf9

[Adam]

It helped a little, I know where to change it but not sure what I should change it to? currently, this is what I have: content: “\f0c9”; and the font-family: ‘GP Premium’; I have been trying to change this for over 1 day now, it surely should be easier than this?

[Adam]

Is it not possible to open a support ticket here for GP Premium?

[Leo]

Have you decided on the icon you are trying to use?

Is it a font awesome icon?

[Adam]

Yes I have but I am unsure which library it comes from, the same as the one on this website: https://www.saltygecko.co.uk/

[Tom]

Are you wanting the transition effect from the 3 bars to the X, or do you just want to change the 3 bars icon?

[Adam]

I am just looking to change the 3 bars icon

[Tom]

It’s difficult to replace if we use HTML (like the example you linked to). However, it’s super easy if we’re able to use an icon font or SVG image. Are there any icon fonts out there that have the toggle you’re looking for?

https://design.google.com/icons/
https://ionicons.com/

[Adam]

the google menu icon looks ok to me, how would I implement this?

[Tom]

The first thing to do is turn on SVG icons in Customize > General.

Then, try this filter:

add_filter( 'generate_svg_icon', function( $output, $icon ) {
    if ( 'menu-bars' === $icon ) {
        $output = '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M0 0h24v24H0z" fill="none"/><path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"/></svg>';
    }

    return $output;
}, 10, 2 );

Let me know 🙂

[Adam]

where should I place the code?

[Leo]

Adding PHP: https://docs.generatepress.com/article/adding-php/

[Adam]

I have done all of the above and nothing has changed. Any ideas?

[Author]

Posts