- This topic has 23 replies, 2 voices, and was last updated 5 years, 7 months ago by
.
-
Posts
-
Hi,
I need to change the 3 bar menu icon to a better one which is clearer, how can I do this?
Like the one used on this site: https://www.saltygecko.co.uk/
Customer Support
Hi there,
Would something like this help?
https://generatepress.com/forums/topic/animated-hamburger-icon
https://gist.github.com/generatepress/589b9e91bca7205883b0454f15a4dcf9It 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?
Is it not possible to open a support ticket here for GP Premium?
Have you decided on the icon you are trying to use?
Is it a font awesome icon?
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/
Lead Developer
Are you wanting the transition effect from the 3 bars to the X, or do you just want to change the 3 bars icon?
I am just looking to change the 3 bars icon
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?
the google menu icon looks ok to me, how would I implement this?
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 🙂
where should I place the code?
I have done all of the above and nothing has changed. Any ideas?
- You must be logged in to reply to this topic.
