Hey David, thanks for sharing 🙂
There is a more optimized way of doing it. Regarding changing the text, if you inspect the button text (in Beans development mode), you will see that there is an HTML comment <!-- open output: beans_offcanvas_menu_button -->. When you see such stuff on the page, it means that you can customize the output using a filter. Here is the full explaination how the output filter works which totally apply to your case, just a different output id. In your case the code would be the follwing:
add_filter( 'beans_offcanvas_menu_button_output', 'example_offcancas_menu_button_text' );
function example_offcancas_menu_button_text() {
return 'Example Text';
}When it comes to modifying the Icon, the easiest is to modify the attribute. Let's say for example you want to change it to info-circle (from UIkit Icons), you can just add the following line:
beans_replace_attribute( 'beans_primary_menu_offcanvas_button_icon', 'class', 'navicon', 'info-circle' );Note how Beans can even replace only one part of a class, for instance navicon.
Happy coding,
That is acually way smarter and versatile. Thank you.
What should be done differently if we Dequeue font awesome ? Do we input replacement icons via the stylesheet or write it out in HTML?
@Dee S The code Thierry posted only replaces the default class with a new class. If you dequeue Font Awesome and use a different icon font you will just have to change the code to give it the correct class.
Yes that is true. But I've tried with a different icon font nothing happens. I must have done it wrong.
Hi Dee,
Below is how you can dequeue the Icon component which would prevent Font Awesome from loading:
add_action( 'beans_uikit_enqueue_scripts', 'example_enqueue_uikit_assets' );
/**
* Dequeue the UIkit component.
*/
function example_enqueue_uikit_assets() {
beans_uikit_dequeue_components( array( 'icon' ) );
}You will then have to enqueue your own fonts library and add the HTML classes accordingly.
Happy coding,